Primer UI

A self-tailored front-end framework. Launched with CSS Grids (6 columns). More to come ahead!

Getting Started

You can contribute to this project with just a simple pull-request.

Features

I started out with a custom grid system. I am not a Bootstrap hater but sometimes if you just want a grid system , rest of it is just an overkill.

Upcoming features are forms, tables, typography etc...

Usage

Import the primer-grids.css file in your project and mould the markup in the following pattern

<div class="primer-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
        <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-3"><p>col-3</p></div>
        <div class="col-3"><p>col-3</p></div>
    </div>
    <div class="row">
        <div class="col-4"><p>col-4</p></div>
        <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
        <div class="col-5"><p>col-5</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-6"><p>col-6</p></div>
    </div>
</div>

Built With

• Vanilla CSS (SASS support coming soon)
• Sublime Text - My Default Text Editor

Authors

• Shikher Aatrey (reach out to me at [email protected])