Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
O documento discute a construção de layouts de sites com CSS. Ele apresenta os principais tópicos do CSS como inserção, seletores, propriedades e box model. Também demonstra na prática como estilizar um documento XHTML usando CSS e discute diretrizes e novidades do CSS3.
O documento discute a importância de padronização e reutilização no desenvolvimento front-end. Apresenta diferentes abordagens como grids, frameworks e metodologias como OOCSS, SMACSS e BEM para criar códigos reutilizáveis. Defende a criação de um arquivo de standards próprio com classes globais ao invés de depender totalmente de bibliotecas externas.
Este documento fornece um resumo de um treinamento sobre CSS (Cascading Style Sheets). Ele discute conceitos como separação de responsabilidades entre HTML, CSS e JavaScript, tipos de seletores, unidades de medida e propriedades CSS. O documento também aborda tópicos como media queries, fontes personalizadas e compatibilidade entre navegadores.
SMACSS - Como estruturar CSS para projetos em larga escalaRafael Lyra
O documento descreve o SMACSS, um styleguide para estruturar CSS em projetos de larga escala. Os 5 princípios do SMACSS são categorizar o CSS em bases, layout, módulos, estados e temas, usar uma convenção de nomenclatura com prefixos e documentação, desacoplar o CSS do HTML, melhorar a semântica e usar design baseado em estados. O SMACSS também integra bem com JavaScript, modificando estados sem estilos inline.
O documento resume três padrões de arquitetura CSS - OOCSS, SMACSS e BEM. OOCSS foca em separar estrutura e apresentação, SMACSS organiza CSS em módulos para reutilização e manutenção, e BEM nomeia classes de forma consistente para componentes reutilizáveis.
Vanessa Martinez Tonini apresenta um minicurso sobre CSS com as seguintes informações essenciais:
1) Apresenta sua experiência profissional e objetivos do minicurso de fornecer uma introdução básica à sintaxe e aplicação do CSS.
2) Explica o que é CSS, como funciona a cascata de estilos, e ferramentas para editar arquivos CSS.
3) Demonstra exemplos básicos de como aplicar estilos de fontes, cores, fundos, links, listas e tabelas usando CSS.
SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
O documento discute a construção de layouts de sites com CSS. Ele apresenta os principais tópicos do CSS como inserção, seletores, propriedades e box model. Também demonstra na prática como estilizar um documento XHTML usando CSS e discute diretrizes e novidades do CSS3.
O documento discute a importância de padronização e reutilização no desenvolvimento front-end. Apresenta diferentes abordagens como grids, frameworks e metodologias como OOCSS, SMACSS e BEM para criar códigos reutilizáveis. Defende a criação de um arquivo de standards próprio com classes globais ao invés de depender totalmente de bibliotecas externas.
Este documento fornece um resumo de um treinamento sobre CSS (Cascading Style Sheets). Ele discute conceitos como separação de responsabilidades entre HTML, CSS e JavaScript, tipos de seletores, unidades de medida e propriedades CSS. O documento também aborda tópicos como media queries, fontes personalizadas e compatibilidade entre navegadores.
SMACSS - Como estruturar CSS para projetos em larga escalaRafael Lyra
O documento descreve o SMACSS, um styleguide para estruturar CSS em projetos de larga escala. Os 5 princípios do SMACSS são categorizar o CSS em bases, layout, módulos, estados e temas, usar uma convenção de nomenclatura com prefixos e documentação, desacoplar o CSS do HTML, melhorar a semântica e usar design baseado em estados. O SMACSS também integra bem com JavaScript, modificando estados sem estilos inline.
O documento resume três padrões de arquitetura CSS - OOCSS, SMACSS e BEM. OOCSS foca em separar estrutura e apresentação, SMACSS organiza CSS em módulos para reutilização e manutenção, e BEM nomeia classes de forma consistente para componentes reutilizáveis.
Vanessa Martinez Tonini apresenta um minicurso sobre CSS com as seguintes informações essenciais:
1) Apresenta sua experiência profissional e objetivos do minicurso de fornecer uma introdução básica à sintaxe e aplicação do CSS.
2) Explica o que é CSS, como funciona a cascata de estilos, e ferramentas para editar arquivos CSS.
3) Demonstra exemplos básicos de como aplicar estilos de fontes, cores, fundos, links, listas e tabelas usando CSS.
O documento introduz os conceitos básicos de CSS, incluindo sua história, definição, vantagens, sintaxe, como inserir folhas de estilo, agrupar elementos e algumas propriedades comuns. É dividido em seções tratando de tópicos como histórico, definição, por que usar CSS, vantagens, sintaxe básica, como inserir folhas de estilo externas, internas e inline, agrupando elementos usando classes, ID e elementos como <span> e <div> e por fim exemplificando propriedades como background, line-
As Folhas de Estilos (CSS) permitem formatar documentos HTML de maneira separada do conteúdo, definindo propriedades como fontes, cores, tamanhos e espaçamentos. CSS é usado para aplicar estilos de forma flexível a elementos HTML em diferentes meios como tela, impressão ou leitura.
O documento discute Cascading Style Sheets (CSS), que definem a aparência de páginas web. CSS permite aplicar estilos personalizados a elementos de forma flexível. Existem três formas de aplicar estilos: local (inline), incorporado (embedded) e externo (linked). A ordem de precedência é local > incorporado > externo.
O documento resume os principais conceitos de CSS (Cascading Style Sheets), incluindo sua história, propósito, tipos de vinculação de folhas de estilo, sintaxe básica de regras CSS e diferentes seletores como classe e ID.
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
O documento discute o nascimento e uso do CSS, destacando que: (1) surgiu para permitir a separação entre conteúdo e formatação em páginas web; (2) oferece vantagens como manutenção simplificada e compatibilidade, porém (3) também apresenta desvantagens como incompatibilidade entre navegadores.
html, css e java script - renato araujoorenatoaraujo
Este documento fornece uma breve introdução sobre HTML, CSS e JavaScript. Apresenta os criadores e evolução das linguagens, características principais e boas práticas para seu uso. Sites de referência para aprendizado também são listados no final.
BEM, OOCSS, SMACSS etc. Todas estes modelos de arquitetura de CSS tem como principal objetivo reaproveitamento de código e um código bem organizado. Nestes slides, dou uma rápida introdução em alguns modelos, porque utiliza-los e em que momento ele melhor se aplica.
Curso de HTML5 com @zarathon
Aula01 - Introdução ao HTML
- Link para a video-aula : http://youtu.be/GL_ULlrwUMI
Inscrevam-se no canal para ficar sempre informado de quando sair um conteúdo novo!
Me sigam no twitter para mais informações: @zarathon
Dúvidas, críticas deixem nos comentários... Responderei a todos com muita satisfação!
O documento descreve conceitos básicos de HTML e CSS. Em 3 frases:
1) HTML é uma linguagem de marcação usada para criar páginas da web, contendo elementos como tags que formatam o conteúdo.
2) CSS permite separar a estrutura do documento HTML de sua formatação e estilo visual, definindo regras de estilo em folhas externas aplicáveis a vários documentos.
3) O documento fornece exemplos básicos de como usar tags HTML comuns e como criar regras CSS para definir propriedades de est
O documento apresenta padrões de HTML e CSS para criação de layouts e componentes de forma estruturada e semântica. É apresentado o padrão de grids para definir a estrutura do layout, minidocumentos para encapsular seções de conteúdo de forma autônoma e microsemântica para melhorar a acessibilidade e o significado do código HTML.
O documento explica o que é CSS, como ele permite maior controle sobre o design de um site sem aumentar seu tamanho. CSS é responsável por atributos tipográficos e camadas, permitindo sobreposição de texto sobre imagens. Folhas de estilo podem ser aplicadas de forma local, incorporada ou externa, e seguem uma hierarquia na aplicação dos estilos.
O documento discute padrões da web, incluindo HTML, XHTML e CSS. Ele explica como esses padrões foram criados para facilitar o desenvolvimento web e melhorar a experiência do usuário, e destaca boas práticas como usar HTML de forma semântica e separar conteúdo de apresentação usando folhas de estilo.
O documento fornece instruções para construir layouts sem tabelas utilizando tags <div> e CSS. Explica os 6 passos para criar o layout: 1) escolher os blocos, 2) nomeá-los, 3) criar a marcação HTML, 4) posicionar os blocos com CSS, 5) adicionar conteúdo, 6) criar menu dropdown. Também discute como tornar o layout responsivo e acessível em diferentes dispositivos.
1) O documento apresenta uma introdução ao HTML, incluindo elementos, atributos e estrutura básica de um documento HTML.
2) São descritos elementos como cabeçalhos, parágrafos, listas e hiperlinks, além de atributos como cores e alinhamento.
3) O documento fornece instruções sobre como editar, publicar e incluir informações em documentos HTML.
O documento introduz os conceitos básicos de CSS, incluindo sua definição como linguagem para estilos que define o layout de documentos HTML, as vantagens de usar CSS, e os três métodos para aplicar CSS em HTML. Também resume os componentes básicos de uma regra CSS, propriedades comuns como float, e aplicações como formatação de texto e elementos. Por fim, pede como exercício a criação de um site simples com HTML e CSS.
O objectivo da apresentação é apresentar num evento de 5 minutos os aspectos de arquitectura que me fascinam e que marcam a diferença.
Visa a apresentação de arquitectura contemporânea do ponto de vista de um curioso.
O documento descreve a evolução do Movimento Moderno na arquitetura, desde suas raízes nas vanguardas européias do início do século XX até sua consolidação como Estilo Internacional. Os principais movimentos que o constituíram foram o Purismo, Neoplasticismo, Bauhaus e Construtivismo Soviético, com ênfase na funcionalidade, racionalidade e uso de novos materiais. O Estilo Internacional se difundiu mundialmente após a 2a Guerra, principalmente nos arranha-céus de vidro e aço dos EUA.
O documento discute os principais conceitos de Arquitetura da Informação na Web, incluindo pesquisa de usuários, sistemas de organização, rotulação e navegação para tornar sites mais usáveis e compreensíveis para os usuários. Também aborda desafios como ambiguidade e heterogeneidade na organização da informação e a importância de testes com usuários.
O documento introduz os conceitos básicos de CSS, incluindo sua história, definição, vantagens, sintaxe, como inserir folhas de estilo, agrupar elementos e algumas propriedades comuns. É dividido em seções tratando de tópicos como histórico, definição, por que usar CSS, vantagens, sintaxe básica, como inserir folhas de estilo externas, internas e inline, agrupando elementos usando classes, ID e elementos como <span> e <div> e por fim exemplificando propriedades como background, line-
As Folhas de Estilos (CSS) permitem formatar documentos HTML de maneira separada do conteúdo, definindo propriedades como fontes, cores, tamanhos e espaçamentos. CSS é usado para aplicar estilos de forma flexível a elementos HTML em diferentes meios como tela, impressão ou leitura.
O documento discute Cascading Style Sheets (CSS), que definem a aparência de páginas web. CSS permite aplicar estilos personalizados a elementos de forma flexível. Existem três formas de aplicar estilos: local (inline), incorporado (embedded) e externo (linked). A ordem de precedência é local > incorporado > externo.
O documento resume os principais conceitos de CSS (Cascading Style Sheets), incluindo sua história, propósito, tipos de vinculação de folhas de estilo, sintaxe básica de regras CSS e diferentes seletores como classe e ID.
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
Slide da disciplina de linguagem de programação para a web do curso técnico em informática do IFPE - Campus Garanhuns. Faz uma apresentação sobre o que é o CSS, por que o utilizamos, suas vantagens, como o utilizamos e algumas de suas propriedades.
O documento discute o nascimento e uso do CSS, destacando que: (1) surgiu para permitir a separação entre conteúdo e formatação em páginas web; (2) oferece vantagens como manutenção simplificada e compatibilidade, porém (3) também apresenta desvantagens como incompatibilidade entre navegadores.
html, css e java script - renato araujoorenatoaraujo
Este documento fornece uma breve introdução sobre HTML, CSS e JavaScript. Apresenta os criadores e evolução das linguagens, características principais e boas práticas para seu uso. Sites de referência para aprendizado também são listados no final.
BEM, OOCSS, SMACSS etc. Todas estes modelos de arquitetura de CSS tem como principal objetivo reaproveitamento de código e um código bem organizado. Nestes slides, dou uma rápida introdução em alguns modelos, porque utiliza-los e em que momento ele melhor se aplica.
Curso de HTML5 com @zarathon
Aula01 - Introdução ao HTML
- Link para a video-aula : http://youtu.be/GL_ULlrwUMI
Inscrevam-se no canal para ficar sempre informado de quando sair um conteúdo novo!
Me sigam no twitter para mais informações: @zarathon
Dúvidas, críticas deixem nos comentários... Responderei a todos com muita satisfação!
O documento descreve conceitos básicos de HTML e CSS. Em 3 frases:
1) HTML é uma linguagem de marcação usada para criar páginas da web, contendo elementos como tags que formatam o conteúdo.
2) CSS permite separar a estrutura do documento HTML de sua formatação e estilo visual, definindo regras de estilo em folhas externas aplicáveis a vários documentos.
3) O documento fornece exemplos básicos de como usar tags HTML comuns e como criar regras CSS para definir propriedades de est
O documento apresenta padrões de HTML e CSS para criação de layouts e componentes de forma estruturada e semântica. É apresentado o padrão de grids para definir a estrutura do layout, minidocumentos para encapsular seções de conteúdo de forma autônoma e microsemântica para melhorar a acessibilidade e o significado do código HTML.
O documento explica o que é CSS, como ele permite maior controle sobre o design de um site sem aumentar seu tamanho. CSS é responsável por atributos tipográficos e camadas, permitindo sobreposição de texto sobre imagens. Folhas de estilo podem ser aplicadas de forma local, incorporada ou externa, e seguem uma hierarquia na aplicação dos estilos.
O documento discute padrões da web, incluindo HTML, XHTML e CSS. Ele explica como esses padrões foram criados para facilitar o desenvolvimento web e melhorar a experiência do usuário, e destaca boas práticas como usar HTML de forma semântica e separar conteúdo de apresentação usando folhas de estilo.
O documento fornece instruções para construir layouts sem tabelas utilizando tags <div> e CSS. Explica os 6 passos para criar o layout: 1) escolher os blocos, 2) nomeá-los, 3) criar a marcação HTML, 4) posicionar os blocos com CSS, 5) adicionar conteúdo, 6) criar menu dropdown. Também discute como tornar o layout responsivo e acessível em diferentes dispositivos.
1) O documento apresenta uma introdução ao HTML, incluindo elementos, atributos e estrutura básica de um documento HTML.
2) São descritos elementos como cabeçalhos, parágrafos, listas e hiperlinks, além de atributos como cores e alinhamento.
3) O documento fornece instruções sobre como editar, publicar e incluir informações em documentos HTML.
O documento introduz os conceitos básicos de CSS, incluindo sua definição como linguagem para estilos que define o layout de documentos HTML, as vantagens de usar CSS, e os três métodos para aplicar CSS em HTML. Também resume os componentes básicos de uma regra CSS, propriedades comuns como float, e aplicações como formatação de texto e elementos. Por fim, pede como exercício a criação de um site simples com HTML e CSS.
O objectivo da apresentação é apresentar num evento de 5 minutos os aspectos de arquitectura que me fascinam e que marcam a diferença.
Visa a apresentação de arquitectura contemporânea do ponto de vista de um curioso.
O documento descreve a evolução do Movimento Moderno na arquitetura, desde suas raízes nas vanguardas européias do início do século XX até sua consolidação como Estilo Internacional. Os principais movimentos que o constituíram foram o Purismo, Neoplasticismo, Bauhaus e Construtivismo Soviético, com ênfase na funcionalidade, racionalidade e uso de novos materiais. O Estilo Internacional se difundiu mundialmente após a 2a Guerra, principalmente nos arranha-céus de vidro e aço dos EUA.
O documento discute os principais conceitos de Arquitetura da Informação na Web, incluindo pesquisa de usuários, sistemas de organização, rotulação e navegação para tornar sites mais usáveis e compreensíveis para os usuários. Também aborda desafios como ambiguidade e heterogeneidade na organização da informação e a importância de testes com usuários.
O documento discute o estilo Art Deco e sua popularização em contraste com o estilo promovido pela Bauhaus. O Art Deco se consolidou como a forma que agradava o consumidor e fazia parte do gosto popular, enquanto o estilo da Bauhaus atraía uma minoria intelectual.
O documento descreve a vida e obra do arquiteto alemão Ludwig Mies van der Rohe. Ele foi um dos principais nomes da arquitetura moderna do século XX, conhecido por projetos como o Pavilhão de Barcelona e a Casa Farnsworth. Sua arquitetura primava pela simplicidade, uso de materiais modernos como vidro e aço, e espaços de uso flexível.
A Bauhaus foi uma escola de arte e design fundada na Alemanha em 1919 com o objetivo de acabar com as divisões entre as belas artes e a arte utilitária. Sob a liderança de Walter Gropius, a escola promoveu a funcionalidade, o uso de formas geométricas e cores primárias. Seus projetos de mobiliário, como a cadeira Wassily de Marcel Breuer, tornaram-se ícones do estilo internacional.
Este documento descreve a história da Bauhaus e do Estilo Internacional. A Bauhaus foi uma escola de arte e design fundada na Alemanha em 1919 que promoveu o design funcional e minimalista. O documento lista os principais professores e suas contribuições, além de exemplos de trabalhos produzidos na escola. O Estilo Internacional surgiu nas escolas suíças de design e se caracterizou pelo uso de cores, grids e tipografias sem serifas.
O documento resume a vida e obra do arquiteto alemão Ludwig Mies van der Rohe. Em três frases:
Mies nasceu na Alemanha em 1886, trabalhou com arquitetos renomados como Bruno Paul e Peter Behrens e projetou edifícios marcantes do estilo internacional como a Casa Tugendhat. Após emigrar para os EUA em 1938, Mies projetou obras icônicas como o Seagram Building e o IIT Campus, tornando-se uma das figuras mais influentes da arquitetura moderna. Sua carreira mar
O documento descreve a história da cultura e das artes da 1a Guerra Mundial até os anos 1960, focando no estilo arquitetônico internacional. Após as guerras mundiais, houve uma recuperação econômica e o surgimento de uma cultura de massas. O estilo internacional se popularizou através de exposições, congressos e arquitetos renomados como Le Corbusier e Mies van der Rohe, defendendo princípios como racionalização e padronização. A Carta de Atenas de 1933 também influenciou com
Apresentação editada pelo professor Luís Correia Cardoso no âmbito da sua formação profissional para aplicação nas actividades lectivas das disciplinas de design e artes
História do Design - Mov.Moderno.Bauhaus - Hd07Valdir Soares
A escola Bauhaus foi fundada em 1919 na Alemanha por Walter Gropius com o objetivo de unir arquitetura, artes e artesanato. A escola promovia a colaboração entre diferentes áreas artísticas e o design de produtos baratos e em série. Devido a cortes de verbas, a Bauhaus mudou-se para Dessau em 1925 onde construiu novas instalações. Em 1933, os nazistas fecharam a escola e muitos professores emigraram para outros países.
Ludwig Mies van der Rohe (1886-1969) foi um arquiteto alemão considerado um dos principais nomes da arquitetura moderna do século XX. Trabalhou com materiais como aço e vidro para criar estruturas minimalistas e espaços amplos. Projetou obras emblemáticas como o Pavilhão Alemão em Barcelona (1929) e a Casa Tugendhat na República Checa. Mudou-se para os EUA em 1937 e projetou edifícios influentes em Chicago, como o IIT Campus.
O documento discute os princípios da arquitetura moderna, incluindo a ênfase no planejamento urbano, na racionalidade da forma e na função, e na padronização. Também apresenta os trabalhos de arquitetos modernistas como Le Corbusier, Walter Gropius, Mies van der Rohe e Frank Lloyd Wright, destacando conceitos como a casa como máquina de morar e projetos emblemáticos como a Casa Farnsworth e a Casa Kaufmann.
El estilo internacional surgió en la década de 1920 como una arquitectura moderna funcionalista sin rasgos regionales. Se basaba en principios de estructuras de hormigón y acero a la vista, formas geométricas simples, plantas libres y alejamiento de la tradición. Arquitectos prominentes como Le Corbusier, Mies van der Rohe y Gropius diseñaron obras emblemáticas como la Villa Savoye, el Pabellón de Barcelona y la Casa Farnsworth que definieron este estilo universalista y racional.
El Estilo Internacional se caracteriza por su ortogonalidad, superficies lisas y pulidas sin ornamento, aspecto de ligereza y uso de hormigón armado. Surgió en la primera mitad del siglo XX como respuesta a la necesidad de nuevos tipos de edificios y por los avances en materiales como el hormigón. Sus principales exponentes fueron Le Corbusier, Mies van der Rohe y Gropius, con obras emblemáticas como la Villa Savoye, Edificio Seagram y la escuela Bauhaus.
O documento discute o uso de pré-processadores CSS como Sass e Compass para criar designs responsivos. Ele explica como Sass fornece recursos como aninhamento, variáveis e mixins que facilitam o desenvolvimento. O documento também descreve como Compass e Breakpoint ajudam na compatibilidade entre navegadores e consultas de mídia, respectivamente. Por fim, é apresentado Susy como uma forma flexível de criar grids responsivos.
O documento discute como o CSS, apesar de ser frequentemente subestimado, ainda é uma tecnologia valiosa e poderosa. Apresenta diversos recursos avançados do CSS, como variáveis, blend modes, grid layout, e destaca que o CSS3 continua em desenvolvimento com novas funcionalidades. Defende que aprender os fundamentos do CSS é importante para desenvolvedores web.
Desenvolvedores sempre buscaram escrever menos e fazer mais. Mas como aplicar a filosofia DRY com tecnologias que inicialmente não foram projetadas especificamente para desenvolver apps? Vamos aprender nessa talk quais são as boas práticas, metodologias e ferramentas para repetir menos e produzir mais!
A web é uma das principais plataformas de desenvolvimento de aplicações. Hoje (quase) tudo está conectado na internet. Apps cada vez mais dinâmicas aumentaram a complexidade do desenvolvimento de interfaces web. Em consequência desse crescimento, surgiram metodologias e ferramentas para repetir menos código, modularizar e criar componentes para a web. No passado trabalhamos com iframes e no futuro talvez teremos web components funcionando em todos os browsers. Mas e hoje, como podemos aplicar a filosofia DRY?
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
Este documento resume as principais propriedades CSS para formatação de texto, listas, posicionamento e compatibilidade entre navegadores. Também discute boas práticas de organização de código CSS como ordenação lógica de propriedades e uso de comentários.
O documento discute técnicas para melhorar o desempenho de front-end de sites, destacando a importância de otimizar o front-end, onde a maior parte do tempo de resposta é gasto, e como pequenas melhorias podem gerar grandes economias e aumento de receita. Algumas dicas incluem comprimir arquivos, usar sprites de imagem, habilitar caches e gzip no servidor.
O documento apresenta os conceitos básicos de (X)HTML e CSS, incluindo estruturas básicas, tags, links, tabelas, formulários, cabeçalhos, cores, fontes, alinhamento, flutuação e posicionamento. Também discute assuntos extras como sprites CSS, SEO, acessibilidade e ferramentas de edição.
O documento descreve as principais novidades do HTML5 e CSS3, incluindo a reorganização semântica do HTML5 com elementos como header, nav, section e article, assim como recursos multimídia como vídeo e canvas, e propriedades avançadas de CSS3 como borda arredondada, sombras e transições. Exemplos são fornecidos para ilustrar o uso desses recursos.
O documento apresenta as principais diferenças entre HTML5 e XHTML, como a remoção do fechamento de tags, a nova sintaxe do doctype e a adição de novas tags semânticas. Também discute como implementar vídeos, tabelas e formulários semanticamente no HTML5, além de dicas para adaptação a dispositivos móveis.
O documento introduz os conceitos de Web Standards, CSS e Tableless. Resume que CSS é uma linguagem de definição de estilos usada para descrever a apresentação de documentos web e separar o conteúdo da apresentação. Tableless é uma filosofia que usa as tags HTML para seu significado semântico original.
LESS é um pré-processador CSS que adiciona funcionalidades como variáveis, aninhamento, importação e funções para tornar os arquivos CSS mais organizados e reutilizáveis. Algumas vantagens do LESS incluem a organização do código, reutilização de estilos através de mixins e variáveis, além de permitir operações matemáticas para gerar valores CSS dinamicamente. O documento explica como instalar e usar o LESS tanto no lado do cliente quanto do servidor e lista alguns de seus recursos e funcionalidades principais.
CSS {Grid} Layout: It's evolution babyCriciúma Dev
Diogo Moretti (Chaordic)
Vamos falar de CSS Layout, de como evoluímos de tabelas para Tableless, Box Model, Grids, Flexbox… até chegar na nova especificação de Grid Layout.
Vale do Carbono Conference
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
Este documento apresenta os conceitos básicos da linguagem HTML para iniciantes, incluindo a estrutura básica de uma página HTML, as principais tags como <div>, <span>, <h1-6>, <p>, <br>, âncoras, listas não ordenadas e ordenadas, inserção de imagens, formulários, entre outros. O documento também explica como estilizar páginas HTML com CSS e adicionar dinamismo com JavaScript.
O documento fornece uma introdução sobre CSS, descrevendo sua função de separar conteúdo de layout e estilo, melhorar acessibilidade e manutenção. Explica como integrar CSS em HTML, a anatomia de uma regra CSS, tipos de seletores, herança e especificidade, e versões de CSS.
O documento fornece uma introdução sobre CSS, incluindo sua sintaxe, boas práticas e integração em documentos HTML. É explicado como separar conteúdo de layout e estilo usando CSS, melhorando acessibilidade e manutenção. São detalhados conceitos como seletores de tag, classe e ID, herança, especificidade e versões de CSS.
Tatiane fornece dicas para melhorar o desenvolvimento front-end, incluindo aprender HTML, CSS, JavaScript, frameworks como AngularJS, testes, versionamento com GIT e inglês. Ela lista vários recursos como tags HTML5, seletores CSS, Flexbox, Grids e executores de tarefas, fornecendo links para aprender mais sobre cada tópico.
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoDan Vitoriano
CSS in JS é uma técnica que envolve escrever CSS dentro de JavaScript ao invés de arquivos separados. Isso permite que cada componente tenha seu próprio CSS encapsulado e escrito de forma declarativa. Bibliotecas populares como JSS, Glamor e Styled-Components facilitam a implementação de CSS in JS.
9. Conteúdo
Apresentação (e agora também animações)
Comportamento e interações mais complexas
ⓞ http://alistapart.com/article/understandingprogressiveenhancement
28. ›❯ Utilizado por elementos fixos da aplicação;
›❯ Seletor único, não reutilizável;
›❯ Variações são representadas por classes com o prefixo l .
Técnicas → SMACSS → Layout
41. ›❯ Facilitar a manutenção de projetos de longa duração;
›❯ Facilidade de entendimento do código;
›❯ Diminuir curva de aprendizado em novos membros do time;
›❯ Reutilização de código.
Técnicas → BEM
55. ›❯ Utiliza-se hífen para separar palavras em nomes longos;
›❯ Underscore duplo para separar um bloco de um elemento;
›❯ PascalCase e camelCase são aceitos.
Técnicas → BEM → Nomenclatura
60. ›❯ Utiliza-se camelCase para separar palavras em nomes longos;
›❯ Utilitários devem começar com o prefixo u .
Técnicas → SUIT CSS → Nomenclatura
61. /* Definição de um componente */
.MyComponent {}
/* Definição de um estado */
.MyComponent.is-animating {}
/* Definição de um modificador */
.MyComponent--modifier {}
/* Definição de subelementos */
.MyComponent-part {}
.MyComponent-anotherPart {}
Técnicas → SUIT CSS → Nomenclatura
98. Uma adaptação das partes que julgamos
boas em algumas técnicas populares
CSS na Magnetis
99. ›❯ Conceito de categorização do SMACSS;
›❯ Conceito de estados do SMACSS;
›❯ Conceito de elementos do BEM;
›❯ Conceito de modificadores do SUIT CSS.
CSS na Magnetis
100. ›❯ Sass com a sintaxe SCSS;
›❯ Autoprefixer;
›❯ Sistema de grid Susy;
›❯ Breakpoint;
›❯ SVG;
›❯ Rails (partials & Sprockets = ❤);
›❯ Bower.
CSS na Magnetis
101. /* Componente sidebar */
.accordion {}
/* Componente sidebar no estado expandido */
.accordion.is-expanded {}
/* Modificador `big` do componente botão */
.button--big {}
/* Componente `menu` */
.menu {}
/* Componente `menu-item` */
.menu-item {}
/* Para definir estados, utilizamos `is`, `has`, `should` e `can` */
.menu-item.has-icon {}
/* Elemento `icon` dentro do componente `menu` */
.menu-item__icon {}
CSS na Magnetis
107. Resolve problemas de “depth of applicability”
Pontos positivos
profundidade de aplicabilidade
108. Evita depender de como o markup está estruturado
na hora de criar estilos
Pontos positivos
109. <style>
navigation ul li a {
color: #c0ffee; /* valores hexadecimais sempre em minúsculo, pfv */
}
</style>
<navigation>
<ul>
<li><a href="/meetup-css">Meetup CSS</a></li>
<li><a href="/femug-sp">FEMUG-SP</a></li>
</ul>
</navigation>
Pontos positivos
111. A ideia de componentes pequenos e com pouca responsabilidade
evita problemas de performance na renderização da página e
também problemas com especificidade de seletores
Pontos positivos
112. Navegadores começam a renderizar a página
antes mesmo do documento estar completamente carregado,
fazendo uma leitura da direita pra esquerda
Pontos positivos
113. Evitar excesso de detalhes nos seletores
é uma boa prática
Pontos positivos
114. ul#menu > li {
text-align: right;
}
Pontos positivos
125. /* =================================================================
Grid layout
================================================================= */
/**
* Column layout with horizontal scroll.
*
* This creates a single row of full-height, non-wrapping columns that can
* be browsed horizontally within their parent.
*
* Example HTML:
*
* <div class="grid">
* <div class="cell cell-3"></div>
* <div class="cell cell-3"></div>
* <div class="cell cell-3"></div>
* </div>
*/
Não existe bala de prata