This is Just Another Grid System, a CSS framework that will simplify the way you deal with multiple screen sizes, fluid layout, grids and columns on your sites and/or your applications.
This framework have a goal to be small and to not have any "design" thing in it. This code will help you layout your pages, but for designs for buttons, inputs, forms, cards and that things you will need another kind of code for that stuff.
This framework uses floats to get to the goal, and have a 12 column grid system. You can configure a row to have a floating to the left or to the right depending on the screen size of the browser.
The code have a 6 screens sizes variables that you can use to configure the layout of the page. With these screen sizes you can configure the number of columns a row have, when a set of elements is visible on screen, what float left or right is used on wich screen.
At the moment your only option is to download the GitHub repo and get the code inside the dist folder.
If you want a final version of the code only, you can use one of the CSS files available on the dist folder. One is the compressed version, and the other an uncompressed version.
If you want to change some of the screens sizes you will need to use the LESS version on the dist folder (the truth is that it is the source file itself). In this case you will need a LESS compiler and a Autoprefixer to generate a CSS file with prefix for older browsers. You can take a look on the Gruntfile that is used to compile this project to see how these can be configured.
With grunt is used:
grunt-contrib-less: to compile LESS code.
grunt-postcss: as a Post compile CSS engine. Alone this do nothing.
autoprefixer: as the prefixer for CSS, as a plugin to "postcss"
All these can be found on package.json file and downloaded from npm.
| Classes | Description |
|---|---|
| .clearAfter | This is a LESS mixin that has an :after pseudo-element that will clear both floating behaviors (left and right). |
| .noSelect | This class will set cursor of the element to the default cursor, also will prevent copy and paste on -webkit- engine. With this class aplied on an element, the content of the element is not selectable. |
| .container | This class has a responsive behavior, is intent to be used as a box for your content. Can be combined with .max# classes |
| .row | This class is the container for the columns of the grid. The columns will float, this class has the .clearAfter behavior, so will clear the floating on an :after pseudo-element. Can be combined with .#l and .#r to change the floating side. |
| .col | This class need to be added for each element inside a .row container, this class has the floating behavior. Columns itself doesn't have any width set on them, so you will need to use at least one of the size classes for a column with it. |
| .#h | This class is used to hide some element based on the screen size, using a max-width strategy on the media query. The "hidden" classes haven an !important annotation on them. |
| .#h-only | This class is used to hide some element based on the screen size, using a max-width and min-width strategy on the media query. So that only on one of the screens sizes, of the 6 screens sizes available, that element will be hidden. More than one of this class can be added, to target more than only one screen size. Also, that class can be used with the others hidden classes. The "hidden" classes haven an !important annotation on them. |
| .#hs | This class is used to hide some element based on the screen size, using a min-width strategy on the media query. The name is from hidden on small screens. The "hidden" classes haven an !important annotation on them. |
| .#1 ~ .#12 | These are the classes that will set the width of the column. Need to be used with the .col class. You can use the numbers 1 to 12 to set the size based on the 12 column grid system. So, if you write .#1 that will be a 1/12 column size. If you write .#6 that will be a 6/12 (50% of row) column size. And so on. |
The # symbol on the table above means one of the 6 screens sizes names. These names are:
| Name | Description |
|---|---|
| s | Small phones |
| ss | Big phones |
| m | Tablet (portrait) |
| mm | Tablet (landscape) |
| g | Desktop |
| gg | Big desktop |
Please access the webpage to see what can be done with this framework.