HTML & CSS
Article

Super-fast Responsive Layouts with Jeet

By George Martsoukos

There are plenty of grid systems available to us today. Designers and front-end developers can experiment with them and choose the ones that best fit their needs. CSS frameworks and boilerplates such as Bootstrap, Foundation, and Skeleton offer grids used by thousands of people.

In this article, I’d like to introduce you to Jeet, an alternative grid system built on CSS preprocessors. Firstly, I’ll cover the basics of it, presenting its core mixins. Then, I’ll show you how to build a project by taking advantage of its features.

What is Jeet

Jeet is a grid system built on top of Sass and Stylus. It consists of powerful mixins and functions you can use to create fast responsive layouts.

Unlike many other grids, Jeet provides a more flexible approach for producing layouts. Here are its main advantages:

  1. It doesn’t add any additional markup.
  2. It isn’t limited to a specific column size (e.g. 12-column grid).
  3. You can use fractions (e.g. 1/4), decimals (e.g. 0.75), or even a combination of them (e.g. 1.5/4) for generating the desired layout.

The grid is designed to work in all major browsers including IE9+. If you want to target previous versions of IE, take a look at the Boy boilerplate.

Getting Started

The grid comes in two flavors, one for Sass(SCSS) and another for Stylus. Depending on the preprocessor you want to use, there’s a different installation method. Jeet’s official page describes all the steps you should follow in order to include the grid in your projects.

Based on the Sass version of it, I set up a demo project. I’ll refer to it in an upcoming section. For now, let’s just look at its basic structure:

jeet-demo/
├── index.html
├── jeet/
│     ├── _functions.scss
│     ├── _grid.scss
│     ├── _settings.scss
│     └── index.scss
├── style.css
└── style.scss

You can grab all the files for this project by visiting this github repository.

At this point it’s time to go through Jeet’s major mixins.

Note: To demonstrate how the mixins work, I’ll use the SCSS syntax.

Container

The center mixin allows you to horizontally center an element. Most of the time, you’ll use this mixin to define the element that will act as the container of your columns. The table below shows its parameters:

Parameter Description Default Value
max-width Set the element’s max-width 1410px
pad Specify the padding-left and padding-right properties of the element 0

Here’s an example of that mixin:

See the Pen Jeet Grid – container by SitePoint (@SitePoint) on CodePen.

To restore the rules applied by the center mixin, use the uncenter mixin.

Columns with Gutters

To define your columns, Jeet provides the col or column mixin. The following table describes its parameters:

Parameter Description Default Value
ratios Set the element’s width relative to its container’s width 1
offset Specify the margin-left property of the element 0
cycle Define a nth (based on the cycle value) column grid 0
uncycle Undo the grid specified by the cycle variable 0
gutter Specify the margin-right property of the element 3

The cycle and uncycle variables simplify the process of creating multi-column responsive layouts. Here’s an example:

See the Pen Jeet Grid – columns with gutters by SitePoint (@SitePoint) on CodePen.

Columns without Gutters

In addition to the col/column mixin, there’s also available the span mixin for creating your columns. You can use this one in case you don’t want gutters between them. Here are its parameters:

Parameter Description Default Value
ratios Set the element’s width relative to its container’s width 1
offset Specify the margin-left property of the element 0
cycle Define a nth (based on the cycle value) column grid 0
uncycle Undo the grid specified by the cycle variable 0

Below is an example of that mixin:

See the Pen Jeet Grid – Columns without Gutters by SitePoint (@SitePoint) on CodePen.

Stacked Columns

The stack mixin helps you generate stacked columns. This is a handy feature, especially on small screen sizes, where the layout changes and the elements stack on top of each other. Here are its parameters:

Parameter Description Default Value
pad Specify the padding-left and padding-right properties of the element 0
align Set (if value=true) the element’s text-align property false

An example that takes advantage of that behavior is shown below:

See the Pen Jeet Grid – Stacked Columns by SitePoint (@SitePoint) on CodePen.

To restore the rules applied by the stack mixin, use the unstack one.

Column Ordering

Jeet provides the shift mixin for column ordering. The following table shows its parameters:

Parameter Description Default Value
ratios Specify how far the element will be moved compared to its original position 0
col-or-span Specify whether the element has a gutter or not column
gutter Specify the margin-right property of the element 3

You can get an idea of how this mixin works in the following example:

See the Pen Jeet Grid – Column Ordering by SitePoint (@SitePoint) on CodePen.

To restore the rules applied by the shift mixin, use the unshift one.

Absolute Centering

Using the align mixin you can center an element horizontally or/and vertically. In order to take advantage of it, you should also set the type of positioning of the parent element as relative.

The parameter of that mixin is shown below:

Parameter Description Default Value
direction Define the element’s type of alignment both

Here’s an example:

See the Pen Jeet Grid – Absolute Centering by SitePoint (@SitePoint) on CodePen.

Putting it All Together

Let’s now use Jeet to create the layout of our demo project.

First, we’ll structure the section related to our portfolio.

For small devices (<450px), we want the work items to be stacked. By default, that happens because in the markup we use the figure element, which is a block-level element. Moreover, when the browser window has a width between 450px and 799px, we want two items per row. Finally, for larger screens (≥800px) each row should contain four items.

Here’s our layout based on the last assumption:

Jeet Grid Example 1

Below is a snippet for the relevant HTML:

<div class="portfolio">
    <figure>
        <img src="http://placehold.it/450/ededed/ededed">
        <a href="#">
            <figcaption>Work-1</figcaption>
        </a>
    </figure>
    ...
</div>

Here’s our SCSS code:

@media screen and (min-width: 450px) {
    figure {
        @include col(1/2, $cycle: 2);
    }
}

@media screen and (min-width: 800px) {
    figure {
        @include col(1/4, $cycle: 4, $uncycle: 2);
    }
}

And the compiled CSS:

@media screen and (min-width: 450px) {
    figure {
        float: left;
        width: 48.5%;
        margin-left: 0%;
        margin-right: 3%;
    }

    figure:nth-of-type(2n) {
        float: right;
        margin-right: 0%;
    }
}

@media screen and (min-width: 800px) {
    figure {
        float: left;
        width: 22.75%;
        margin-left: 0%;
        margin-right: 3%;
    }

    figure:nth-of-type(2n) {
        float: left;
        margin-right: 3%;
    }

    figure:nth-of-type(4n) {
        float: right;
        margin-right: 0%;
    }
}

Note: For simplicity, I’ve only included some of the rules from the compiled CSS. To see the complete CSS that Jeet outputs, look at the style.css file.

Let’s work on a second example.

Here we will structure the social links. Each link will occupy one-fourth of their container width. To start, we define the width of their parent element using the center mixin. Then, we set their width taking advantage of the col mixin.

Here’s the desired layout:

Jeet Grid Example 2

Our markup:

<div>
    <a href="#">Twitter</a>
    ...
</div>

The required SCSS:

div {
    @include center(700px);

    a {
        @include col(1/4);
    }
}

And the resulting CSS:

div {
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}

div a {
    float: left;
    width: 22.75%;
    margin-left: 0%;
    margin-right: 3%;
}

div a:last-child {
    margin-right: 0%;
}

Note: Again for simplicity, I’ve included just some of the rules from the compiled CSS. To see the complete CSS that Jeet outputs, look at the style.css file.

Conclusion

In this article, I presented Jeet, an alternative grid that helps you create easy and flexible responsive layouts. Then, I went through examples that demonstrated how to use its mixins. I hope you found the tour and this grid system interesting and you might give it a try in any of your upcoming projects.

If you’ve already used Jeet, let us know in the comments below.

Comments
RyanReese

Could you explain this more? I don't quite understand it.

The only time I see frameworks make yo uadd HTML is if you are implementing the grid. However, since most frameworks are based on floats, it's customary to add the parent just to contain the floated elements.

I'm not sure what other examples you give that show it doesn't add additional markup (compared to other frameworks?)

Could you be more specific? I couldn't quite pinpoint an example showcasing this main benefit.

Other than that, I mean it's somewhat useful to have the custom sizes for the column size, but that's not exactly original; at my work we've modified the foundation CSS file to include some more specific sizes (only halves though) to help be more precise with our design.

I'm not trying to be rude or anything; I just want to hear what makes this worth using smile . What stops, for example, my team from just using a framework and modifying it like we did (apposed to Jeet?) I'm sure we were not the first people to modify frameworks.

sturobson

Without jumping on Georges toes. I see Jeet not adding 'any additional markup' in light of something like Bootstrap or Zurb (both extremely popular frameworks (both of which George mentions at the top of the article)) and Harry Roberts' CSS Wizardry Grids that force you to include the grid within the markup. With the idea being you then put the actual HTML you're wanting to use within it.

I haven't, personally, seen many grid systems that allow you to use fractions as well as decimals (and a combination of both) which, I feel, makes Jeet stand out a little more.

Obviously there's nothing stopping you or your team from doing what you feel necessary for your work be it modify someone elses work to suit or deciding to write something from scratch.

It'd be great if you could share your solution so everyone can benefit. I love looking and learning from how other people use Sass in their projects.

RyanReese

I'm still confused though what grid markup he's forcing you to use though. I mean if you were going to use a two column layout, grid framework or no grid framework, you're going to want (e.g. two columns float) you'll want a parent and then two children elements.

Foundation and Bootstrap all "force" that on you but you'd do that same approach anyway! That's what I don't understand.

And no you are correct most don't allow fractions, and while it's amazing jeet offers this (since it's annoying that 12 columns must be spread over 100%) it's not exactly something I'd switch over to for in exchange of all the functionality of Foundation or Bootstrap.

What solution are you talking about?

sturobson

...

...

Thank you.

RyanReese

What HTML could you possibly want though that frameworks force you to avoid? That's what I don't get. A two column floated layout will make you (if you know what you are doing) have a parent and then two floated elements side by side. A framework encourages that idea with their structured approach.

I'm still waiting on an example that shows where this isn't feasible with frameworks.

Again, not trying to be rude but I just don't see what frameworks are restricting here. Give me an example.

RyanReese

Also, using grid layout basically only sets the width and floats - leaving design and everything else up to you.

I might very well be having a brain fart and there is an obvious restriction that I'm not thinking of! Not saying I'm right here at all; genuine curiosity here. Wasn't aware of any HTML restriction with frameworks.

sturobson

If you're adding 'content' directly into a div that has some utility classes for a grid system, like Bootstrap or Foundation. You're tying that content to that grid.

The idea is to abstract the grid from the content, a separation of concerns, so that it'd make it more portable if needed. Jeet get's rid of the need for the grid div elements as it's in the CSS (Sass) which I'd suggest is a lot easier to edit than picking through various divs with grid classes added to it for responsive web design.

Obviously there are two trains of thought here in regards to using a grid system within your markup or within your CSS. I, personally, prefer to add it to the CSS, like Jeet does.

sturobson

I'm happy with conflicting views, if your 'brainfart' comes to something perhaps pitch an article to SitePoint? smile

RyanReese

Ah ok I understand what you are trying to say now. I understand that.

I think the article does a poor job of explaining this (actually I don't think they explain that at all) so thanks for the help on that.

I do understand the usefulness (albeit I'm not sure how OFTEN this would come up? I've managed everything so far without the need for this but I can imagine situations which this would have been useful) that Jeet is offering here. Thanks!

I wasn't trying to insinuate I had conflicting views. Merely stating that I failed to see the authors point (again, because no explanation was given so I was left to imagination.) I actually do see your point and agree there are cases where this is useful.

RyanReese

I pitched an article to them (just an idea; I didn't say I'd write it) over 3 weeks ago, even sent Sitepoint a message on FB, and the survey that Sitepoint gave out, I EVEN sent it in there (with also a request to check their e-mail)) but STILL no one has responded. I'm a bit offended/shocked that no one appears to be checking their e-mail; or at the very least I didn't get a response.

It wasn't a ground breaking article anyway; just something that I saw the internet lacked on.

Mittineague

Off-Topic
Assuming you did
http://www.sitepoint.com/writing-guidelines/
@Ophelie should be able to help

davidDuymelinck

Jeet is more like susy or neat than a framework.
It is a mixin library that makes it easier to create the grid you want.

If you need a simple grid bootstrap and foundation are fine, and if you want more control you use a mixin library like jeet.

georgemarts

Hi Ryan,

Thanks for taking the time to read the article. The advantage of Jeet is its flexibility. Frameworks such as Bootstrap and Foundation require extra markup (div) that can be difficult to maintain. Of course, you can make your code more efficient if you customize them. On the other hand, Jeet doesn't need any additional div or customization. All you have to do is to define a class name and then apply the mixins you want to it. So, the complexity is in CSS which is handled by mixins.

Ophelie

Hey Ryan — which address did you send your pitch to? I haven't gone through all survey results yet (there are a lot), but if you're still interested, you can pitch an article directly to me via PM here, or to @Adam, or to one of the SitePoint editors (like @sturobson or @louislazaris).

RyanReese

Thanks, Stuart got in touch directly. And it turns out that it was 11/17/14 that I originally sent the e-mail so it's beyond 2 months; not 3 weeks like I thought stuck_out_tongue .

I had e-mailed an undisclosed e-mail (don't want to say who I sent it to publicly) but I only pitched an idea; didn't want to actually write it myself. Those who have read my own website articles probably are frustrated at my writing smile .

Back to the topic at hand...

@georgemarts, I am able now to see what flexibility this offers. It saves some of the ground work that you'd have to otherwise do. I can appreciate how this will be useful. Thanks for the great article (although I'm holding true that I think it should have been explained better; but I'm just a disgruntled person since I didn't get it right away; that's my own fault)

Keep up the good work.

@Ophelie Stuart (in this thread) messaged me and I talked to him. If you really want to know who I sent it to, then you can follow up with him. I don't want the person to get in any trouble.

NetanelBasal

I prefer use susy, i think susy has more to offer and susy has the direction rtl or ltr feature.

djeglin

Agreed. This doesn't really seem like anything new to me. I wrote a "grid on demand" like this some time ago called Ignition and popped it on GitHub, although I don't manage to do much development in anger any more to actually use it. Susy is great, too.

However, having more people work on tools like this is generally a good thing - It gives developers more choice, and can lead to better ways being found to deal with the obstacles we face every day.

c_b

This compatible with LibSass or only the Sass gem?

georgemarts

I haven't yet tried it, but it seems that Jeet is also compatible with LibSass according to this.

mattradford

Great article - thanks for explaining Jeet. The use of fractions could help solve a few design problems.There's a misconception about Bootstrap mixins though.

Bootstrap comes with mixins such as .make-row(); and .make-sm-column(6);, as well as .make-sm-column(6,0); to remove padding from column declarations. Declare those at the correct breakpoints and you don't need to declare col-sm-6 in your HTML.

georgemarts

Thanks for sharing that tip smile !

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.