Exampler for initial.css

Initial.css is a simple library for building an html page, including a simple reset of some styles, classes for basic template construction and a grid system. 

                  
                    <!DOCTYPE html>
                    <html lang="en">
                      <head>
                        <title>initial.css</title>
                        <link rel="stylesheet" href="dist/initial.min.css">
                      </head>
                      <body>
                        <div id="wrapper">
                          <header> ... </header>
                          <main>
                            <section>
                              ...
                            </section>
                            <section>
                              ...
                            </section>
                          </main>
                          <footer> ... </footer>
                        </div>
                      </body>
                    </html>

This library includes a set of classes for page styling. On the left, you can see an example of the page structure. The "wrapper" id wraps the page content, inside it the "header" tag will be at the top, the "footer" tag at the bottom, and the "main" tag will stretch between them.


Of the main classes, there is still a "container", it allows you to limit the width of the container (<576px-width 100%, ≥ 576px-540px, ≥ 768px-720px, ≥ 992px-960px, ≥ 1200px-1140px, ≥ 1400px-1320px)

This is container
There is no container here
Grid
Flexbox grid to build layouts.
The main grid consists of 24 columns.
There are also additional grids: 5-column(*-5th-*), 7-column(*-7th-*), 9-column(*-9th-*), and 10-column(*-10th-*).
After the "row" tag, there must be a column, even if it is one and covers the entire width of the row.

Extra small Small Medium Large Extra large Extra extra large
<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
xs-* sm-* md-* lg-* xl-* xxl-*

General example


xs-24
xs-12
xs-12
xs-8
xs-8
xs-8
xs-6
xs-6
xs-6
xs-6
xs-5th-1
xs-5th-1
xs-5th-1
xs-5th-1
xs-5th-1
xs-4
xs-4
xs-4
xs-4
xs-4
xs-4
xs-7th-1
xs-7th-1
xs-7th-1
xs-7th-1
xs-7th-1
xs-7th-1
xs-7th-1
xs-3
xs-3
xs-3
xs-3
xs-3
xs-3
xs-3
xs-3
xs-9th-1
xs-9th-1
xs-9th-1
xs-9th-1
xs-9th-1
xs-9th-1
xs-9th-1
xs-9th-1
xs-9th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-10th-1
xs-2
xs-2
xs-2
xs-2
xs-2
xs-2
xs-2
xs-2
xs-2
xs-2
xs-2
xs-2
xs-1
xs-2
xs-3
xs-1
xs-2
xs-4
xs-1
xs-1
xs-1
xs-6
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1
xs-1

Example with responsiveness


xs-24 xl-8
xs-24 xl-8
xs-24 xl-8
xs-24 md-12 lg-6
xs-24 md-12 lg-6
xs-24 md-12 lg-6
xs-24 md-12 lg-6
xs-5th-5 lg-5th-2 xl-5th-1
xs-5th-5 lg-5th-3 xl-5th-1
xs-5th-5 lg-5th-5 xl-5th-1
xs-5th-5 lg-5th-3 xl-5th-1
xs-5th-5 lg-5th-2 xl-5th-1