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:
- It doesn't add any additional markup.
- It isn't limited to a specific column size (e.g. 12-column grid).
- 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 and works 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:
Continue reading %Super-fast Responsive Layouts with Jeet%
by George Martsoukos via SitePoint
No comments:
Post a Comment