CSS

Global CSS settings.
Basic HTML elements with variations via extensible classes.

Colors

Red
#e74c3d
Blue
#4585f2
Turquoise
#007a87
Grey
#999999
Light grey
#c7c3c0
Background
#F5F0EC

Headers

Default style for headers h1, h2, h3, h4, h5, h6, style paragraphs p and links or anchors a.

h1 . Títol exemple

h2 . Títol exemple

h3 . Títol exemple

h4 . Títol exemple

h5 . Títol exemple
h6 . Títol exemple

p . Paràgraf amb link d'exemple

                
<!-- Headers -->
<h1>h1 . Títol exemple</h1>
<h2>h2 . Títol exemple</h2>
<h3>h3 . Títol exemple</h3>
<h4>h4 . Títol exemple</h4>
<h5>h5 . Títol exemple</h5>
<h6>h6 . Títol exemple</h6>
<!-- Paràgrafs -->
<p>p . Paràgraf amb <a href="#">link d'exemple</a></p>

Headers variations

Underlined header

Applicable to h1, h2, h3, h4, h5, h6 can add class .line-b for a underlined header.

                
<!-- Header subratllat -->
<h1 class="line-b">Header subratllat</h1>

Line through header

Applicable to h1, h2, h3, h4, h5, h6 can add class .line-m for a line-through header.

Keep in mind that these should include the text in a span.

                
<!-- Header ratllat -->
<h2 class="line-m"><span>Header ratllat</span></h2>

Dropdown header

                
<!-- Header amb dropdown -->
<div class="h-drop">
<h2 class="line-b">Header amb dropdown</h2>
<select>
    <option>Selecciona una opción</option>
</select>
</div>

Buttons

Types, sizes and colors to create buttons. Extensible classes applicable to any element.

Preferably with input type="submit", input type="button", a href="#".

Colors

Segmentation buttons and colors according to the order of action: primary, secondary or tertiary.

Terciari Border

Buttons disabled. Add btn-disabled.

Disabled Disabled Disabled 
                
<!-- Botó acció primaria -->
<input type="button" class="btn" value="Primari" />
<!-- Botó acció secundaria -->
<input type="button" class="btn btn-secondary" value="Secundari" />
<!-- Botó acció terciaria -->
<a href="#" class="btn btn-tertiary">Terciari</a>
<!-- Botó dark border -->
<span class="btn btn-border-dark">Dark border</span>
<!-- Botó light border -->
<span class="btn btn-border-light">Light border</span>
<!-- Botó disabled -->
<a class="btn btn-disabled">Disabled</a>

Sizes

Segmentation sizes for buttons in the order action.

                
<!-- Default size -->
<input type="button" class="btn fleft" value="Default" />
<input type="button" class="btn btn-secondary fleft" value="Default" />
<!-- Middle size -->
<input type="button" class="btn btn-m fleft" value="Middle" />
<input type="button" class="btn btn-m btn-secondary fleft" value="Middle" />
<!-- Small size -->
<input type="button" class="btn btn-s fleft" value="Small" />
<input type="button" class="btn btn-s btn-secondary fleft" value="Small" />

Icon buttons

Buttons with inside icon.

Button with icon

button middle

button small

Editar Estadísticas Borrar 

                
<!-- Button with icon -->
<a href="" class="btn btn-secondary"><span class="icon-info"></span>Icon button</a>
<a href="" class="btn btn-secondary btn-m"><span class="icon-info"></span>Icon button middle</a>
<a href="" class="btn btn-secondary btn-s"><span class="icon-info"></span>Icon button small</a>

<!-- Icon button -->
<a href="" class="btn-icon inline-block grey-color"><span class="icon-editar"></span>Editar</a>
<a href="" class="btn-icon inline-block blue-color"><span class="icon-estadistiques2"></span>Estadísticas</a>
<a href="" class="btn-icon inline-block red-color"><span class="icon-borrar"></span>Borrar</a>

Forms

The forms set width to its container.

Exemple de formulari

                
<!-- Exemple formulari sense labels -->
<div class="form">
    <label>Label camp 1</label>
    <input type="text" placeholder="Introdueix camp 1" />
    <label>Label camp 2</label>
    <select>
        <option selected="selected">Selecciona opció 2</option>
        <option>Opció 1</option>
        <option>Opció 2</option>
    </select>
    <label>Label camp 3</label>
    <textarea placeholder="Introdueix text..."></textarea>
    <label>Validated field</label>
    <input type="text" placeholder="Validated field" class="validated-field" />
    <label>Alert field</label>
    <input type="text" placeholder="Alert field" class="alert-field" />
    <label>Username</label>
    <div class="icon-field">
        <span class="icon-user"></span>
        <input type="text" placeholder="Username" />
    </div>
    <label>Email (suggest validation)</label>
    <div class="icon-field">
        <span class="icon-mail"></span>
        <input type="email" placeholder="Email account" />
    </div>
    <label>Password</label>
    <div class="icon-field">
        <span class="icon-candau"></span>
        <input type="password" placeholder="Password" minlength="8" maxlength="20" />
    </div>
    <div class="checkbox mgbot20">
        <label><input type="checkbox" />Lorem ipsum dolor sit amet.</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="radios" />Exemple radio</label>
    </div>
    <div class="radio">
        <label><input type="radio" name="radios" />Exemple radio</label>
    </div>
    <div class="radio mgbot20">
        <label><input type="radio" name="radios" />Exemple radio</label>
    </div>
</div>

Exemple de columna del 50% amb formulari i columna del 50% amb text

Columna 50%

Columna 50%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

                    
<!-- Exemple de columna del 50% amb formulari i columna del 50% amb text -->
<div class="row">
    <div class="grid-6">
        <div class="box-header">
            <h4 class="title-box">Columna 50%</h4>
            <div class="form min-form">
                <div class="row">
                    <div class="grid-12">
                        <label>Label dropdown 1</label>
                        <select>
                            <option>Option 1</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="grid-6">
                        <label>Label camp 2</label>
                        <input type="text" placeholder="Camp 2" />
                    </div>
                    <div class="grid-6">
                        <label>Label camp 3</label>
                        <input type="text" placeholder="Camp 3" />
                    </div>
                </div>
                <input type="button" class="btn btn-m mgtop10 mgbot0" value="Acció principal" />
            </div>
        </div>
    </div>
    <div class="grid-6">
        <div class="box-header">
            <h4 class="title-box">Columna 50%</h4>
            <p>Lorem ipsum dolor sit amet.</p>
            <input type="button" class="btn btn-s btn-secondary mgtop20 mgbot0" value="Acció secundaria" />
            <input type="button" class="btn btn-s btn-border-dark mgtop20 mgbot0" value="Acció alternativa" />
        </div>
    </div>
</div>

Lists

Type lists ul, ol

Default list

  • List item 1
  • List item 2
  • List item 3

Grey bullet list

  • Bullet list item 1
  • Bullet list item 2
  • Bullet list item 3

Red bullet list

  • Red bullet list item 1
  • Red bullet list item 2
  • Red bullet list item 3

Blue bullet list

  • Blue bullet list item 1
  • Blue bullet list item 2
  • Blue bullet list item 3
                
<!-- Default list -->
<ul class="list">
    <li>List item 1</li>
    <li>List item 2</li>
</ul>
<!-- Bullet list -->
<ul class="list list-b">
    <li>Bullet list item 1</li>
    <li>Bullet list item 2</li>
</ul>
<!-- Red bullet list -->
<ul class="list list-rb">
    <li>Red bullet list item 1</li>
    <li>Red bullet list item 2</li>
</ul>

Default table

Style elements <table>

Default table. Simply add class table to the table item.

Id Marca Modelo Año
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
4 Ford Focus 2008
5 Nissan Sentra 2011
6 BMW M3 2009
7 Honda Civic 2010
8 Kia Soul 2010 
                
<!-- Default table -->
<table class="table">
<thead>
    <tr>
        <th>Id</th>
        <th>Marca</th>
        <th>Modelo</th>
        <th>Año</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Honda</td>
        <td>Accord</td>
        <td>2009</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Toyota</td>
        <td>Camry</td>
        <td>2012</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Hyundai</td>
        <td>Elantra</td>
        <td>2010</td>
    </tr>
    (...)
</tbody>
</table>

Zebra table

Table odd different records. Add class table-zebra to table element.

Id Marca Modelo Año
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
4 Ford Focus 2008
5 Nissan Sentra 2011
6 BMW M3 2009
7 Honda Civic 2010
8 Kia Soul 2010 
                    
<!-- Zebra table -->
<table class="table table-zebra">
<thead>
    <tr>
        <th>Id</th>
        <th>Marca</th>
        <th>Modelo</th>
        <th>Año</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>Honda</td>
        <td>Accord</td>
        <td>2009</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Toyota</td>
        <td>Camry</td>
        <td>2012</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Hyundai</td>
        <td>Elantra</td>
        <td>2010</td>
    </tr>
    (...)
</tbody>
</table>