Versão 2.0.7
2014/06/26
O que corrigimos
- Cores no heading do Collapse #656.
- Ajuste no tracking de eventos quando em Tour Guiado
- Ajustes no CSS para impressão
Página 1 de 2
O que corrigimos
- Cores no heading do Collapse #656.
- Ajuste no tracking de eventos quando em Tour Guiado
- Ajustes no CSS para impressão
O que tem de novo?
- Adição do limitador de data inserida no datepicker do calendário.
O que tem de novo?
- Adição de evento de "change" na linha da tabela complexa.
O que corrigimos
- Correção no nome do [objeto] do módulo de força de senha. #676
- Cores do botão danger dentro de dropdown em tabelas. #674
O que tem de novo?
- Box de informações, possui variações com a mesma estrutura além de utilizar os grids do bootstrap. #662
- Listas, possui variações com a mesma estrutura além de utilizar os grids do bootstrap. #97
O que corrigimos
- A página ativa da paginação se comporta igual sendo link ou span #657
- Contraste de cor no hover/focus em links com a classe btn-default #655
- Layout de input com elemento força da senha.
O que tem de novo?
- Inicialização de módulos com escopo de DOM #579
- Cobertura de testes finalizada
O que corrigimos
- Testes de accessibilidade que quebravam no CI (travis) #490
Limpeza de código
- Código de carrossel que não estava sendo usado
Adições
- Tabelas complexas, com ações excluir, editar, visualizar
- Função javascript para formulários como texto
- Função javascript para formulários desabilitados
- Templates JST de botões, formulários e modais.
- Testes Jasmine de Tabelas
- Testes Jasmine de Formulários
- Estilo de página de confirmação
Correções
- #628: Ajuste do select customizado no android.
- #629: Ajuste de z-index no mobile.
- #630: Alerta colado no menu em mobile.
A versão 2.0 do Locaweb Style é uma versão importante por vários motivos. Vamos destacar a seguir os dois principais. Mas sugiro que você leia atentamente as modificações que fizemos logo depois deste texto.
A primeira grande modificação é que os times de UX e Front-end estão trabalhando realmente juntos para planejar todos os novos elementos e módulos. Cada módulo é planejado pelas duas equipes em reuniões regulares, onde são discutidos tanto a versão mobile, quanto a versão desktop. Tirando o Foundation, não conheço outro lugar onede há duas equipes praticamente dedicadas ao desenvolvimento de um framework público.
A segunda grande modificação é que o Locaweb Style agora é Responsivo. Todos os elementos são pensados primeiro para pequenas telas, depois para telas maiores. Estamos levando bem a sério essa metodologia. Isso tem causado alguns debates interessantes e temos aprendido bastante. Na verdade é bem mais que Responsivo. Temos princípios de adaptação a nível de elemento. Isso quer dizer que modificamos alguns elementos para que mudem em determinados contextos.
Não achamos que a versão mobile de algum produto sirva apenas para consulta de informações, pelo contrário, nosso alvo é que o cliente consiga fazer 90% das tarefas em todos os dispositivos, não importa qual seja. Esse é o verdadeiro objetivo do Mobile First, adaptive web design e responsive.
Nas próximas versões haverão mudanças drásticas na estrutura e layout. Queremos produzir um layout mais uniforme entre os dispositivos. Não acreditamos em um layout diferente para cada aparelho. Queremos que o cliente não sinta muita diferença entre as versões e que ele tenha uma curva de aprendizado mais branda entre as versões mobile e desktop. Nossa primeira ideia é manter as duas versões: clássica e a nova estrutura e estamos trabalhando para manter as duas estruturas no código. Teremos mais informações nos próximos meses.
Estamos também preparando uma GEM para facilitar a utilização do Locaweb Style pelos desenvolvedores back-end. Essa GEM também nos dará algum controle para atualizar o código dos projetos sem tanto impacto.
Abaixo, segue o Changelog com as mudanças mais importantes que fizemos. Qualquer coisa, comente!
A segunda versão do Locastyle está usando o Bootstrap 3.0. Nessa nova versão o Bootstrap mudou praticamente todo o HTML e CSS. Aproveitamos essa mudança do Bootstrap para iniciar a versão 2 do Locastyle. Por esse motivo muito do HTML que era usado para fazer os módulos de elementos do Locastyle mudou.
Não existe migração graciosa da versão 1.0 para a 2.0. Você vai precisar rever todos os elementos e principalmente verificar se os elementos que você usa em seus projetos já existem no versão 2.0. Estamos inserindo aos poucos novos elementos e pode ser alguns elementos antigos não entrem novamente na cartilha, por exemplo, busca avançada. Pode ser também que outros elementos voltem, mas totalmente remodelados.
É muito importante que você leia como migrar do Bootstrap 2 para 3.
Cobrimos nossas funções com Jasmine. Cada módulo agora é testado e nenhum script é produzido sem termos criado testes antes (claro, na medida do possível. :-)
Dessa maneira conseguimos garantir que erros básicos não aconteçam e a coordenação de novas funções se torna mais simples de manter.
Reestruturamos o Javascript modularizando as funções e adequando o padrão de escrita do Javascript sob o padrão Revealing Module do Christian Heilmann, melhorarando a organização dos arquivos, funções, performance e diminuir a chance de erros e conflitos, adotamos o Revealing Module Pattern
As vantagens desse pattern são: organização, clareza, performance, expõe publicamente apenas as funções e variáveis que se deseja e namespace único evitando sobrescrever métodos facilmente.
Leia mais sobre ele no livro do Addy Osmani.
Locaweb Style é Mobile First. Os designers começaram a desenhar o novo layout pensando primeiro em Mobiles e somente depois para Desktops.
Ao produzir, fizemos a mesma coisa. Sempre escrevemos primeiro para Mobiles para depois escrevemos a versão desktop. Controlamos as media queries especificamente para cada módulo.
Para facilitar o nosso desenvolvimento e também os desenvolvedores que estiverem usando o nosso framework, sempre que a página é carregada, verificamos o tamanho da tela do usuário e inserimos classes na tag HTML. As classes são: .media-mobile, .media-tablet, .media-desk, .media-desk-lg.
Assim fica simples de customizar algo específico para cada uma das viewports. Existem alguns elementos do Bootstrap que extendemos a responsividade, como as Tabs, que viram um menu dropdown em celulares. Mobile First Rulez.
O Locaweb Style não é exatamente Responsivo. Existem alguns gaps ao fazer um layout responsivo que não são facilmente resolvidas. Por exemplo, quando há a necessidade de mudança de elementos para se adaptarem a determinados dispositivos. Você entrega exatamente o que o usuário precisa ver, da forma que ele precisa ver, naquele tipo de dispositivo. Um exemplo clássico é quando você precisa transformar um menu em um selectbox (combobox).
Não há a necessidade de detectar via back-end, mas essa prática também é possível e é adotada em algumas empresas. Mas se você fizer um bom trabalho de estrutura HTML, o DOM mudará muito pouco e você terá poucas interferências do Javascript para mudar elementos.
Tínhamos muitos problemas, principalmente em produtos internos, sobre como implementar novos elementos, qual o fluxo de criação e produção desses elementos, seus fluxos e interações. Fechamos um padrão de desenvolvimento juntamente com UX para melhorar a criação e manutenção dos elementos existentes e também de novos elementos.
O Locaweb Style v1 foi criado de acordo com a necessidade de cada projeto. Estávamos numa fase aqui na Locaweb onde os painéis estavam sendo refeitos. Por isso cada elemento ou interação era feita somente quando surgia uma demanda específica. Não houve um longo planejamento para a criação de cada elemento ou cada interação. Sem contar que cada membro de UX decidia uma interação diferente para cada painél.
Na versão 2 sentamos junto com o pessoal de UX para acertarmos essas arestas. Com a bagagem de conhecimento que tivemos na primeira versão, sabíamos quais componentes se tornaram obsoletos e quais foram realmente usados. Por isso, na versão 2 conseguimos manter uma grande simplicidade na quantidade de elementos e principalmente nas suas interações.
Passamos a usar o GitHub em vez de manter o projeto internamente. Agora todas as issues e histórico de commits e tarefas é mantido publicamente no endereço: http://github.com/locaweb/locawestyle.
Já temos 37 forks de desenvolvedores interessados e recebemos várias sugestões de outros desenvolvedores que viram o projeto que gostaram do que fizemos. Fique à vontade para nos ajudar a manter esse framework.
Criamos algumas páginas de exemplos para facilitar a produção de novas páginas e para mostrarmos quais as possibilidades e combinações de elementos e estruturas. Você pode ver estes exemplos aqui.
Também mudamos um pouco a cartilha de elementos, que reúne todos os elementos encontrados no Locastyle em apenas uma página. Dessa forma é simples de identificar cada elemento e testá-los quando necessário.
A ideia é que você consiga encontrar exemplos de estruturas básicas para montar seus próprios projetos e verificar as possibilidades aos juntar os componentes em uma mesma página.
Para você que ainda precisa dar suporte para a primeira versão do Locaweb Style (como nós), a documentação se encontra nesse link.
Nós ainda estamos atualizando elementos e dado suporte para produtos internos. Quando esse suporte vai acabar? Quando não tivermos mais que lidar com essa versão aqui dentro da Locaweb. Até lá, sugiro que você migre quando puder seus produtos para a versão nova do Locaweb Style.
Maneiras para usar o Locastyle:
Adições
- #415: Implementado o layout do select personalizado, veja exemplo na documentação.
- Adicionado o atributo disabled na tag form para desabilitar a edição de todos os inputs de um form.
- Adicionado a classe .ls-form-text na tag form para exibir um formulário como texto.
- Adicionada função locastyle.forms.formAsText('#form') para alternar entre formulários normais/texto com o atributo data-toggle-form-text="#id-form" em um link.
- Adicionada função locastyle.forms.formDisable('#form', true) para alternar entre formulários editaveis/nã0 editáveis com o atributo data-toggle-form-edit="#id-form" em um link.
- Adicionado testes para o dom_scope, select2 e collapses.
Documentação
- Foi adicionada uma página na nossa documentação referente a nova adição do select personalizado.
- Em formulários foi adicionado em validação de campos a customização para select personalizados
- Update da documentação "Desabilitando campos de formulário"
- Inserida documentação de "Formulários como texto"
Adições
- #487: Adicionando nova tela de login da locaweb no locastyle, veja exemplo na documentação.
Melhorias e correções
- Tracking de eventos nos selects
- #486: Arrumando URL do edge e versão atual no config.
- Atualizando a versão do jquery de 1.10.2 para 2.0.3, sem suporte a ie 7/8.
- Ativação/Desativação de botões dentro de .btn-group.
- Na tela de Login, foi inserido um div pai chamado .box-parent-login para dar mais flexibilidade em customizações.
- e6d17dc37a Fixando footer sempre no bottom da página.
- c3e5dc7d93 Barra da Locaweb foi excluída do projeto.
- ef7a14bf85 Antes o Select2 só podia ser aplicado se o select estivesse dentro de um form, agora retiramos essa restrição.
- 7db75fe0b2 Correção da função que insere classes do Breakpoints na tag HTML.
Documentação
- Atualizamos as versões do Bootstrap e Locaweb Style no texto de COMO USAR.