Ocssipital
A grid creation boilerplate for SASS
Features
- Supports flexbox grids
- Fully responsive with media queries
- Customizable breakpoints and class names
- Includes gutters and spacing
Installation
- Download the repository
npm install
dependencies
Usage
Basic usage
Working with Ocssipital is very easy. You can see an example below:
One Two Three
Size per viewport
In addition to the base size, you can also add a column size according to a specific viewport:
<!-- Size 12 on small screens --> One <!-- Size 6 on medium screens --> Two <!-- Size 3 on large screens --> Three
Gaps
Additionally, if you want to leave "holes" or gaps in your columns, you can do so:
<!-- Creates a gap of size 3 from the left side --> A 3 column gap to the left <!-- Creates a gap of size 3 from the right side --> A 6 column gap to the right
Visibility
If you wish to show/hide elements according to the viewport, you can use visibility classes:
<!-- Only visible on small screens --> One <!-- Only visible on large screens --> Two
Customization
SASS settings
/* styles/scss/ocssipital.scss */ ), ), ), ), ), ), ), ), ), ) );
SASS settings customization
- columns
count
: (int) the amount of columnsprefix
: (string) the prefix of the column class name. By default: "grid-column"flexbox
: (boolean) wether to use flexbox or floats. By default: truedebug
: (boolean) Adds visual queues to show the grid. By default: false
- container
enable
: (boolean) wether to create a container for your grid. By default: trueprefix
: (string) the prefix of the container class name. By default: "grid-container"
- gaps
enable
: (boolean) wether to create gaps for your grid. By default: trueprefix
: (string) the prefix of the gaps class name. By default: "grid-gap"
- gutter
enable
: (boolean) wether to create gutters for your grid. By default: falseunit
: (string) the unit for the gutter. Options available: "px"size
: (int) the size to be multiplied with the gutter unit.
- visibility
enable
: (boolean) wether to create visibility elements for your grid. By default: trueprefix
: (string) the prefix of the visibility class names. By default: "grid-visible"
- mediaqueries
enable
: (boolean) wether to create mediaqueries for the grid or not. By default: true
- viewports
size
: (string) the identification of the viewport size you want to use. *Examples: small, medium, etc."min-width
: (string) the min-width value for the viewport's mediaquery.max-width
: (string) the max-width value for the viewport's mediaquery.min-height
: (string) the min-height value for the viewport's mediaquery.max-height
: (string) the max-height value for the viewport's mediaquery.high-resolution
: (boolean) if true, adds retina display and high-pixel density values to the viewport's mediaquery.create_columns
: (boolean) if true, creates columns for the current viewport. If set to false, the viewport will still be accesible for the mediaquery() sass mixin, but columns won't be created.
Changing prefixes
If you change, for example, the column prefix from "grid-column" to "col", you can later use in your HTML:
One Two Three
Compiling Ocssipital with your own settings
In the command line, run:
node generator.js
That will compile styles/scss/ocssipital.scss into styles/css/ocssipital.css
SASS Mixins
Mediaquery
Call on a specific viewport (defined in the settings) and create custom styles for it:
Usage
@)
Example
@)}
Change Column
Changes an element's current column size for a different one.
Usage
@)
Example
MyDiv
/* For the small viewport, change the column from size 4 to size 12 of .myDiv */ }}
Browser support
- For flexbox layouts: IE11+, Firefox 38+, Chrome 31+, Safari 9+, Opera 32+
- For float layouts: IE8+, Firefox, Chrome, Safari, Opera
With ❤ by
-
Ignacio Ricci (VP of Product @ Mango)
-
E-mail: ignacio.ricci@gmail.com
-
Twitter: @ignacioricci
-
Guille Paz (Front-end developer | Web standards lover)
-
E-mail: guille87paz@gmail.com
-
Twitter: @pazguille
-
Web: http://pazguille.me
License
MIT license. Copyright © 2015 Mango.