squid.css is a configurable, vw-based square grid system written in Sass. Conventional grid systems are one dimensional, that is, they typically only define sizes along one axis. squid is two dimensional, meaning it allows you to define both the width and height of a "column".
squid.css does this by using vw for width and height. This enables responsive proportional rectangles.
- Uses
vwfor responsive proportionality - Built with Flexbox
- Highly configurable through Sass variables
- Mobile first
- 2.3KB (minified+gzip)
squid requires support for vw and display: flex.
This means no UC Browser for Android and no Opera Mini, since they don't support vw.
Clone from GitHub
$ git clone [email protected]:madsfaerch/squid-css.gitUse squid.css for development and squid.min.css for production
NPM
$ npm install --save squid-cssThen add squid-css to your workflow.
I highly recommend you configure squid.css to suit your needs. Check out the configuration chapter to see what's available to you.
Note: Since squid uses vw, and not percentages, putting grid-items in a container with a width or max-width will not stop the elements from growing, since their width is not based on the parent. Instead, use the variable $squid-max-width to set a maximum width on the grid.
squid uses two types of containers:
.container
For larger sections. This keeps your content centered if you use squid with a maxmimum width.
.row
For rows of content. Use the modifier class .row--vertical for vertical rows.
To specify a rectangle's dimensions use w-<size-value> for width and h-<size-value> for height.
For example, add the classes w-1 and h-1 for a 1 by 1 square. By default squid uses 12-column system, so w-1 and h-1 will equate to a width and height of 8.333vw (100vw/12 * 1).
<div class="row">
<div class="grid-item w-1 h-1">
I'm a perfect square!
</div>
</div>Make rectangles with other proportions simply by changing the width or height class:
<div class="row">
<div class="grid-item w-2 h-1">
I'm a 2 by 1 rectangle!
</div>
</div>Adding multiple items is just like any other grid:
<div class="row">
<div class="grid-item w-1 h-1">
I'm a perfect square!
</div>
<div class="grid-item w-2 h-1">
I'm a 2 by 1 rectangle!
</div>
</div>squid offsets content by using classes that add margin to the element.
By default, these classes are named t-<offset-value>, r-<offset-value>, b-<offset-value> and l-<offset-value> corresponding to margin-top, margin-right, margin-bottom and margin-left respectively.
For a 2 by 2 square that is left offset by 2:
<div class="row">
<div class="grid-item w-2 h-2 l-2">
I'm offset by 2!
</div>
</div>With squid you can add (and name) as many breakpoints as you would like.
By default, squid ships with 3: sm , md and lg.
For a offset-by-1 10x4 rectangle that is offset-by-2 and 8x6 after the medium breakpoint:
<div class="row">
<div class="grid-item w-10 h-4 l-1 w-8-md h-4-md l-2-md">
I change sizes!
</div>
</div>The offset classes include the 0 value for completely removing offsets at specific breakpoints. E.g. class="l-2 l-0-md" will remove the left offset after the medium breakpoint.
To show and hide elements at specific breakpoints you can utilise show-<breakpoint> and hide-<breakpoint>.
The show-classes will hide an element before the specified breakpoint.
The hide-classes will hide an element after the specified breakpoint.
<div class="row">
<div class="grid-item w-12 h-1 show-lg">
I'm visible after the large breakpoint!
</div>
<div class="grid-item w-12 h-1 hide-lg">
I'm visible before the large breakpoint!
</div>
<div class="grid-item w-12 h-1 show-sm hide-md">
I'm visible between the small and medium breakpoint!
</div>
</div>By default, squid ships with a set helpers that helps you layout quickly. They mostly change margins Flexbox values. There are reasons not to include the helpers. Maybe you have your own or prefer to use less classes and write more CSS.
To disable: $compile-helpers: false
| Class name | Function |
|---|---|
| .flex | display: flex |
| .align-start | margin-right: auto |
| .align-end | margin-left: auto |
| .center-self | margin-left: auto margin-right: auto |
| .align-top | align-self: flex-start |
| .align-center | align-self: center |
| .align-bottom | align-self: flex-end |
| .align-items-end | align-items: flex-end |
| .align-items-center | align-items: center |
| .justify-content-between | justify-content: space-between |
| .justify-content-end | justify-content: flex-end |
| .justify-content-center | justify-content: center |
| .flex-wrap | flex-wrap: wrap |
Customizing squid requires a Sass compiler.
To configure squid, create a .scss/.sass file and populate it with the variables from this section.
Import it before your '@import "squid-css" statement.
All squid classes will be prefixed with this string, making it ideal for namespacing.
$prefix: ''
Specify 'none' for a completely fluid layout. Enter 90em, 1440px, 21cm etc., it's all good to squid.
$squid-max-width: 90em
Amount of columns in the grid.
$columns: 12
Specify the desired name for the width and height of squid's classes.
'w' for "w-3-small"
'col' for "col-3-small"
$dimension-prefixes: (width: 'w', height: 'h')
By default squid will generate offset classes in all directions.
Removing a key/value pair in the following map will stop squid from generating it. Change the values to change the generated class name
'left' for "left--2--large"
'l' for "l--2--large"
'push' for "push--2--large"
$offset-prefixes: (top: 't', right: 'r', bottom: 'b', left: 'l')
Specify your desired breakpoints. Add as many as required. Names of keys will be used in generation of squid classes.
'lg' for "width--3--lg"
'desktop' for "width--3--desktop"
$breakpoints: ( sm: 30em, md: 45em, lg: 64em)
Specify the wanted delimiter.
'-' for "width-3-medium"
'--' for "width--3--medium"
'_' for "width_3_medium"
$size-delimiter: '-'
By default the size delimiter and the breakpoint delimiter are identical. Override that, by providing a specific string for the breakpoint delimiter.
"width_3_medium" -> "width_3--medium"
$breakpoint-delimiter: $size-delimiter
Compile grid helper classes
$compile-helpers: true
MIT