Flint is a responsive grid framework written in Sass, created to allow developers to rapidly produce responsive layouts that are built on a sophisticated foundation.
Most notably? The syntax. Being a designer myself, a large amount of time was spent on this aspect. Flint is very unique in the fact that it uses only a single mixin for all output: _(...).
Yes, it really is just an underscore. Easy to remember, huh? It shoves the function mumbo-jumbo out of the way and allows you to focus on the aspect that matters most: the actual layout. It also allows you to type your intentions in human terms.
@include _(from tablet to desktop) { ... }
@include _(16 12 8 4, $gutter: no-left);In addition to that, as you can tell from the snippet above, Flint also handles your breakpoints for you. Long gone are the days that you need to download a separate plugin just so that you're able to create a truly responsive layout.
Flint allows you create an unlimited number of breakpoints, all of which have their own alias, column count and breakpoint. Want to name your 10 breakpoints after James Bond villians? By all means, go ahead.
One more cool thing? Flint is the only self-aware Sass grid system on the planet.* What does that mean? It means that every instance of Flint is logged into an 'instance map', so child elements can know their parent element's width; meaning we can have perfectly consistent gutters, no matter how odd your layout may be. Think of it as a self-correcting grid.
Check out this short introduction over at Sitepoint.com, and take it for a spin on SassMeister.com!
Enjoy.
- Sass ~>
3.4.0
- Install via Ruby
gem install flint-gs, or Bowerbower install flint --save-dev - If you're using Compass, add
require "flint"to yourconfig.rb - Import it into your stylesheet with
@import "flint"
If you're not using Compass, you can require Flint and compile via cli:
scss --require ./lib/flint.rb example.scss > example.css
Documentation is located here.
Tip: For simple projects, disable instance-maps, as it is has a large overhead and will increase your compile times.
As of 1.6.0, you can add syntax support for your preferred syntax. I built the system for BEM, but it should be easily extendable to
support your preferred syntax. Simply create a function which parses a string of selectors into a valid list. For example, the BEM syntax
function parses the selector string (for example, .block__element__element) like so,
///
/// Parser to support BEM syntax
///
/// @access private
///
/// @param {List} $selectors - string of selectors to parse
///
/// @return {List} - parsed list of selectors according to syntax
///
/// @group Internal Functions
///
@function flint-support-syntax-bem($selectors) { ... }This will be parsed into a list of selectors: .block, .block__element, .block__element__element. The list of selectors can then be used by the
instance system to look up a selectors parent, etc. To support your own preferred syntax: create a flint-support-syntax-<syntax-name> function
and hook into it through the config "support-syntax": "<syntax-name>" option -- the system will attempt to use the call() function in
order to parse the selector string.
If you use one that isn't here, let me know and I'll look into officially supporting it.
You can tweet @FlintGrid with any questions or issues and I'll look into it. Be sure to include a Gist or a SassMeister link.
As an open-source project, contributions are more than welcome, they're extremely helpful and actively encouraged. If you see any room for improvement, open an issue or submit a pull request. Also, make sure to take a look at the contributing doc.
Flint is available under the MIT license.
* According to Wikipedia, not really. But, all jokes aside, it's pretty awesome.