Sitetransform.css docs

Getting Started

First you have to download Sitetransform.css

Clone it from github.

git clone https://github.com/sitetransform/sitetransform.github.io

Or use it online.

<link rel="stylesheet" href="https://sitetransform.github.io/sitetransform.css/dist/sitetransform.min.css">

Typograpy

CSS3 brought us a few new units, which includes the rem, which stands for root em, unit. 1rem is equal to the font size of the root element, html. In Sitetransform.css, the font size is set to 62.5% for making calculations easier, which is 1.6rem or 16px. The line height is set to 1.6 or 24px. We use the font family Roboto, created by Christian Robertson, is provided by Google and is free to use.

Blockquotes

A blockquote represents a section that is quoted from another source.

Sitetransform.css is awesome!

John Doe

                
        <blockquote>
        <p>Sitetransform.css is awesome!</p>
        <small>John Doe</small>
        </blockquote>
                
            

Buttons

The Button is an essential part of user experience. We have 3 types of buttons, .transbtn, .transbtn-outline and .transbtn-clear..transbtn gives us a flat button, .transbtn-outline gives us a button with only an outline and .transbtn-clear is clear.

                
        <button>Default button</button>
        <button class="transbtn-outline">Outline button</button>
        <button class="transbtn-clear">Clear button</button>
                
            

Lists

The List is a common way to display multiple items. In Sitetransform.css, ul is displayed with outlined circles, ol with numbers and dl with only spacings.

• 1
• 2
• 3

1. 1
2. 2
3. 3

1

Description for 1

2

Description for 2

3

Description for 3

                
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<dl>
    <dt>1</dt>
        <dd>Description for 1</dd>
    <dt>2</dt>
        <dd>Description for 2</dd>
    <dt>3</dt>
        <dd>Description for 3</dd>
</dl>
                
            

Forms

Creating forms is a headache for many people, with layout being terrible and on a mobile device, parts of the form overflowing the screen together with the on-screen keyboard blocking elements. Sitetransform.css helps by focusing on user experience.

                    
        <form>
        <label for="username">Username</label>
        <input type="text" placeholder="Username" id="username">
        <label for="password">Password</label>
        <input type="password" placeholder="Password" id="username">
        <div class="float-right">
            <input type="checkbox" id="remember">
            <label class="label-inline" for="remember">Remember me</label>
        </div>
        <button type="submit">Submit</button>
        </form>
                    
                

Tables

A table is a tidy and neat way to display multi-dimensional data. In Sitetransform.css, we have a light bottom border between rows to seperate them.

                
        <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Age</td>
                <td>ID</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td>001</td>
            </tr>
            <tr>
                <td>Jane Doe</td>
                <td>25</td>
                <td>002</td>
            </tr>
            <tr>
                <td>Mary Doe</td>
                <td>25</td>
                <td>003</td>
            </tr>
        </tbody>
        </table>
                
            

Grids

A Grid is a fluid system which has a max-width of 112rem or 1120px, that shinks with smaller viewports. It can be overwritten with just one line of CSS. Unlike most frameworks, we use FlexBox to display grids.

                
        <div class="row">
        <div class="column">.column</div>
        <div class="column">.column</div>
        <div class="column">.column</div>
        <div class="column">.column</div>
        </div>
        
        <div class="row">
        <div class="column">.column</div>
        <div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
        </div>
                
            

Code

The code element represents a fragment of computer code. Wrap code in a code element to make it appear like this. If you need a block use a pre and then the code. If you are displaying HTML, convert the < and > to &lt; and &gt;.

        .demo {
        background-color: blue;
        color: white;
        }
            

Actual code:

                
        <code>/* Demo */</code>
                
            

                
        <pre>
        <code>
        .demo {
        background-color: blue;
        color: white;
        }
        </code>
        </pre>
                
            

Utilities

We have some utility classes to improve productivity.

                
        <!-- Clear all floats -->
        <div class="clearfix">
        <!-- Float either directions -->
        <div class="float-left"></div>
        <div class="float-right"></div>
                  
        </div>