What is NeptuneGS ?
Nowadays, grid system is important for front-end web developers. Websites today mostly are built with grid system as their base skeleton. Grid system consists of 2 important elements such as row and column. Without those 2 elements, a grid system cannot be built (unless you use tables). NeptuneGS give you especially for front-end web developers an easy way to construct your website using 24-column grid system. This grid system is also made for beginners who want to learn about modern front-end web development.
Requirement
- 1. HTML
- 2. CSS - using multiple classes
Getting Started
In this part, I assume you have downloaded the the starter kit along with neptunegs.css file. Click on the HTML tab below and you will see the starter template.
See the Pen NeptuneGS Getting Started Template by Billy Halim (@billyhalim) on CodePen.
The Grid System
NeptuneGS's grid system provides 4 viewport built-in classes to specify the width of a cell in different viewport such as .sm-*, .md-*, .lg-*, .xl-*. The .sm-* class is used for screen size below 700px (smartphone). The .md-* class is used for screen size up to 700px and below 1000px (tablet). The .lg-* class is used for screen size up to 1000px and below 1300px (desktop). The .xl-* class is used for screen size up to 1300px (larger desktop). The * sign is used to specify the width of a cell at maximum of 24.
The 4 viewport built-in classes above must be used along with .cell class. The .cell class specify a column and this .cell must be used inside .range class. The .range class specify a row. A range might contain several cells with equal/non-equal width (depend on the 4 viewport built-in classes you use). NeptuneGS is a 24-column grid. So, the maximum sum of cells' width must be 24.
The formula for creating a cell is like <div class="sm-24 md-24 lg-12 xl-4 cell"> </div>. The .cell class is always placed behind the 4 viewport built-in classes that specify the width of a cell. If you don't specify the 4 viewport built-in classes and only specify the .cell class, the width will be 100% as default. The order of placement of the 4 built-in classes is the .sm- at first place and the .xl- at the last place. Run the example below :
See the Pen NeptuneGS Grid System Example by Billy Halim (@billyhalim) on CodePen.
The .range class has a width of 100% and a padding of 10px for content spacing. The .cell class has a width of 100% as default but if you add the 4 viewport built-in classes, the cell's width will depend on the width of the 4 viewport built-in classes. Also, the .cell class has a default padding of 10px (for content spacing) and margin-bottom of 10px (spacing between cells in smaller screen size).
Alignment
There are 3 alignment built-in classes in NeptuneGS. They are [sm, md, lg, xl]-left-*, [sm, md, lg, xl]-right-*, and .centered. The first one is used to position a cell with left spacing with the maximum * value of 24. The second one is used to position a cell with right spacing with the maximum * value of 24. Place the [sm, md, lg, xl]-left-* or [sm, md, lg, xl]-right-* class after a viewport built-in classes. The last one is only used to center a cell with the total sum of width is less than 24.
NOTE : The .centered class has a overflow:hidden property. If you use the .centered class in a parent cell you want to center and also specify a height to it, the content of its child cells might be clipped. So, make sure you set the height of the parent cell until all their child contents are clearly visible for all viewports.
See the Pen NeptuneGS Grid System Alignment by Billy Halim (@billyhalim) on CodePen.
SPACING BETWEEN CELLS
A cell doesn't has any spacing with another cells next to it. This is the behaviour of .cell class. Spacing between cells can be done by using the [sm, md, lg, xl]-left-* and [sm, md, lg, xl]-right-* alignment class. However, NeptuneGS provides a built-in class called .cell-sbc where sbc stands for spacing between cells. Same as .cell, .cell-sbc also use the 4 viewport built-in and alignment classes that I have mentioned above. Because .cell-sbc makes spacing between cells, it has a margin-left:0.8% default properties. Run the example below. Actually, spacing between cells is needed when each of your cell has a background. So, it doesn't looks nice when it is stacked with other cells.
See the Pen NeptuneGS Spacing Between Cells by Billy Halim (@billyhalim) on CodePen.
From the example, you will see some additional classes related to .cell-sbc such as [sm, md, lg]-no-sbc class and .[sm, md, lg, xl]-o class. Applying a .cell-sbc class, you make a spacing between cells but its behaviour will also be applied to all viewports. If you don't want that happen, the [sm, md, lg]-no-sbc class solve the problem. When you apply the [sm, md, lg]-no-sbc class, you change the the value of .cell-sbc margin-left value to 0 on the viewport you want. Beside that, the .[sm, md, lg, xl]-o class lets you optimize the cell where you don't want the margin-left sets to 0 on the viewport you want (because the [sm, md, lg]-no-sbc effect). See the example above once again in order to understand the concept.
NOTE : If you specify a class, for example, md-* but don't specify for the larger screen size, the behaviour of md-* will be applied to the larger screen size unless you specify for it using lg-* and xl-*.
OTHER USEFUL BUILT-IN CLASS
1. text-center : center a text. For centering an element, put the class on the parent.2. text-left : align left a text. For aligning left an element, put the class on the parent.3. text-right : align right a text. For aligning right an element, put the class on the parent.4. center : center a non-floated element directly without dealing with the parent.
5. image : make images responsive