(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";
Coisas que envolvem as outras
codigo
Letras
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.
You can use different html tags to emphasis your text.
StrongBlockquotes 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
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>
You can use the default <ul>
, <ol>
and <dl>
lists.
Com os seguintes modificadores você muda a aparência da lista.
Esse é o formulário básico. Você pode adicionar classes ao HTML para decorar seu formulário com bordas e backgrounds.
Estilos de tabelas disponíveis.
# | Name | |
---|---|---|
1 | John Doe | john@doe.com |
2 | Leanne Graham | sincere@april.biz |
3 | Ervin Howell | shanna@melissa.tv |
# | Name | |
---|---|---|
1 | John Doe | john@doe.com |
2 | Leanne Graham | sincere@april.biz |
3 | Ervin Howell | shanna@melissa.tv |
# | Name | |
---|---|---|
1 | John Doe | john@doe.com |
2 | Leanne Graham | sincere@april.biz |
3 | Ervin Howell | shanna@melissa.tv |
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.
<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 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>
.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;}
}
codigo
Comet provides a couple of useful utilities to boost your productivity.
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>
<div class="u-pos--left" style="width: 100px;">This div is left aligned.</div>
<div class="u-pos--right" style="width: 100px;">This div is right aligned.</div>
<div class="u-pos--u-center" style="width: 100px;">This div is horizontal u-centered.</div>
<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>
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.
<div class="u-clearfix">
<div class="u-float--left">Left</div>
<div class="u-float--right">Right</div>
<div>
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;
}
Aqui é o espaço onde escrever o código usado para sobrescrever outros e decorar. Como linha de separação e cor de fonte.
para dividir seções é só usar a tag html hr
.
<hr />
<hr class="small" />
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;
}
Eu pretendo usar o autoprefixer para tornar o Prelúdio compatível com mais navegadores. Ele atualmente é compatível com: