Índice

Introdução
Envolvedores
Grid
Tipografia
Pre e Code
Lista
Formulário
Tabela
Botões
Selecionadores
Utilitários

Prelúdio Framework

(pre.lú.di:o) sm.
1. Primeiro passo para um certo desfecho
2. Sinal ou prenúncio de algo

Prelúdio, do latim praeludium, significa a experiência prévia de algo, é o que antecede algo diferente.

Criei esse projeto como alternativa minimalista aos frameworks tradicionais, que pra mim e meus projetos pareciam grandes e complicados. Eu procurei usar tecnologias que faziam sentido e nomes idem. As tecnologias usadas são ITCSS, RSCSS, Sanitize, SASS, e depois, autoprefixer. Esse projeto ainda está no início e vou melhorá-lo com o tempo e a necessidade.

Prelúdio segue uma estrutura específica de pastas:

/1-settings: Variáveis globais, setagens de espaçamentos, configurações chave, etc.
/2-tools: Mixins, funções e essas coisas.
/3-generic: Regras de baixa especificidades como resets.
/4-base: HTML sem classes como blockquote{}.
/5-objects: Objetos, padrões de design como .o-quintal{}.
/6-components: Elementos de UI completos, como o button, card.
/7-utilities: Alta especificidade e seletores explícitos. Classes usadas para sobrescrever e implementar código, como .u-hidden{} e fc-white{}.

Com essas estrutura você vai ter o seguinte no seu main.scss:

      // Settings
      @import "simple/settings/typograph";
      @import "simple/settings/colors";
      @import "simple/settings/core";

      // Tools
      @import "simple/tools/mixins";

      // Generic
      @import "simple/generic/sanitize";

      // Base
      @import "simple/base/buttons";
      @import "simple/base/forms";
      @import "simple/base/images";
      @import "simple/base/links";
      @import "simple/base/lists";
      @import "simple/base/page";
      @import "simple/base/quotes";
      @import "simple/base/tables";
      @import "simple/base/typography";
      @import "simple/base/selects";

      // Objects
      @import "simple/objects/grid";
      @import "simple/objects/lists";
      @import "simple/objects/tables";
      @import "simple/objects/envolvedores";

      // Components (criado de acordo com cada projeto)
      @import "simple/components/buttons";
      @import "simple/components/cards";
      @import "simple/components/header";

      // Utilities
      @import "simple/utilities/effects";
      @import "simple/utilities/utilities";
      @import "simple/utilities/selo";
      @import "simple/utilities/spaces";
      @import "simple/utilities/print";

Envolvedores

Coisas que envolvem as outras

o-quintal

o-casa-p

o-casa-m

o-casa-g

o-casa-gg

o-casa-total

o-flex

Grid

codigo

12

1

11

2

10

3

9

4

8

5

7

6

▲ Subir

Tipografia

Letras

Títulos

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body copy

The global font-size is 16px or 1rem with a line-height of 1.6 or 25.6px. This is applied to the body and all paragraphs. Paragraphs also recive a bottom margin of 3rem.

Emphasis

You can use different html tags to emphasis your text.

Strong
Italic
Underline
~~Strike~~
Small

Blockquotes

Blockquotes are used to label text that is quoted from another source.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
— Someone famous in Iguaba

▲ Subir

Pre e code

You can use the <code> tag to wrap text that represents computer code. By default <code> is a inline element. If you need a block of code wrap the <code> tag within the <pre> element.

        .test-class {
          color: red;
          }

<pre><code>
        .test-class {
          color: red;
        }
      </code></pre>

Tem um modificador de classe .code-highlight avaliable.

var x = 10;

<code class="code-highlight">
      var x = 10;
      </code>

var x = 10;

<pre><code class="code-highlight">
      var x = 10;
      </code></pre>

▲ Subir

Lista

You can use the default <ul>, <ol> and <dl> lists.

Unordered list

Item #1
Item #2

Ordered list

Item #1
Item #2

Descriptive list

Item #1: Description

Com os seguintes modificadores você muda a aparência da lista.

Inline list

Item #1
Item #2
Item #3

Sem padding

Item #1
Item #2
Item #3

Sem bullet

Item #1
Item #2
Item #3

Bullet da brand

Item #1
Item #2
Item #3

▲ Subir

FORMULÁRIO

Esse é o formulário básico. Você pode adicionar classes ao HTML para decorar seu formulário com bordas e backgrounds.

▲ Subir

Tabelas

Estilos de tabelas disponíveis.

Tabela simples

#	Name	Email
1	John Doe	john@doe.com
2	Leanne Graham	sincere@april.biz
3	Ervin Howell	shanna@melissa.tv

Striped table

#	Name	Email
1	John Doe	john@doe.com
2	Leanne Graham	sincere@april.biz
3	Ervin Howell	shanna@melissa.tv

Hover rows

#	Name	Email
1	John Doe	john@doe.com
2	Leanne Graham	sincere@april.biz
3	Ervin Howell	shanna@melissa.tv

▲ Subir

Botões

Você pode usar o botão base e personalizar a partir dele ou personalizar os botões predefinidos para o seu projeto. Eles tem 3 tamanhos diferentes + largura total e estilo fantasma.

Botões simples

Botão Fantasma - duas versões

O HTML:

<button id="fakeblur" class="c-button c-g c-tres u-shadow-m u-border-brand-1 u-txt-brand-1">
        button msg
        </button>

O HTML:

<div class="u-center buttons-bg">
        <button id="fakeblur" class="c-button c-g c-tres u-shadow-m u-border-brand-1 u-txt-brand-1">
        button msg
        </button>
        </div>

E o CSS:

.buttons-bg{
        background: url('https://i.imgur.com/BtGO8LR.jpg');
        //o blur tbm funciona com bg colorido: 
        //background-color: blue;
        }
        #fakeblur::before {
        background: url('https://i.imgur.com/BtGO8LR.jpg') 50%;
        animation: rotateBgReverse 5s 1;
        }
        #fakeblur {
        background: rgba(255, 255, 255, .3);
        position: relative;
        overflow: hidden;
        &::before {
          content: '';
          margin: -35px;
          animation: rotateBg 5s 1;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          filter: blur(7px);
          z-index: -1;
        }
        &#fakeblur:hover{filter: blur(none);background-color: white;}
        }

▲ Subir

Selecionadores

codigo

Checkboxes

First checkbox

Second checkbox

Disabled

Disabled & checked

Radio buttons

First radio

Second radio

Disabled

Disabled & checked

Select boxes

▲ Subir

Utilitários

Comet provides a couple of useful utilities to boost your productivity.

Text

Left aligned text.

<p class="u-text-left">Left aligned text.</p>

u-Center aligned text.

<p class="u-text-u-center">u-Center aligned text.</p>

Right aligned text.

<p class="u-text-right">Right aligned text.</p>

This text is loud.

<p>This text is <span class="u-text-loud">loud</span>.</p>

This text is quiet.

<p>This text is <span class="u-text-quiet">quiet</span>.</p>

This text is highlighted.

<p>This text is <span class="u-text-highlight" >highlighted</span>.</p>

Position

This div is left aligned.

<div class="u-pos--left" style="width: 100px;">This div is left aligned.</div>

This div is right aligned.

<div class="u-pos--right" style="width: 100px;">This div is right aligned.</div>

This div is horizontal u-centered.

<div class="u-pos--u-center" style="width: 100px;">This div is horizontal u-centered.</div>

This div is horizontal and vertical u-centered (in it's container).

<div style="position: relative; height: 200px;">
    <div class="u-pos--u-center-u-center">This div is horizontal and vertical u-centered (in it's container).</div>
  </div>

Float

This paragraph floats to the left.

<p class="u-float--left">This paragraph floats to the left.<p>

This paragraph floats to the right.

<p class="u-float--right">This paragraph floats to the right.<p>

The class .u-clearfix clears all floats.

Left

Right

<div class="u-clearfix">
  <div class="u-float--left">Left</div>
  <div class="u-float--right">Right</div>
  <div>

Visibility

This text is hidden on large devices.

<p class="u-hidden--l">This text is hidden on large devices.</p>

This text is hidden on medium devices.

<p class="u-hidden--m">This text is hidden on medium devices.</p>

This text is hidden on small devices.

<p class="u-hidden--s">This text is hidden on small devices.</p>

Conta também com o seguinte:


    .u-inline {display: inline;}
    .u-inline-block {display: inline-block;}
    .u-block {display: block;}

    .u-fixed {
        position: fixed;
        top: 0;
        z-index: 999;
    }
    .u-stick {
        position:sticky;
        top: 0;
        z-index: 999;
    }
    .u-u-center {
        text-align: u-center;
        align-content: u-center;
        align-items: u-center;
        justify-content: u-center;
        justify-items: u-center;
    }

▲ Subir

Decorativos

Aqui é o espaço onde escrever o código usado para sobrescrever outros e decorar. Como linha de separação e cor de fonte.

Horizontal lines

para dividir seções é só usar a tag html hr.

<hr />

<hr class="small" />

Selo

Essas são as classes chamadas de selo. Elas sobrescrevem outras e devem ser criadas, baseadas no style guide definido, antes do ínico da escrita do código a cada projeto diferente:


        //Tamanho da fonte
        .fs10{font-size: 1.0rem;}
        //Família da fonte
        .ff-thin{font-family: 'sairathin' !important;}
        // Cor da fonte
        .fc-rosa{color: $rosa;}
        //Borda
        .b-p{border:1px solid pink;}
        //Background
        .bg-cinza{background-color:$cinza !important;}
        //Combinantes
        .f-azul--bg-cinza-s{
        color: $azul;
        background-color: $cinza-suave;
}

▲ Subir

Suporte

Eu pretendo usar o autoprefixer para tornar o Prelúdio compatível com mais navegadores. Ele atualmente é compatível com:

Chrome
Firefox