038

The modern, simple and responsive
lightweight HTML/CSS pattern | Actually v1.5

download

Rush with 038!

If you're current framework dull or extra-lightweight and 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 with actions without JavaScript. And last but not least 038 still supports IE9 and other older browsers.
038 have best integration with touch slider such as Swiper, One Page Scroll, firstPage or other customizable plugins for desktop and mobile devices. You also use 038 for building amazing mobile apps on frameworks like Adobe PhoneGap.


// 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.5/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 and devices with 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>
                        
To ignore device sizes, use ".permanent" class.
One
Eleven

<div class="row u-align-center">
    <div class="six columns permanent">One</div>
    <div class="six columns permanent">Eleven</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, 038 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.

038 quotation block

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

<!-- Header height (1rem = 10px) for different devices: mobile / phablet / tablet -->
<h1>Heading</h1> <!-- 3.0rem / 4.0rem / 5.0rem -->
<h2>Heading</h2> <!-- 2.7rem / 3.5rem / 4.3rem -->
<h3>Heading</h3> <!-- 2.4rem / 3.0rem / 3.6rem -->
<h4>Heading</h4> <!-- 2.1rem / 2.5rem / 2.9rem -->
<h5>Heading</h5> <!-- 1.8rem / 2.0rem / 2.2rem -->
<h6>Heading</h6> <!-- 1.5rem / 1.5rem / 1.5rem -->
                            

Material Icons

The 038 supports are simple, modern, friendly material design system icons in typography. Learn more at Material icons guide to put it to a code.

These classes regulate material icons size:
.md-off
.md-18
.md-24
.md-36
.md-48

<!-- Material Icons -->
<p>Some text here <i class="material-icons">info_outline</i> or there...</p>

<!-- Use .md-off class to reset icons height to font size. -->
<i class="material-icons md-off">info_outline</i>
                                

Buttons

This visual model for "button" and "input" tags with type="button | reset | submit".
Using an utilities classes formed any types of check button or group.

Standard buttons

Anchor button

Primary buttons

Anchor button

Primary color buttons

Anchor button

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

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

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

Icon, standard, primary color and 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

<!-- 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
Anchor button

<!-- 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>
                        

Short icon buttons

Anchor button

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

Use the u-hide- classes to hide or show short buttons parts. Сollapse parts the best way get responsive design.

Anchor button

<!-- Responsive short icon buttons -->
<button class="icons"><i class="material-icons">done_all</i> <span class="u-hide-larger-desktop">Button element</span></button>
<a class="button icons" href="#"><i class="material-icons u-hide-larger-desktop">close</i> Anchor button</a>
                                

Standard color icon buttons

The classes ( .icons-primary / .icons-success / .icons-info / .icons-warning / .icons-danger ) set primary colors with hover effect for icon in button.

Anchor button

<!-- Standard color icon buttons with hover effect -->
<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>
                                

Use the u-color- utility classes to set colors without hover effect.

Anchor button

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


Primary icon buttons
Anchor button

<!-- 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>
                        


Extra buttons
Button element


  • "left-top", "left-bottom"
  • "top-left", "top-right"
  • "bottom-left", "bottom-right"
  • "right-top", "right-bottom"

<!-- Extra button -->
<div class="extra-button">
    <div class="button arrow">Button element</div>
    <ul>
        <li><button>Button element</button></li>
        <li><a class="button" href="#">Anchor button</a></li>
        <li><input value="Input button" type="button"></li>
    </ul>
</div>

<!-- Extra button with align popup -->
<div class="extra-button bottom-left">
    <button class="arrow">Button element</button>
    <ul>
        ...
    </ul>
</div>
                        


Check buttons

<!-- Check button -->
<label class="check-button">
    <input type="checkbox" checked>
    <div class="button">
        <i class="material-icons check">check</i>
        <i class="material-icons uncheck">block</i>
        Check button
    </div>
</label>
                        


Radio buttons


Extra button is alternative method of presentation of simple list radio buttons.

Extra radio

<!-- Radio buttons -->
<label class="radio-button">
    <input type="radio" name="anyname" checked="checked">
    <div class="button">
        <i class="material-icons check">radio_button_checked</i>
        <i class="material-icons uncheck">radio_button_unchecked</i>
        Radio first
    </div>
</label>
                        


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.


<!-- Forms -->
<form class="u-full-width">
    <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">
    <input class="button-primary" value="Reset" type="reset">
</form>
                    

Groups

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

Button group


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

Form 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>
                        

Disabling elements

Disabled anchor buttons

Anchor button

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

Disabled buttons and inputs


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

Disabled extra buttons


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

Check buttons



Radio buttons


<!-- Disabled check and radio buttons -->
<label class="check-button">
    <input type="checkbox" checked disabled>
    <div class="button">
        <i class="material-icons check">check</i>
        <i class="material-icons uncheck">block</i>
        Check button
    </div>
</label>
                        


Disabled forms




The best way to disabled inputs and buttons group was using "fieldset" tag: <fieldset disabled>...</fieldset>


<!-- 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

Lancia Rally 038
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 a background utility classes.

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

Place Name Location Time
#1 Toivonen / Cresto 54ème Rallye Automobile de Monte-Carlo 10:11:24
#2 Alén / Kivimäki 36th International Swedish Rally 5:11:13

<table class="u-full-width">
    <thead>
        <tr>
            <th>Place</th>
            <th>Name</th>
            <th>Location</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>#1</td>
            <td>Toivonen / Cresto</td>
            <td>54ème Rallye Automobile de Monte-Carlo</td>
            <td>10:11:24</td>
        </tr>
        <tr>
            <td>#2</td>
            <td>Alén / Kivimäki</td>
            <td>36th International Swedish Rally</td>
            <td>5:11:13</td>
        </tr>
    </tbody>
</table>
                    

Utilities

.u-stick-top Fixed header to top of web page
.u-global-radius Set jnt radius
.u-hr Adding horizontal separator to some tags like "h1", "div" or "span"
.u-border-off
.u-border-primary
.u-border-success
.u-border-info
.u-border-warning
.u-border-danger
Define border color as transparent or sets primary colors
.u-background-off Define background color as transparent
.u-full-width
.u-max-full-width
Expand or sets max full width for element
u-padding-off
u-padding-5
u-padding-10
u-padding-15
u-padding-25
Disable, increase or decrease inner space
u-margin-off
u-margin-5
u-margin-10
u-margin-15
u-margin-25
Disable, increase or decrease outer space
.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 and anchors colors
.u-set-primary
.u-set-success
.u-set-info
.u-set-warning
.u-set-danger
Set primary colors for background, border and text
.u-font-xxs
.u-font-xs
.u-font-s
.u-font-m
.u-font-l
.u-font-xl
.u-font-xxl
Decrease, reset or increase font size
.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
.u-hide-mobile
.u-hide-phablet
.u-hide-tablet
.u-hide-desktop
.u-hide-desktophd
Hide elements on media queries