Grids Without Limits
Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use.
CSS Grids and Singularity
Layout on the web has changed significantly since Scott's first push back on March 7, 2012. First came Flexbox, then CSS Grid. CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.
With the release of Singularity 1.8, two new mixins,
css-grid-span. These two mixins are not included by default when importing Singularity, and will need to be included separately by doing
@import 'singularity/css-grid' after following the install instructions.
These Mixins Are Not Meant To Be Used As A Replacement For CSS Grid
The purpose of these mixins is to provide users with a way to transition off of Singularity and start using CSS Grid directly. CSS Grid is powerful, and doesn't need a framework like Singularity, and we encourage our users to start using it directly whenever possible instead of Singularity. This also means there will be no further updates to Singularity for the forseeable future. We love all of our users, and thank you for your support over the past 5 years. Singularity will continue to work as normal, but further development will stop.
Documentation for the CSS Grid mixins can be found below;
Getting Help with Singularity
- For help with Singularity, please ask a question on Stack Overflow tagged with
- To file an issue with Singularity, be it a feature request or a bug report, please use our Issue Queue.
Full documentation is available on the Singularity Wiki
If you are upgrading to Singularity 1.2.0 or greater, please read the Changelog for important changes made to Singularity!
- Singularity should be installed and compiled through Bundler if compiling with Ruby
- Alternatively, Singularity can be installed with Bower (
bower install singularity --save)
- It can even be installed as an Eyeglass module! (
npm install singularitygs --save-dev)
- Singularity requires a Sass compiler with full feature parity with the Ruby Sass 3.4.23 implementation in order to work
Setting Up a Basic Grid
Grids are made of 3 parts, the Grid definition defining columns, Gutter definition defining spacing between columns, Gutter Style defining how gutters are positioned relative to a column. Singularity supports Symmetric and Asymmetric grids, as well as fluid and fixed gutters. Setting grids up this way puts them into Singularity's Global Grid Context.
// Symmetric grid with fluid gutters, 1/2 gutter on each side of a column
// Asymmetric grid with fixed gutters, 1 full gutter after each column
You can visualize your grid with a CSS Gradient. To do so, turn on debug mode and include the
background-grid mixin. Be warned, CSS Gradients aren't 100% reliable visualizations, if there's a discrepancy between the visualization and the actual items on the grid, it's most likely the visualization that's wrong.
// Be sure to enable debug mode for your grid visualization so show up:.container
Spanning Your Grid
Singularity doesn't provide grid classes, instead it uses mixins to attach an item to your grid. The mixin takes your grid definitions and an output style and writes the CSS for the given combination. The main mixin for this is the
grid-span mixin which will work with any output style. Most output styles provide output-specific spans to make working with that specific output style easier.
grid-span mixin takes two required arguments, how many columns you would like to span, and from what column you would like to start from. The column you would like to start from is the first column spanned.
Singularity provides a couple of different ways to have
grid-span use a different set of grid definitions at different breakpoints. The first is Singularity's Responsive Grid Context, which relies upon Breakpoint (a super powerful and flexible media query system, we recommend using it). This will allow you to use Breakpoint media queries as normal and when
grid-span is called, it will know what set of grid definitions to use (although it won't automatically change existing
grid-span calls to put them on a new grid, that's up to you). It does this by allowing for multiple grid definitions in the Global Grid Context.
To use, simply call
add-grid multiple times, each time telling it when you would like to change. Be Aware this will only work with
min-width media queries! Sass and Singularity cannot know runtime conditions and provide wiggle room between media queries with anything other than simple
min-width queries. While a full Breakpoint style media query can be used in these definitions, Singularity will only look for the
Responsive grid contexts do not output anything by themsleves. Singularity's Responsive Grids feature allows you to change the context of a called
grid-span. In order for you to see the context change, you still need to call
grid-span to apply your grid.
// Singularity 1.2 Syntax
The second way to provide responsive grids is with either of the use of the Context Override mixins. Singularity provides two,
layout which will override context Global Grid Context for any content nested underneath it, and
layout-at, which will do the same but allows you to define and use a media query at the same time.
layout-at will accept any Breakpoint media query definition. Both of these options provide more fine-grain control over your Global Grid Context overrides as compared to the Responsive Grid Context, if you need that.
Singularity 1.8 introduces the following optional mixins to use current grid definitions to provide CSS Grid layouts for browsers that support it, and fall back to Singularity layouts for browsers that do not.
;;; // Optional module, needs to be imported separately.container.item.item-2
Contributing to Singularity
We love contributors! Yes we do! If you would like to contribute to Singularity, please follow the Contributing Guidelines
Having been designed to be extensible, the ability to create plugins for Singularity is great and we expect to see great things. From new Output Span syntaxes to new Output Styles to new Grid Generators, we are excited to see what the community will come up with. Below are a list of Singularity Plugins available. If you would like to add your Plugin to the list, please issue a Pull Request to add it to the list!
Dual license MIT/GPL-3.0