Ezekiel is a front-end developer and designer based in north Texas. He is the author of SassyExport, Graphite, and Flint. You can find him on Twitter or catch some of his ramblings on his personal blog here.

Ezekiel's articles

  1. Rapid Responsive Development with Sass and Flint

    For any developer, speed is of the essence. We are constantly looking for more effiecient ways to do our jobs, and being programmers, we often create certain tools that help us do just that. One of the tools my team uses is a new grid system I developed called Flint.

    What is Flint?

    Flint is a responsive grid system written in Sass, created to allow developers to rapidly produce responsive layouts that are built on a sophisticated foundation. Being a designer myself, a large amount of time was spent on the syntax itself. Flint is very unique in the fact that it uses only a single mixin for all output: _( ). Yes, it really is just simply an underscore. Easy to remember, huh? It shoves the function mumbo-jumbo out of the way and allows us to focus on the aspect that matters most: the layout.

    Getting Started

    Getting up and running with Flint is simple: you can either configure your own grid, or use the default grid setup that ships with Flint. Being able to quickly configure a grid was at the forefront of my goals when developing Flint; and so it offers an immense configuration map, which is essentially a Sass map of all your project’s grid-settings and breakpoints. You don’t have to mess with endless variables just to get your project up and running. Instead, you just create a single variable called $flint:

    [code language="sass"]
    $flint: (
    "config": (

    "desktop": (
    "columns": 16,
    "breakpoint": 80em
    ),

    "laptop": (
    "columns": 12,
    "breakpoint": 60em
    ),

    "tablet": (
    "columns": 8,
    "breakpoint": 40em
    ),

    "mobile": (
    "columns": 4,
    "breakpoint": 20em
    ),

    // ...
    )
    );
    [/code]

    I’ve omitted the settings area of the configuration map for readability purposes, and because frankly that could be an article in itself. To learn more about that section, check out the Flint documentation on Github.

    One of the immediate advantages of using Flint is that it allows you to create an unlimited number of breakpoints for your project, with any alias that you want. If you like to call your breakpoints crazy names like ‘high-tide’ or ‘ex-presidents’, that’s completely fine with me.

    I went the route of allowing an unlimited amount of breakpoints after realizing that not every project is the same; they differ so drastically that using the same grid every single time limits both the designer and developer, and so the final product.