Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Informações iniciais

Iniciando seu desenvolvimento com Locaweb Style

Começando do zero? Comece por aqui

Se você quiser um começo ligeiro, copie o código do nosso boilerplate e cole em um arquivo HTML vazio. Com ele você já terá a estrutura inicial com tudo o que precisa para usar o Locaweb Style. Se quiser começar do zero, siga lendo o resto da página.

Veja o código de Inicial

Baixando o boilerplate via NPM

O Eduardo Malherbi fez um módulo para NPM que instala a última versão do LocaStyle e também o HTML inicial, que serve como base para você começar seu projeto. Para instalar é simples:

1
2
3
4
5
    npm install -g yo
    npm install -g generator-locawebstyle
    mkdir my-new-project
    cd my-new-project
    yo locawebstyle



Use os assets pelo nosso servidor

Nós disponibilizamos as versões do Locaweb Style em nosso servidor de alta disponibilidade para qualquer desenvolvedor. Basta usar os links abaixo em seu projeto. A única de dependência é a jQuery.

1
2
3
4
5
<!-- Coloque o CSS no seu HEAD -->
<link rel="stylesheet" type="text/css" href="//assets.locaweb.com.br/locastyle/3.10.1/stylesheets/locastyle.css">

<!-- Coloque o JS no seu FOOTER, logo depois da jQuery -->
<script src="//assets.locaweb.com.br/locastyle/3.10.1/javascripts/locastyle.js"></script>

Se você quiser usar a versão mais atual que existe, use os assets em edge. Veja abaixo um exemplo:

1
2
3
4
5
<!-- Coloque o CSS no seu HEAD -->
<link rel="stylesheet" type="text/css" href="//assets.locaweb.com.br/locastyle/edge/stylesheets/locastyle.css">

<!-- Coloque o JS no seu FOOTER, logo depois da jQuery -->
<script src="//assets.locaweb.com.br/locastyle/edge/javascripts/locastyle.js"></script>

Sempre que há uma atualização, esses assets são atualizados automaticamente.

Baixe os assets usando Bower

Para usar os assets do Locaweb Style pelo Bower é bem simples:

1
bower install locawebstyle

Após a instalação, basta chamar os arquivos do diretório bower_components:

1
2
  <link href="bower_components/locawebstyle/dist/stylesheets/locastyle.css" rel="stylesheet" type="text/css">
  <script src="bower_components/locawebstyle/dist/javascripts/locastyle.js"></script>

Caso queira alterar o diretório que o bower vai instalar o framework e suas dependências, crie um arquivo .bowerrc e coloque o conteúdo abaixo:

1
2
3
{
  "directory": "assets/components"
}

E depois basta chamar os arquivos:

1
2
  <link href="assets/components/locawebstyle/dist/stylesheets/locastyle.css" rel="stylesheet" type="text/css">
  <script src="assets/components/locawebstyle/dist/javascripts/locastyle.js"></script>

Download da versão mais atual

Se você quiser baixar os assets para usar localmente ou em projetos offline, basta clicar no botão abaixo e baixe a versão estável mais atual publicada.

Baixar versão atual

Pelo GitHub

Se você quiser fuçar no código ou contribuir esse é o melhor caminho. Nosso código está totalmente disponível no GitHub e você pode fazer o download desse código pelos meios abaixo:

Clone ou Fork pelo GitHub

Faça um fork no GitHub e contribua.

Ir para GitHub

Baixe o repositório master

Baixe branch master direto do GitHub.

Baixar

A documentação

Nossa documentação vai ser o seu guia para aprender como funciona o Locaweb Style. Nós sempre nos esforçamos para que toda a implementação e o uso dos elementos seja tão fácil quanto um copy and paste.

CSS

Aprenda sobre o GRID, Ícones e nossas Classes Funcionais.

CSS

Componentes

Conheça todos os componentes que fazem parte do Locaweb Style.

Ir para Componentes

Formulários

Saiba como manipular os campos e grupos de formulários com o Locaweb Style.

Formulários