Logo

Framework

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

Grade

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

Uma
Onze
Duas
Dez
Três
Nove
Quatro
Oito
Cinco
Sete
Seis
Seis
Sete
Cinco
Oito
Quatro
Nove
Três
Dez
Duas
Onze
Uma
Doze
Metade
Metade

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

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.

Fonte H1 50px = 5rem

Fonte H2 42px = 4.2rem

Fonte H3 36px = 5.6rem

Fonte H4 30px = 3rem

Fonte H5 24px = 2.4rem
Fonte H6 15px = 1.5rem
Utilize pesos diferentes com font-weight:300, 400 ou 600

A fonte escolhida foi 'Open Sans', sans-serif devido sua legibilidade e seu tempo de carregamento, essa foi adicionada a partir do Google Fonts e pode ser alterada a qualquer momento no css

Tipos:

    Negrito <b>Negrito</b>
    Itálico <em>Itálico</em>
    Colorido <a>Colorido</a>
    Sublinhado <u>Sublinhado</u>
                    
                    
Ícones

                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!
                                
Botões
Link
Link
        

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

        
    
Listas
  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3
  1. Item 1
  2. Item 2
    • Item 2.1
    • Item 2.2
  3. Item 3

                    <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>
Substitua <ul> por <ol> para adicionar numeração
Tabelas
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>
            
        
Formulários

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

        
<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  
       
    
    
Slideshow
Primeiro Slide Segundo Slide Terceiro Slide
   
<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