Framework em constante desenvolvimento, implementando o que de há de mais moderno no meio web, desenvolvido a partir de um framework simples mas bem construido -- Skeleton clique acima em download para iniciar seus projetos
HTML
CSS
JS
A grade está subdivida em 12 colunas numa largura de 960px podendo ser alterada em .container
, suas colunas se adaptam aos dispositivos de forma responsiva. Abaixo o codígo exemplo lhe indicará como deverá ser feito.
Atenção: em mobile menor que 549px as colunas ganham definição de 100% de largura
<!-- .container é aonde o conteudo entra e fica centralizado -->
<div class="container">
<!-- coluna é o filho de .linha -->
<div class="linha">
<div class="uma coluna">Uma</div>
<div class="onze colunas">Onze</div>
</div>
<!-- use apenas um número + coluna ou colunas -->
<div class="linha">
<div class="duas colunas">Two</div>
<div class="dez colunas">Ten</div>
</div>
<!-- Outras larguras abreviadas -->
<div class="linha">
<div class="um-terco coluna">1/3</div>
<div class="dois-terco coluna">2/3</div>
</div>
<div class="linha">
<div class="metade coluna">1/2</div>
<div class="metade coluna">1/2</div>
</div>
O fonte está definida como rems
, então os tamanhos de fonte e as relações espaciais podem ser dimensionados de forma adequada com base em uma única propriedade de tamanho de fonte <html>
. O framework nunca altera o tamanho da fonte <html>
, mas está lá se precisar do seu projeto. Todas as medidas ainda são base 10, portanto, uma fonte <h1>
com 5.0rem
font-size é igual a 50px.
Substitua a palavra em negrito:
<i class="fa fa-shield fa-lg">
Lista completa aqui!
Para alterar tamanhos:
<i class="fa fa-shield fa-lg">
Substitua fa-lg por:fa-2x, fa-3x, fa-4x, fa-4x, fa-5x
Para adicionar ícones foi utilizado Fontawesome lá você encontra outras opções de customizações e uma documentação mais completa!
<!-- Standard buttons -->
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input value="submit input" type="submit">
<input value="button input" type="button">
<!-- Primary buttons -->b>
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" value="submit input" type="submit">
<input class="button-primary" value="button input" type="button">
<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>
<ul>
por <ol>
para adicionar numeração
Nome | Idade | Sexo | Local |
---|---|---|---|
Oscar Neto | 36 | Masculino | São Paulo |
Vanessa Mota | 30 | Feminino | Carapicuíba |
Livia | 10 | Feminino | Carapicuíba |
<table class="u-full-width">
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Sexo</th>
<th>Local</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oscar Neto</td>
<td>Masculino</td>
<td>São Paulo</td>
</tr>
</tbody>
</table>
<form>
<div class="row">
<div class="seis colunas">
<label for="exampleEmailInput">Email</label>
<input class="u-full-width" placeholder="email@email.com" id="exampleEmailInput" type="email">
</div>
<div class="seis colunas">
<label for="exampleRecipientInput">Departamento</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Administração</option>
<option value="Option 2">Financeiro</option>
<option value="Option 3">Suporte</option>
</select>
</div>
</div>
<label for="exampleMessage">Mensagem</label>
<textarea class="u-full-width" id="exampleMessage"></textarea>
<label class="example-send-yourself-copy">
<input type="checkbox">
<span class="label-body">Enviar copia.</span>
</label>
<input class="button-primary" value="Enviar" type="submit">
</form>
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<a href="link_da_imagem" data-lightbox="nome_da_lightbox" data-title="Legenda"><img src="link_da_imagem" /></a>
</div>
data-lightbox
se refere ao lightbox
.grid, .grid-sizer, .grid-item
se refere ao mansory
Documentação completa: Mansory,Lightbox
<div class="slider" id="main-slider">
<div class="slider-wrapper">
<img src="img/slideshow/slide01.jpg" alt="First" class="slide" />
<img src="img/slideshow/slide02.jpg" alt="Second" class="slide" />
<img src="img/slideshow/slide03.jpg" alt="Third" class="slide" />
</div>
</div>
Caso queira em fullscreen
não adicione dentro de.container