//https://teutonic.co //https://github.com/inuitcss/inuitcss //https://marcbruederlin.github.io/comet/ //https://minicss.org

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-p
o-casa-m
o-casa-g
o-casa-gg
o-casa-total
o-flex
o-flex

Grid

codigo

12
1
11
2
10
3
9
4
8
5
7
6
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
  1. Item #1
  2. 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.

Entre em contato

▲   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

Radio buttons

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