Getting started

Download the minified Helder. stylesheet and use the basic HTML template below. That's it! You're all set to start your next amazing project.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/custom.css">    
    <title>Your amazing project</title>
</head>
<body>
    
</body>
</html>

Download now View all components

Use Helder. with SASS

Helder. is available in SASS as well. If you're familiar with SASS, I recommend to make use of this option so you can customize Helder. to your own preferences even easier.

1. Clone the repository
https://github.com/jeffrey-over/helder-css-framework

2. Customize the variables from _variables.scss


    // Imports
    // @import url('https://fonts.googleapis.com/css?family=Open+Sans');
    
    // Sizing
    $mobile: 600px;
    $tablet-portrait: 800px;
    $desktop: 1000px;
    $widescreen: 1200px;
    $fullhd: 1800px; 
    
    // Global coloring
    $base-color: #ffeb3b;
    $secondary-color: #55efc4;
    $accent-color: #dfe6e9;
    $background-color: #ffffff;
    $background-color-secondary: #f6f9fc;
    $font-color: #4D4D4D;
    $font-color-secondary: #666666;
    $link-color: #0070c9;
    $highlight-color: #ffeea8;
    $default-box-shadow: 0 5px 13px 0 rgba(0,0,0,.12);
    $default-border: 1px solid rgba(10, 10, 10, 0.1);
    
    // Grid & Layout
    $default-margin: 1.5rem;
    $default-padding: 1.5rem;
    $basic-elements-margin: 0 0 $default-margin 0; //p,ol,ul,dl,table
    $container-padding: 0 10px;
    $column-padding: 1rem;
    $column-margin-bottom: 0;
    $section-padding: 40px 0 0 0;
    $mark-padding: 0 0.4rem;
    
    // Typography
    $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    $font-size: 1.6rem;
    $font-size-small: 1.5rem;
    $line-height: 1.6;
    $heading-font-weight: 600;
    $heading-font-color:  rgba(0,0,0,0.88);
    $heading-line-height: 1.25;
    $heading-margin: 2rem 0 $default-margin;
    $heading-letter-spacing: auto;
    $h1: 4.2rem;
    $h2: 3.4rem;
    $h3: 2.4rem;
    $h4: 2rem;
    $h5: 1.6rem;
    $h6: 1.4rem;
    
    // Forms
    $label-font-weight: 600;
    $label-margin: 2rem 0 1rem;
    $input-border-radius: 5px;
    $input-padding: 1rem;
    $input-line-height: 1;
    $input-focus-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    $input-focus-border: 1px solid rgba(81, 203, 238, 1);
    $input-select-height: 4.6rem;
    $input-valid-box-shadow: 0 0 5px #55efc4;
    $input-valid-border: 1px solid #55efc4;
    $input-invalid-box-shadow: 0 0 5px #D63131;
    $input-invalid-border: 1px solid #D63131;
    
    // Secondary styling
    $secondary-background: $secondary-color;
    $secondary-background-hover: darken($secondary-background, 10%);
    $secondary-border: 1px solid $secondary-color;
    $secondary-border-hover: 1px solid darken($secondary-color, 10%);
    $secondary-font-color: #ffffff;
    $outline-font-color-hover: #ffffff;
    
    // Outlined styling
    $outline-border: 1px solid $accent-color;
    $outline-border-hover: 1px solid darken($accent-color, 30%);
    $outline-background: transparent;
    $outline-background-hover: transparent;
    $outline-font-color: darken($accent-color, 50%);
    $outline-font-color-hover: darken($accent-color, 50%);
    
    // Buttons 
    $button-background: $base-color;
    $button-background-hover: darken($button-background, 10%);
    $button-font-color: #000000;
    $button-font-weight: 400;
    $button-font-family: $font-family;
    $button-font-size: 1.5rem 2rem;
    $button-border-width: 1px;
    $button-border-style: solid;
    $button-border-color: $button-background;
    $button-border-radius: 4px;
    $button-text-transform: none;
    $button-padding: 1.5rem;
    $button-margin: 0 0 .5rem 0;
    
    // Cards
    $card-padding: 2rem;
    $card-margin: 1rem;
    $card-font-size: 1.4rem;
    $card-heading-margin: 1rem 0;
    $card-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
    
    // Table
    $table-caption-font-style: italic;
    $table-heading-font-color: $heading-font-color;
    $table-footer-font-weight: 600;
    $table-row-hover-background: $background-color-secondary;
    $table-cell-padding: 1.2rem 1.5rem;
    $table-cell-border: 1px solid rgba(10, 10, 10, 0.1);
    $table-cell-margin: 0;
    $table-cell-background: transparent;
    
    // Lists
    $dd-margin: 0;
    $dd-padding: 0 0 0.5em 0;
    
    // Blockqoute
    $blockqoute-font: 14px/22px normal $font-family;
    $blockqoute-margin: 10px 0 10px 50px;
    $blockqoute-padding: 0 0 0 15px;
    $blockqoute-border: 2px solid rgba(10, 10, 10, 0.1);
    
    // HR
    $hr-color: rgba(10, 10, 10, 0.1);
    $hr-margin: 2rem 0;
    $hr-border: 1px solid $hr-color;
    
    // Pre
    $pre-margin: 1.5rem 0;
    $pre-padding: 1rem;
    $pre-font-size: 14px;
    $pre-background-color: #f8f8f8;
    $pre-font-color: $font-color;
    $pre-border-radius: 5px;
    
    // Code
    $code-background-color: #f8f8f8;
    $code-font-color: #d63131;
    $code-line-height: inherit;
    $code-padding: 0 .6rem;
    $code-text-shadow: 0;
    $code-font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    
    // Navigation
    $navigation-height: 50px;
    $navigation-background-color: transparant;
    $navigation-mobile-background-color: transparant;
    $navigation-padding-mobile: 0;
    $navigation-padding-desktop: 0;
    $navigation-font-color: $font-color;
    $navigation-link-color: $font-color;
    $navigation-mobile-link-color: $font-color;
    $navigation-link-hover-color: #a1a7b9;
    $navigation-link-padding: 0 30px;
    $navigation-mobile-link-padding: 0 40px;
    $navigation-font-size: 1.4rem;
    $navigation-heading-font-color: #a1a7b9;
    $navigation-line-height: $navigation-height;
    $navigation-mobile-nav-hover-color: $background-color-secondary;
    $logo-font-color: #cccccc;
    $logo-font-size: $navigation-font-size;
    
    // Footer
    $footer-background-color: #191919;
    $footer-padding-mobile: 2rem 0;
    $footer-padding-desktop: 3rem 0;
    $footer-font-color: #a1a7b9;
    $footer-font-size: 1.4rem;
    $footer-heading-font-color: #a1a7b9;

3. Get familiar with the structure of the SASS environment


    // Base
    @import "base/variables";
    @import "base/mixins";
    @import "base/reset";
    
    // Components
    @import "components/base";
    @import "components/buttons";
    @import "components/forms";
    @import "components/grid";
    @import "components/code";
    @import "components/typography";
    @import "components/tables";
    @import "components/cards";
    @import "components/helpers";
    @import "components/footer";
    @import "components/navigation";

Containers

Helder. uses one container with two extra flavors. The default .container is centered width a max-width of 90% on mobile up to 75% on desktop.

Code example

<div class="container has-full-width">
    <section>
        <h1>Title</h1>
        <p>Text</p>
    </section>
</div>

Classes

Class	Descripion
`.has-full-width`	Changes the `max-width` to `100%` and removes the `padding` on the sizes.
`.has-small-width`	Changes the `max-width` to `$mobile` for all devices.

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$container-padding`	`0 1rem`
`$mobile`	`600px`
`$tablet-portrait`	`800px`
`$desktop`	`1000px`
`$widescreen`	`1200px`
`$fullhd`	`1800px`

Grid

Helder. uses a mobile first approach grid system. The breakpoint is defined with the breakpoint-phone-up mixin and from there the widths are determined. The mixin uses the $tablet-portrait as default. This can be customized in _variables.scss. The widths are calculated with the calc function.

Code example

<div class="container">
    <section>
        <div class="columns">
            <div class="full column has-border">
                Test
            </div>
        </div>
        <div class="columns">
            <div class="half column has-border">Test</div>
            <div class="half column has-border">
                test</div>
        </div>
        <div class="columns">
            <div class="third column has-border">test</div>
            <div class="two-thirds column has-border">test</div>
        </div>
        <div class="columns">
            <div class="fourth column has-border">test</div>
            <div class="fourth column has-border">test</div>
            <div class="fourth column has-border">test</div>
            <div class="fourth column has-border">test</div>
        </div>
    </section>
</div>

Example

full column

half column

third column

two third colum

fourth

Options

Class	Descripion
`.full`	Full width column
`.half`	Half width column
`.third`	One third column
`.two-thirds`	Two third column
`.fourth`	One fourth column
`.column`	Wrapper from all columns.

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$column-padding`	`1rem`
`$column-margin-bottom`	`0`

Typography

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$font-family`	`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";`
`$font-size`	`1.6rem`
`$font-size-small`	`1.5rem`
`$line-height`	`1.3`
`$heading-margin`	`2rem 0 $default-margin`
`$heading-font-color`	`rgba(0,0,0,0.88)`
`$heading-font-weight`	`600`
`$heading-line-height`	`1.25`
`$heading-letter-spacing`	`auto`
`$h1`	`4.2rem`
`$h2`	`3.4rem`
`$h3`	`2.4rem`
`$h4`	`2rem`
`$h5`	`1.6rem`
`$h6`	`1.4rem`
`$link-color`	`#0070c9`
`$dd-margin`	`0`
`$dd-padding`	`0 0 0.5em 0`
`$blockqoute-font`	`14px/22px normal $font-family`
`$blockqoute-margin`	`10px 0 10px 50px`
`$blockqoute-padding`	`0 0 0 15px`
`$blockqoute-border`	`2px solid rgba(10, 10, 10, 0.1)`

Forms

All form elements have a 100% width from their parent element and can easily be manipulated with containers and columns.

Code example

<form>
    <fieldset>

        <legend>Legend Example</legend>
        <div>
            <label>Text Input Label</label>
            <input type="text" />
            <p class="test-class">Helper text if necessary.</p>
        </div>
        <div>
            <label>Password</label>
            <input type="password" />
            <p class="test-class">Error messages when appropriate.</p>
        </div>
        <div>
            <label for="first-name">First Name</label>
            <input type="text" placeholder="firstname" id="first-name" />
        </div>
        <div>
            <label for="last-name">Last Name</label>
            <input type="text" id="last-name" class="is-invalid" />
        </div>
        <div>
            <label for="email">Email</label>
            <input type="email" id="email" class="is-valid" />
        </div>
        <div>
            <label for="gender">Dropdown</label>
            <select>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            </select>
        </div>
        <div>
            <label>Radio Buttons</label>
            <input type="radio" /> Label 1</label>
            <Br />
            <input type="radio" /> Label 2</label><br />
            <input type="radio" /> Label 3</label><br />
            </ul>
        </div>
        <div>
            <label for="url">URL Input</label>
            <input type="url" placeholder="http://" />
        </div>
        <div>
            <label>Text area</label>
            <textarea></textarea>
        </div>
        <div>
            <label><input type="checkbox" /> This is a checkbox.</label>
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </fieldset>
</form>

Example

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$label-font-weight`	`600`
`$label-margin`	`2rem 0 1rem`
`$input-border-radius`	`5px`
`$input-padding`	`1rem`
`$input-line-height`	`1`
`$input-focus-box-shadow`	`0 0 5px rgba(81, 203, 238, 1)`
`$input-focus-border`	`1px solid rgba(81, 203, 238, 1)`
`$input-select-height`	`4.6rem`
`$input-valid-box-shadow`	`0 0 5px #55efc4`
`$input-valid-border`	`1px solid #55efc4`
`$input-invalid-box-shadow`	`0 0 5px #D63131`
`$input-invalid-border`	`1px solid #D63131`

Tables

Tables are completely styled including the caption, thead and tfoot.

Code example

<table>
        <caption>This is a caption for a table</caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Date</th>
                <th>Address</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>Footer info</td>
                <td>Footer info</td>
                <td>Footer info</td>
                <td>Footer info</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>#999-32ac</td>
                <td>First Name</td>
                <td>13 May, 2013</td>
                <td>999 Spruce Lane, Somewhere, CA 94101</td>
            </tr>
            <tr>
                <td>#888-32dd</td>
                <td>Sample Name</td>
                <td>17 May, 1984</td>
                <td>999 Spruce Lane, Somewhere, CA 94101</td>
            </tr>
        </tbody>
    </table>

Example

This is a caption for a table
ID	Name	Date	Address
Footer info	Footer info	Footer info	Footer info
#999-32ac	First Name	13 May, 2013	999 Spruce Lane, Somewhere, CA 94101
#888-32dd	Sample Name	17 May, 1984	999 Spruce Lane, Somewhere, CA 94101

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$table-caption-font-style`	`italic`
`$table-heading-font-color`	`$heading-font-color`
`$table-footer-font-weight`	`600`
`$table-row-hover-background`	`$background-color-secondary`
`$table-cell-padding`	`1.2rem 1.5rem`
`$table-cell-border`	`1px solid rgba(10, 10, 10, 0.1)`
`$table-cell-margin`	`0`
`$table-cell-background`	`transparent`

Buttons

Buttons are styled with the Flat UI approach and can be created with input elements or the .button class.

Primary

Code example

<button>A button</button>

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$button-border-width`	`1px`
`$button-border-style`	`solid`
`$button-border-color`	`$button-background`
`$button-border-radius`	`4px`
`$button-background`	`$base-color`
`$button-font-color`	`#000000`
`$button-font-weight`	`400`
`$button-font-family`	`$font-family`
`$button-font-size`	`1.5rem 2rem`
`$button-text-transform`	`none`
`$button-padding`	`1.5rem`
`$button-margin`	`0 0 .5rem 0`
`$button-background-hover`	`darken($button-background, 10%)`

Secondary

Code example

<button class="is-secondary">A button</button>

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$secondary-background`	`$secondary-color`
`$secondary-background-hover`	`darken($secondary-background, 10%)`
`$secondary-border`	`1px solid $secondary-color`
`$secondary-border-hover`	`1px solid darken($secondary-color, 10%)`
`$secondary-font-color`	`#ffffff`
`$secondary-font-color-hover`	`#ffffff`

Outlined

Code example

<button class="is-outlined">A large button</button>

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$outline-border`	`1px solid $accent-color`
`$outline-border-hover`	`1px solid darken($accent-color, 30%)`
`$outline-background`	`transparent`
`$outline-background-hover`	`transparent`
`$outline-font-color`	`darken($accent-color, 50%)`
`$outline-font-color-hover`	`darken($accent-color, 50%)`

Code

Use the <code></code>-tag for inline code examples and <pre></pre> for codingblocks.

Single line example

<h1>hello world!</h1>

Coding block example

    sudo ipfw pipe 1 config bw 256KByte/s
    sudo ipfw add 1 pipe 1 src-port 3000

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$pre-padding`	`1rem`
`$pre-font-size`	`14px`
`$pre-margin`	`1.5rem 0`
`$pre-background-color`	`#f8f8f8`
`$pre-font-color`	`$font-color`
`$pre-border-radius`	`5px`
`$code-background-color`	`#f8f8f8`
`$code-font-color`	`#d63131`
`$code-padding`	`0 .6rem`
`$code-text-shadow`	`0`
`$code-font-family`	`Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`
`$code-line-height`	`inherit`

Helpers

Helpful classes to improve the efficiency of your design and building process.

Vertical center

<div class="container">
  <div class="vertical-center">
    <H1>VERTICAL CENTERED</H1>
  </div>
</div>

THIS IS VERTICAL CENTERED

Text alignment

  <p class="text-left">Lorem ipsum</p>
<p class="text-center">Lorem ipsum</p>
<p class="text-right">Lorem ipsum</p>

Other helpful classes

Classes	Default setting
`.clearflix`	`clear: both`
`.is-hidden`	`display: none !important`
`.is-shown`	`dipslay: block !important`
`.has-padding`	`1.5rem !important`
`.has-margin`	`1.5rem !important`
`.has-no-margin`	`margin: 0 !important`
`.has-no-padding`	`padding: 0 !important`
`.has-shadow`	`box-shadow: 0 5px 13px 0 rgba(0,0,0,.12)`
`.has-border`	`border: 1px solid rgba(10, 10, 10, 0.1)`
`.responsive-image`	`max-width: 100%; height: auto;`

Cards

Code example

<div class="container">
    <section>
        <h1>Cards</h1>

        <div class="card">
            <img src="https://placekitten.com/g/960/320" alt="Figure Example" class="responsive-image">
            <h2>Title</h2>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>
        </div>


        <div class="card">
            <img src="https://placekitten.com/g/960/320" alt="Figure Example" class="responsive-image">
            <h2>Title</h2>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>
        </div>

        <div class="card">
            <img src="https://placekitten.com/g/960/320" alt="Figure Example" class="responsive-image">
            <h2>Title</h2>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.</p>
        </div>
        <div class="clearfix"></div>
        <p>cards lorem ipsum!</p>
    </section>
</div>

Example

Title

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

Title

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

Title

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$card-padding`	`2rem`
`$card-margin`	`1rem`
`$card-font-size`	`1.4rem`
`$card-heading-margin`	`1rem 0`
`$card-box-shadow`	`0px 1px 35px 0px rgba(0, 0, 0, 0.3)`

Navigation

A simplistic responsive CSS-only horizontal menu. Helder. does not use jquery or javascript. This is how ever easily implemented so you can make use of i.e. a hamburger icon.

Code example

<header class="navigation">
    <div class="container">
        <div class="brand">
            <a href="#!">Logo</a>
        </div>
        <nav>
            <ul>
                <li> <a href="#" title="Home">Home</a> </li>
                <li> <a href="#" title="About">About</a> </li>
                <li> <a href="#" title="Sign Up">Sign Up</a> </li>
                <li> <a href="#" title="Contact">Contact</a> </li>
                <li> <a href="#" title="Careers">Careers</a> </li>
            </ul>
        </nav>
    </div>
</header>

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$navigation-height`	`50px`
`$navigation-background-color`	`2transparent`
`$navigation-mobile-background-color`	`transparent`
`$navigation-padding-mobile`	`0`
`$navigation-padding-desktop`	`0`
`$navigation-font-color`	`$font-color`
`$navigation-link-color`	`$font-color`
`$navigation-mobile-link-color`	`$font-color`
`$navigation-link-hover-color`	`#a1a7b9`
`$navigation-link-padding`	`0 30px`
`$navigation-mobile-link-padding`	`0 40px`
`$navigation-font-size`	`1.4rem`
`$navigation-heading-font-color`	`#a1a7b9`
`$navigation-line-height`	`$navigation-height`
`$navigation-mobile-nav-hover-color`	`$background-color-secondary`
`$logo-font-color`	`#cccccc`
`$logo-font-size`	`$navigation-font-size`

Footer

The responsive footer is simplisticly styled as well and can contain all other components, like: the grid system, lists or cards.

Code example

<footer>
    <div class="container">
        <section>
            <div class="columns">
                <div class="half column">
                    <small>© 2018 Some company name</small>
                    <address>[email protected]</address>
                </div>
                <div class="half column">
                    <small>© 2018 Some company name</small>
                    <address>[email protected]</address>
                </div>
            </div>
        </section>
    </div>
</footer>

Sass Variables

Customize the variables to change the desired behavior.

Variable	Default value
`$footer-background-color`	`#191919`
`$footer-padding-mobile`	`2rem 0`
`$footer-padding-desktop`	`3rem 0`
`$footer-font-color`	`2a1a7b9`
`$footer-font-size`	`1.4rem`
`$footer-heading-font-color`	`a1a7b9`

Helder.

Installation

Content

Getting started

Use Helder. with SASS

Containers

Code example

Classes

Sass Variables

Grid

Code example

Example

Options

Sass Variables

Typography

Sass Variables

Forms

Code example

Example

Sass Variables

Tables

Code example

Example

Sass Variables

Buttons

Primary

Code example

Sass Variables

Secondary

Code example

Sass Variables

Outlined

Code example

Sass Variables

Code

Single line example

Coding block example

Sass Variables

Helpers

Vertical center

THIS IS VERTICAL CENTERED

Text alignment

Other helpful classes

Cards

Code example

Example

Title

Title

Title

Sass Variables

Navigation

Code example

Sass Variables

Footer

Code example

Sass Variables