Theme Frontstart

Use this theme as a kickstart for your own theme. No plans to create your own theme? The basic style look also good to quickly set up a website.

Download Theme Frontstart

Latest version (stable)

Develop (experimental)

Compatibility

Compatibility

Compatibility

We can guarantee that this Frontstart component will work with this Frontstart version.

It can be possible that this Frontstart component will also work with an older Frontstart version.

Frontstart 1.0.0 or higher
Required Frontstart components

Required components

At moment of writing there are no contributed Frontstart components that are dependent of other Frontstart components.

None
Recommend Frontstart components

Recommend components

This Frontstart component is not dependent on other compontens.

For the best results we recommended to use other Frontstart components.

Element Frontstart, Grid Frontstart
Dependencies

Dependencies

This components is not dependent of other frameworks or libraries like jQuery.

None

CSS elements

Use CSS elements as building blocks to set up a website. Most CSS elements are automatically applied to HTML elements within the class .theme.

<section>
    <h1 class="h1">My heading</h1>
    <p class="p">Lorem Ipsum dolor sit amet</p>
</section>

<!-- Same result as above -->
<section class="theme">
    <h1>My heading</h1>
    <p>Lorem Ipsum dolor sit amet</p>
</section>

Typography

Text

Style headings with .h1 up to .h6 and paragraphs with .p. There are also modifier classes available.

Element Class Modifier class Within .theme
Heading 1 .h1 .hx-underlined <h1>
Heading 2 .h2 .hx-underlined <h2>
Heading 3 .h3 .hx-underlined <h3>
Heading 4 .h4 .hx-underlined <h4>
Heading 5 .h5 .hx-underlined <h5>
Heading 6 .h6 .hx-underlined <h6>
Paragraph .p .p-big
.p-tiny
.p-stretched
.p-compressed
<p>
Anchor .a No <a>
Strong .strong No <strong>
Emphasis .em No <em>
Quote .q No <q>
Code .code No <code>
<h1 class="h1 hx-underlined">Heading 1</h1>
<p class="p p-big">Lorem ipsum dolor sit amet.</p>

<h2 class="h2">Heading 2</h2>
<p class="p">
    <strong class="strong">Consectetur adipiscing elit</strong>,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <em class="em">Ut enim ad minim veniam</em>,
    quis nostrud exercitation ullamco laboris nisi ut
    <a class="a">aliquip ex ea commodo</a> consequat.
    Duis aute irure dolor <q class="q">in reprehenderit</q>
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
Example
Heading 1

Lorem ipsum dolor sit amet.

Heading 2

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lists

Create ordered, unordered and description lists.

Element Class Modifier class Within .theme
Unordered list .ul No <ul>
Ordered list .ol No <ol>
Description list .dl No <dl>
<ul class="ul">
    <li>Lorem ipsum dolor Sit amet</li>
    <li>consectetur adipiscing elit</li>
</ul>

<ol class="ol">
    <li>Lorem ipsum dolor Sit amet</li>
    <li>consectetur adipiscing elit</li>
</ol>

<dl class="dl">
    <dt>Lorem ipsum dolor Sit amet</dt>
    <dd>consectetur adipiscing elit</dd>
    <dd>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</dd>
</dl>
Example
  • Lorem ipsum dolor Sit amet
  • consectetur adipiscing elit
  1. Lorem ipsum dolor Sit amet
  2. consectetur adipiscing elit
Lorem ipsum dolor Sit amet
consectetur adipiscing elit
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Tables

Create clear and good looking tables

Element Class Modifier class Within .theme
Table .table .table-wide
.table-fixed
.table-smoked
.table-zebra
<table>
Example
Table header
Table data
Table data
Table data
Table data (footer)
<table class="table table-wide table-zebra">
    <thead>
        <tr>
            <th>Table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table data</td>
        </tr>
        <tr>
            <td>Table data</td>
        </tr>
        <tr>
            <td>Table data</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Table data (footer)</td>
        </tr>
    </tfoot>
</table>

Buttons

Create buttons with the class .button. You can apply this class on many HTML elements.

Element Class Modifier class Within .theme
Button .button .button-positive
.button-resistance
.button-negative
.button-transparent
.button-secundairy
.button-big
.button-tiny
<button>
<input type="submit" />
<button class="button">Button tag</button>
<button class="button button-disabled">Disabled</button>
<a class="button button-positive">Anchor tag</a>
<input class="button button-resistance" type="submit" value="Input submit tag" />
<div class="button button-negative">Div tag</div>
Example
Anchor tag
Div tag

Button topic

Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Images

Display images with a description neat and clean.

Element Class Modifier class Within .theme
Figure .figure .figure-large-split No
Image .figure--img No No
Caption .figure--figcaption No No
Title .figure--title No No

Normal usage

<figure class="figure">
    <img alt="Image example" class="figure--img" src="http://placehold.it/1280x720" />
    <figcaption class="figure--figcaption">
        <div class="figure--title">Lorem ipsum</div>
        Lorem ipsum dolor sit amet...
    </figcaption>
</figure>
Example
Image example
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Image and description split on large screen

<figure class="figure figure-large-split">
    <img alt="Image example" class="figure--img" src="http://placehold.it/1280x720" />
    <figcaption class="figure--figcaption">
        <div class="figure--title">Lorem ipsum</div>
        Lorem ipsum dolor sit amet...
    </figcaption>
</figure>
Image example
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Forms

Style forms in a simple way.

Element Class Modifier class Within .theme
Form .form No <form>
Label .label No <label>
Label for .labelfor No No
Input (text etc.) .input No <input type="(several types)" />
Input checkbox .inputCheckbox No <input type="checkbox" />
Input radio .inputRadio No <input type="radio" />
Input stack .inputStack No No
Input row .inputRow No No
Select .select No <select>
Text area .textarea No <textarea>

Normal usage

<label class="label">Type something</label>
<input class="input" placeholder="Your name" type="text" />

<label class="label">Select something</label>
<select class="select">
    <option>Lorem ipsum</option>
    <option>Dolor</option>
    <option>Sit amet</option>
</select>

<label class="label">Type something</label>
<textarea class="textarea" placeholder="Your text" rows="4"></textarea>

<label class="label">Check something</label>
<label class="labelFor"><input class="inputCheckbox" type="checkbox" />Something</label>
<label class="labelFor"><input class="inputCheckbox" type="checkbox" />Something</label>

<label class="label">Pick one</label>
<label class="labelFor"><input class="inputRadio" type="radio" />One</label>
<label class="labelFor"><input class="inputRadio" type="radio" />Two</label>
Example

Stacked inputs

<div class="inputStack">
    <label class="label">Type something</label>
    <input class="input" placeholder="Your name" type="text" />
</div>

<div class="inputStack">
    <label class="label">Pick one</label>
    <label class="labelFor"><input class="inputRadio" type="radio" />One</label>
    <label class="labelFor"><input class="inputRadio" type="radio" />Two</label>
</div>
Example

Advanced rows

<div class="inputRow">
    <div class="inputRow--head">
        <label class="label">Name</label>
    </div>
    <div class="inputRow--body">
        <input class="input" placeholder="First name" type="text" />
        <input class="input" placeholder="Last name" type="text" />
    </div>
</div>
<div class="inputRow">
    <div class="inputRow--head">
        <label class="label">Address</label>
    </div>
    <div class="inputRow--body inputRow--body-flex">
        <input class="input" placeholder="Street" type="text" />
        <input class="input" placeholder="City" type="text" />
        <input class="input" placeholder="Country" type="text" />
    </div>
</div>
Example

Overlays

Create overlays for your content that needs attention. Powered by Element Frontstart to trigger overlay.

Element Class Modifier class Within .theme
Overlay .overlay .overlay-bright No
Background .overlay--background No No
<button class="button" data-element-activate="overlay">Activate overlay</button>

    <!-- Recommend to put before the closing tag of the body -->
    <section class="overlay" data-element="overlay">
        <div class="overlay--background" data-element-deactivate="overlay"></div>
    </section>
</body>
Example
Activate balloon

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Dialog

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Warning

This download contains experimental features.
Do not download this version when you are looking for a stable release.