WAVE CSS
O Wave CSS é o 1º framework específico para sites de comércio eletrônico. Sua implementação é simples e rápida, sendo compatível com os principais navegadores do mercado.
Clique aqui para acessar uma loja modelo de exemplo.
O Wave também é utilizado no design responsivo de lojas que utilizam o Fastcommerce.
Utilize o Wave CSS com o jQuery e outros frameworks de sua preferência nos seus projetos de e-commerce. Não existem restrições para combinar o Wave com frameworks javascript tais como o AngularJS e o Ember.js.
DOWNLOAD!
Versão V2.15.03
Faça aqui o download da última versão. Comece a desenvolver hoje com o framework mais leve do mercado!
COMECE AGORA!
Após fazer o download, insira a seguinte referência ao Wave CSS dentro da tag <head></head> do arquivo HTML:
<!-- Wave CSS Framework para e-commerce -->
<link rel="stylesheet" href="https://www.SeuDominio.com.br/wave.css">
Se você utiliza o Fastcommerce, não é necessário fazer o download do Wave CSS. Basta insirir a URL abaixo no arquivo BarraTopo.htm:
<!-- Wave CSS Framework para e-commerce -->
<link rel="stylesheet" href="/wave/V2/wave.css">
Versão Minificada:
<!-- Wave CSS Framework para e-commerce -->
<link rel="stylesheet" href="https://www.SeuDominio.com.br/waveMin.css">
<!-- Wave CSS Framework para e-commerce -->
<link rel="stylesheet" href="/wave/V2/waveMin.css">
GRID
O Wave CSS é baseado em grid de 12 colunas. As dimensões foram definidas com base nas resoluções de tela mais utilizadas por dispositivos desktop, notebook, tablet e mobile.
Não se preocupe em criar novas Media Queries. Todas as quebras importantes do mercado já estão disponíveis no Wave.
Dimensões:
- xLarge (min-width: 1440px)
- mLarge (min-width: 1200px)
- Large (min-width: 1024px)
- Medium (min-width: 768px)
- Small (max-width: 640px)
HTML
<!-- Criar linha -->
<div class="row"><!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-12 col-medium-12 col-large-12 col-xlarge-12 col-full-12">12</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-10 col-medium-10 col-large-10 col-xlarge-10 col-full-10">10</div>
<div class="col-small-2 col-medium-2 col-large-2 col-xlarge-2 col-full-2">2</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-6 col-medium-6 col-large-6 col-xlarge-6 col-full-6">6</div>
<div class="col-small-6 col-medium-6 col-large-6 col-xlarge-6 col-full-6">6</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
<div class="col-small-1 col-medium-1 col-large-1 col-xlarge-1 col-full-1">1</div>
</div>
</div>
Renderizado
12
10
2
6
6
1
1
1
1
1
1
1
1
1
1
1
1
SMALL - MOBILE
Utilize a classe com o prefixo col-small
HTML
<!-- Criar linha -->
<div class="row"><!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-10">10</div>
<div class="col-small-2">2</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-6">6</div>
<div class="col-small-6">6</div>
</div>
</div>
MEDIUM - TABLET
Utilize a classe com o prefixo col-medium
HTML
<!-- Criar linha -->
<div class="row"><!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-medium-10">10</div>
<div class="col-medium-2">2</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-medium-6">6</div>
<div class="col-medium-6">6</div>
</div>
</div>
LARGE - NOTEBOOK
Utilize a classe com o prefixo col-large
HTML
<!-- Criar linha -->
<div class="row"><!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-large-10">10</div>
<div class="col-large-2">2</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-large-6">6</div>
<div class="col-large-6">6</div>
</div>
</div>
MLARGE - NOTEBOOK & DESKTOP
Utilize a classe com o prefixo col-large
HTML
<!-- Criar linha -->
<div class="row"><!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-mlarge-10">10</div>
<div class="col-mlarge-2">2</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-mlarge-6">6</div>
<div class="col-mlarge-6">6</div>
</div>
</div>
XLARGE - DESKTOP
Utilize a classe com o prefixo col-xlarge
HTML
<!-- Criar linha -->
<div class="row"><!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-xlarge-10">10</div>
<div class="col-xlarge-2">2</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-xlarge-6">6</div>
<div class="col-xlarge-6">6</div>
</div>
</div>
BLOCKGRID
O BlockGrid permite dividir os elementos em números pares ou ímpares, não importa as dimensões das telas.
HTML
<!-- Criar linha -->
<div class="row"><!-- Criar Container Principal -->
<div class="MainContainer"><!-- Criar BlockGrid -->
<ul class="small-BlockGrid-1 medium-BlockGrid-2 large-BlockGrid-3 mlarge-BlockGrid-4 xlarge-BlockGrid-4"><li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
Renderizado
1
2
3
4
5
6
GRID - COLLAPSE
O Collpase permite criar uma Grid removendo o Gutter de 10px de espaço entre uma coluna e outra.
HTML
<!-- Criar linha -->
<div class="row collapse"><!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-12 col-medium-12 col-large-12 col-xlarge-12 col-full-12">12</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-10 col-medium-10 col-large-10 col-xlarge-10 col-full-10">10</div>
<div class="col-small-2 col-medium-2 col-large-2 col-xlarge-2 col-full-2">2</div>
</div>
<!-- Criar Container Principal -->
<div class="MainContainer"><div class="col-small-6 col-medium-6 col-large-6 col-xlarge-6 col-full-6">6</div>
<div class="col-small-6 col-medium-6 col-large-6 col-xlarge-6 col-full-6">6</div>
</div>
</div>
Renderizado
12
10
2
6
6
W-INTERCHANGE
Este recurso permite carregar imagens de acordo com as media queries desejadas.
Isto permite, por exemplo, carregar imagens menores em mobile, deixando a página mais leve.
HTML
<!-- W-Interchange -->
<img id="img1" WavE-interchange="[none, (max-width: 479px)], [../IMAGES/IMGMobile.jpg, (min-width:480px) and (max-width:1023px)],[../IMAGES/IMGtablet.jpg, (max-width: 1365px) and (min-width: 1024px)],
[../IMAGES/IMGDesktop.jpg,(min-width: 1366px)]"
fallback-src="../IMAGES/IMGDeafult.jpg" DisableLazyLoad>
O W-Interchange é um recurso exclusivo para lojas virtuais hospedadas no Fastcommerce.
Para ativar o W-Interchange, basta incluir a seguinte linha no rodapé ou na página htm que utilizará o recurso
<!-- W-Interchange -->
<script>FCLib$.onReady(FCLib$.execWaveInterchange);</script>Painel
O Painel permite criar seções na página dando ênfase a um conteúdo.
Versão: Painel Simples
HTML
<!-- Painel Simples -->
<div class="panel-simple radius"><p>Esse é um Painel Simples</p>
</div>
Renderizado
Esse é um Painel Simples
Versão: Painel Avançado
HTML
<!-- Painel Avançado -->
<div class="panel-content rounded"><div class="panel-head">Head</div>
<div class="panel-body">
<p>Esse é um Painel Avançado</p>
</div>
<div class="panel-footer">Footer</div>
</div>
Renderizado
Esse é um Painel Avançado
BOTÕES
Sua página precisa de um "call to action", seja Comprar, receber E-mails, entrar em Contato.
Os botões estão prontos para serem utilizados e com um design sólido,
Versão: Botões Input
HTML
<!-- Botões - Input -->
<input type="submit" class="btn btn-buy" value="Comprar"><input type="submit" class="btn btn-sent" value="Enviar">
<input type="submit" class="btn btn-warning" value="Alerta">
<input type="submit" class="btn btn-error" value="Erro">
Renderizado
Versão: Botões HREF
HTML
<!-- Botões - href -->
<a href="#" class="btn btn-buy radius">Comprar</a><a href="#" class="btn btn-sent radius">Enviar</a>
<a href="#" class="btn btn-warning radius">Alerta</a>
<a href="#" class="btn btn-error radius">Erro</a>
Renderizado
Versão: Botões Ghost
HTML
<!-- Botões - Ghost -->
<a href="#" class="btn btn-ghost-black radius">Botão Ghost</a><a href="#" class="btn btn-ghost-white radius">Botão Ghost</a>
Renderizado
TEXT - ALIGN
Faça o alinhamento dos textos com as três classes abaixo.
HTML
<!-- Text Center -->
<p class="text-center">Text center</p><!-- Text Left -->
<p class="text-left">Text left</p><!-- Text Right -->
<p class="text-right">Text right</p>O tamanho das fontes utiliza a unidade rem, que é conhecida como a "unidade perfeita".
HTML
<!-- Font-12 -->
<p class="font-12">Tamanho 12</p><!-- Font-14 -->
<p class="font-14">Tamanho 14</p><!-- Font-16 -->
<p class="font-16">Tamanho 16</p><!-- Font-18 -->
<p class="font-18">Tamanho 18</p><!-- Font-20 -->
<p class="font-20">Tamanho 20</p><!-- Font-22 -->
<p class="font-22">Tamanho 22</p><!-- Font-24 -->
<p class="font-24">Tamanho 24</p><!-- Font-26 -->
<p class="font-26">Tamanho 26</p><!-- Font-28 -->
<p class="font-28">Tamanho 28</p><!-- Font-30 -->
<p class="font-30">Tamanho 30</p>