A grid creation boilerplate for SASS
Ocssipital is a lightweight and reusable CSS grid boilerplate that can be used in any project at any time.
Compared to other systems, Ocssipital's one and only focus is providing a flexible grid that is deeply customizable enabling you to use your own classes and breakpoints.
Built taking into consideration the W3C Grid Specification, Ocssipital's aim is to be prepared for the future.
There a lot of frameworks that include multiple UI components and widgets, that turn out to be large and complex.
Ocssipital focuses on grids, and does not provide any extra code related to UI elements.
Built for designers, find in Ocssipital a great tool and partner to help you scale and adapt your designs for any device.
By default, Ocssipital uses the recent Flexbox W3C specification for its grid. Check its browser support here.
If flexbox is not the right choice for you right now, don't worry, Ocssipital already includes a traditional float layout that you can use as well.
11111111111193662283333552444Working with Ocssipital is very easy. You can see an example below:
<div class="grid-container">
<div class="grid-column-1">One</div>
<div class="grid-column-2">Two</div>
<div class="grid-column-3">Three</div>
</div>
In addition to the base size, you can also add a column size according to a specific viewport:
<div class="grid-container">
<!-- Size 12 on small screens -->
<div class="grid-column-4 grid-column-12-s">One</div>
<!-- Size 6 on medium screens -->
<div class="grid-column-4 grid-column-6-m">Two</div>
<!-- Size 3 on large screens -->
<div class="grid-column-4 grid-column-3-l">Three</div>
</div>
Additionally, if you want to leave "holes" or gaps in your columns, you can do so:
<div class="grid-container">
<!-- Creates a gap of size 3 from the left side -->
<div class="grid-column-3 grid-gap-left-3">A 3 column gap to the left</div>
<!-- Creates a gap of size 3 from the right side -->
<div class="grid-column-3 grid-gap-right-6">A 6 column gap to the right</div>
</div>
If you wish to show/hide elements according to the viewport, you can use visibility classes:
<div class="grid-container">
<!-- Only visible on small screens -->
<div class="grid-column-4 grid-visible-s">One</div>
<!-- Only visible on large screens -->
<div class="grid-column-4 grid-visible-l">Two</div>
</div>
