038

The modern, simple & responsive
lightweight CSS pattern | Actually v1.1

download

Rush with 038!

If Skeleton is quite the thing, but you are looking for something more... Get the 038!

038 is the CSS pattern based on Skeleton boilerplate syntax model. 038 have got no problems with grid offset, it helps with buttons group, navbars, icons, colors and so on without JS. And last but not least 038 still supports IE9.


//Just use these links to quick run 038:
<link rel="stylesheet" href="http://038.mobitoon.ru/css/normalize.css">
<link rel="stylesheet" href="http://038.mobitoon.ru/css/1.1/038.min.css">
                                


Media queries support

Desktop HD:
1200px
Desktop:
1000px
Tablet:
750px
Phablet:
550px
Mobile:
400px

Grid

12-column fluid grid with a max width of 960px for browser/device at smaller sizes.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
Twelve
2/3
1/2
1/2
Two
Six

<div class="container">
    <div class="row">
        <div class="one column">One</div>
        <div class="eleven columns">Eleven</div>
    </div>
    <div class="row">
        <div class="two columns">Two</div>
        <div class="ten columns">Ten</div>
    </div>
    <div class="row">
        <div class="one-third column">1/3</div>
        <div class="two-thirds column">2/3</div>
    </div>
    <div class="row">
        <div class="one-half column">1/2</div>
        <div class="one-half column">1/2</div>
    </div>
</div>
                            

<div class="container">
    <div class="row">
        <div class="one offset-by-one column">One</div>
        <div class="ten columns">Ten</div>
    </div>
</div>
                            

Typography

Base type

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

The typography base is Ubuntu served by Google, set at 15rem (15px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.


<p>
    The base type is 15px over 1.6 line height (24px)
</p>

<strong>Bolded</strong>
<em>Italicized</em>
<a>Colored</a>
<u>Underlined</u>
                            

Standard headings

Heading Heading Heading Heading Heading Heading


<h1>Heading</h1>    <!-- 50px / 5rem -->
<h2>Heading</h2>    <!-- 42px / 4.2rem -->
<h3>Heading</h3>    <!-- 36px / 3.6rem -->
<h4>Heading</h4>    <!-- 30px / 3rem -->
<h5>Heading</h5>    <!-- 24px / 2.4rem -->
<h6>Heading</h6>    <!-- 15px / 1.5rem -->
                            

Buttons

Standard buttons

Anchor button

Primary buttons

Anchor button

Primary color buttons

Anchor button

<!-- Standard buttons -->
<button>Button element</button>
<a class="button" href="#">Anchor button</a>
<input value="submit input" type="submit">
<input value="button input" type="button">

<!-- Primary buttons -->
<button class="button-primary">Button element</button>
<a class="button button-primary" href="#">Anchor button</a>
<input class="button-primary" value="submit input" type="submit">
<input class="button-primary" value="button input" type="button">

<!-- Primary color buttons -->
<button class="button-success">Button element</button>
<a class="button button-info" href="#">Anchor button</a>
<input class="button-warning" value="submit input" type="submit">
<input class="button-danger" value="button input" type="button">
                            

Icon, standard, primary color & color icon buttons

The iconography base is Material icons served by Google. Use more at Google API to put it to a code.

Only "a" and "button" tags supports icon button styles!

Icon buttons


Standard icon buttons
Anchor button

Standard color icon buttons
Anchor button

Primary icon buttons
Anchor button

<!-- Standard icon buttons -->
<button class="icons"><i class="material-icons">add_shopping_cart</i></button>
<a class="button icons" href="#"><i class="material-icons">remove_shopping_cart</i></a>

<!-- Standard icon buttons -->
<button><i class="material-icons">done_all</i>Button element</button>
<a class="button" href="#"><i class="material-icons">close</i>Anchor button</a>

<!-- Standard color icon buttons -->
<button class="icons-success"><i class="material-icons">done_all</i>Button element</button>
<a class="button icons-danger" href="#"><i class="material-icons">close</i>Anchor button</a>

<!-- Primary icon buttons -->
<button class="button-success"><i class="material-icons">done_all</i>Button element</button>
<a class="button button-danger" href="#"><i class="material-icons">close</i>Anchor button</a>
                            


Dropdown buttons

<ul class="button-dropdown">
    <li>
        <button class="dropdown-arrow">Button element</button>
        <ul>
            <li><button>Button element</button></li>
        </ul>
    </li>
</ul>
                            


Forms

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.


<form>
    <div class="row">
        <div class="six columns">
            <label for="exampleEmailInput">Your email</label>
            <input class="u-full-width" placeholder="your@mailbox.com" id="exampleEmailInput" type="email">
        </div>
        <div class="six columns">
            <label for="exampleRecipientInput">Reason for contacting</label>
            <select class="u-full-width" id="exampleRecipientInput">
                <option value="Option 1">Questions</option>
                <option value="Option 2">Advices</option>
                <option value="Option 3">Admiration</option>
            </select>
        </div>
    </div>
    <label for="exampleMessage">Message</label>
    <textarea class="u-full-width" placeholder="Here type your text" id="exampleMessage"></textarea>
    <div class="row">
        <div class="six columns">
            <label>
                <input type="checkbox">
                <div class="checkbox"></div>
                <span class="label-body">check a copy to yourself</span>
            </label>
        </div>
        <div class="six columns">
            <label>
                <input type="radio" name="anyname" checked="checked">
                <div class="radio"></div>
                <span class="label-body">plant text</span>
            </label>
            <label>
                <input type="radio" name="anyname">
                <div class="radio"></div>
                <span class="label-body">html body</span>
            </label>
        </div>
    </div>
    <input class="button-primary" value="Submit" type="submit">
</form>
                            

Groups

Groups combining input element with icon, standard, primary color & color icon buttons.

Form group

Button group


<!-- Form group -->
<form>
    <ul class="group">
        <label>Form group label</label>
        <li><input placeholder="Placeholder..." type="text"></li>
        <li><input class="button-primary" value="Submit" type="submit"></li>
    </ul>
</form>

<!-- Button group -->
<ul class="group">
    <li>
        <ul class="button-dropdown">
            <li>
                <a class="button dropdown-arrow" href="#">Anchor button</a>
                <ul>
                    <li><button>Button element</button></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><button>Button element</button></li>
</ul>
                            

Disabling elements

Disabled anchor buttons

Anchor button

Disabled buttons & inputs



Disabled dropdown buttons


<!-- Disabled anchor buttons -->
<a class="button disabled">Anchor button</a>

<!-- Buttons & inputs disabled elements -->
<button disabled>Button element</button>
<input value="submit input" type="submit" disabled>


<!-- Disabled dropdown buttons -->
<ul class="button-dropdown">
    <li>
        <button class="dropdown-arrow" disabled>Button element</button>
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>
                            


Disabled forms



<!-- Any types input -->
<input type="text" disabled>

<!-- Select -->
<select disabled>
    <option>...</option>
</select>

<!-- Textarea -->
<textarea disabled></textarea>

<!-- Checkbox -->
<label>
    <input type="checkbox" disabled>
    <div class="checkbox"></div>
    <span class="label-body">...</span>
</label>

<!-- Radio buttons -->
<label>
    <input type="radio" checked="checked" disabled>
    <div class="radio"></div>
    <span class="label-body">checked</span>
</label>
<label>
    <input type="radio" disabled>
    <div class="radio"></div>
    <span class="label-body">unchecked</span>
</label>
                            

Lists

  • Unordered lists have basic styles
  • They use the circle list style
    • Nested lists styled to feel right
    • Can nest either type of list into the other
  • Just more list items mama san

<!-- Basic list -->
<ul>
    <li>Item 1</li>
    <li>
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>
                            
  1. Ordered lists also have basic styles
  2. They use the decimal list style
    • Ordered and unordered can be nested
    • Can nest either type of list into the other
  3. Last list item just for the fun

<!-- Ordered list -->
<ol>
    <li>Item 1</li>
    <li>
        Item 2
        <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
        </ul>
    </li>
    <li>Item 3</li>
</ol>
                            

Cards

Standard cards

Rally 038

The car's 1,759.3 cc four-cylinder engine combined supercharging and turbocharging to reduce turbo lag at low engine speeds. The car produced a maximum output of 480 horsepower (350 kW).

Primary color cards

To create primary color cards use the utility classes - "u-".

Success card title

Asperiores, enim, odio, accusantium, quam sapiente velit placeat porro hic nostrum temporibus saepe repellendus cupiditate illum modi nam consequuntur quos rem eaque magni eveniet eum officiis necessitatibus eligendi ex nobis.

Warning card title

Quo, culpa debitis molestiae nihil minima quos beatae atque officia. Sunt doloremque debitis quaerat explicabo accusamus amet dolorem officiis sed sequi maxime. Accusantium hic!


<!-- Standard card -->
<div class="card">
    <img class="u-full-width" src="image16x9.jpg">
    <div class="block">
        <h3>Card title</h3>
        <p>The main text area of the card</p>
        <button class="button">Button element</button>
    </div>
</div>
                            

Array cards

038 give possibility to very simple construct responsive array cards. Sample available on example page.


<!-- Array cards -->
<div class="cards">
    <div class="card">...</div>
    ...
    <div class="card">...</div>
</div>
                            

Tables

Name Age Sex Location
Spock 40 Male Vulcan
James Tiberius Kirk 38 Male USS Enterprise NCC-1701

<table class="u-full-width">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Spock</td>
            <td>40</td>
            <td>Male</td>
            <td>Vulcan</td>
        </tr>
        <tr>
            <td>James Tiberius Kirk</td>
            <td>38</td>
            <td>Male</td>
            <td>USS Enterprise NCC-1701</td>
        </tr>
    </tbody>
</table>
                            

Utilities

.u-global-radius Set jnt radius
.u-border-off Destroy border style
.u-full-width
.u-max-full-width
Expand or sets max full width for element
.u-pull-right
.u-pull-left
Align to right or left any element
.u-align-left
.u-align-center
.u-align-right
Align content in parent block
.u-color-primary
.u-color-success
.u-color-info
.u-color-warning
.u-color-danger
Set primary text colors
.u-background-primary
.u-background-success
.u-background-info
.u-background-warning
.u-background-danger
Set primary background colors
.u-hide Use for hide an elements
.u-hide-lower-mobile
.u-hide-lower-phablet
.u-hide-lower-tablet
.u-hide-lower-desktop
.u-hide-lower-desktophd
Hide elements on media queries decrease
.u-hide-larger-mobile
.u-hide-larger-phablet
.u-hide-larger-tablet
.u-hide-larger-desktop
.u-hide-larger-desktophd
Hide elements on media queries increase