Como você sabe, não é a hora do nascimento da internet e as pessoas quase se esqueceram dos sites, tendo um texto de parágrafo único e alguns hiperlinks. Se você quiser seguir em frente com os padrões atuais da web, terá que tornar seu site agradável, em vez de francamente visível. Independentemente da linguagem de codificação, como HTML or PHP usado para construir a interface do usuário, APF será a sua ferramenta para tornar a página da Web elegante. Quando comparamos uma página da web a um corpo humano, o HTML funciona como seus ossos, enquanto o CSS é algo próximo à pele e aos músculos, feito para dar forma e estrutura.
Assim como todas as outras coisas no mundo do design e desenvolvimento, o CSS também recebeu pequenas e grandes atualizações tornando-o apto para alcançar o CSS3, que é o melhor par quando o HTML5 acompanha a jornada. No entanto, a estrela do jogo é a tendência ou padrão CSS que você escolhe usar! Como você sabe, existem vários frameworks CSS disponíveis para você com diferentes aparências e recursos, como Bootstrap, Zurb etc. O que estamos apresentando a você hoje é CSS puro, um CSS Framework simplesmente baseado em coolgrid do Yahoo !, o gigante líder da Internet. Felizmente, você pode usar essa estrutura sem pagar um único centavo.
CSS puro
Você pode ter usado outras estruturas como a Zurb Foundation para construir páginas e sites atraentes. Usar a estrutura CSS é muito útil porque você pode obter modelos para vários elementos na página, como divisões, formulários, menu, etc. Esta é a mesma função de Pure CSS do Yahoo! Em vez de baixar e adicionar arquivos à pasta 'CSS', o Pure CSS pode funcionar como Google Fonts, em que você precisa adicionar uma única linha de código para integrar a estrutura ao HTML. Como o framework é o mais recente, ele é totalmente responsivo. Acima de tudo, Pure CSS é um dos frameworks mais simples que você pode encontrar na web. Você pode usar a estrutura para alimentar seu site ou baixar módulos específicos para seções de estilo como formulários, menus, etc. Existem seis módulos individuais disponíveis gratuitamente. Os módulos do Pure CSS são os seguintes, que parecem ter um tamanho leve (menos de 2 Kb) quando extraídos.
- Base: Elementos básicos da página da web, como cabeçalhos, parágrafo, tipografia
- Botões: Vários botões com efeitos como ativo, suspenso etc.
- Tabelas: Mesas de base disponíveis com borda etc.
- Cardápios: Horizontal, vertical, lista suspensa.
- Grades: Grades responsivas.
- Formas: Entrada agrupada, multi-coluna etc.
VEJA TAMBÉM: Bookmarklet de padrões sutis: visualize padrões de fundo em seu site.
Por que usar CSS puro
- Código menos não utilizado: É muito comum que você veja um grande número de código não usado ao usar outros frameworks css. Por outro lado, no caso do Pure CSS, você nunca enfrentará esse problema porque pode usar a versão específica do framework e usá-la para estilizar seções específicas da página da web. Claro, menos código parece ótimo!
- Tudo dentro: Pelo menos em algumas outras estruturas, eles estão usando plug-ins e códigos JavaScript de terceiros para melhorar o impacto visual. No entanto, o Pure CSS não usa nenhum tipo de plug-in JS, exceto o caso daquele usado no efeito drop-down. Menos código de terceiros pode fornecer carregamentos de página mais rápidos e clareza no código.
- Modelos: Se você não é um especialista em criar seu próprio layout para seu site, o Pure CSS pode ajudar nessa seção. O site contém uma série de exemplos de layout, combinando sites com diferentes intenções, como marketing, página de destino etc.
- Construtor de skins: Caso os modelos e estilos possam satisfazer o designer criativo em você, você pode usar o criador de skins Pure CSS para construir sua própria skin. Como você pode imaginar, o criador de skins não leva em consideração seu nível de conhecimento de codificação.
VEJA TAMBÉM: Icon Fonts: Prós e Contras do Font Awesome Generator.
Usando Pure CSS
Conforme especificado anteriormente, o Pure CSS tem muitos recursos favoráveis quando comparado a outros frameworks. Lembrando o que dissemos antes, você pode usar Pure CSS por meio do mesmo método do Google Fonts. Você tem que adicionar uma única linha de link de arquivo externo para trazer estilo à sua página da web. Este recurso é bastante útil quando você precisa criar páginas da Web com um único arquivo e não tem espaço suficiente para colocar todos os arquivos css (acho que isso nunca vai acontecer). Como Yahoo! gira a roda do projeto o projeto, você não quer ficar tenso com erros de carregamento ou falhas técnicas.
Se quiser usar os modelos CSS completos do Pure CSS, você pode adicionar o seguinte código à página da web principal. Você também pode clicar no link do arquivo CSS e fazer o download do arquivo CSS para usá-lo.
[html]
[/ html]
No caso, se você deseja apenas fazer uso de versões CSS específicas, como menus, formulários, etc., existem códigos especiais disponíveis junto com arquivos CSS dedicados. A lista de URLs é a seguinte:
Usar o construtor de skins do Pure CSS também é uma tarefa mais fácil porque você pode controlar as propriedades dos elementos usando botões de controle intuitivos da página do construtor de skins. No entanto, recomendamos que você baixe os arquivos CSS para entender os nomes dos elementos. Como dissemos, colocar esses arquivos com menos de 2 Kb não consumirá espaço em disco.
O site Pure CSS é configurado de tal forma que até mesmo um novato pode inserir elementos baseados em Pure CSS em seus sites. Você pode ver uma barra lateral simples no lado esquerdo, listando seções como formulários, botões etc. Em cada página, as visualizações estão disponíveis junto com o código HTML para trazer esse efeito para o seu site. Assim, é muito fácil inserir esses elementos em sua página da web. Abaixo, é mostrado a visualização e o código de um formulário de tipo de login único.
Conclusão
Ao analisar todos os recursos do Pure CSS, esta é uma das melhores contribuições do Yahoo! para o mundo do design. Yahoo! A interface do usuário, comumente conhecida como YUI, oferece suporte a todas as strings anexadas ao Pure CSS, tornando a estrutura a melhor quando há uma comparação. Além de usar elementos predefinidos, você também pode personalizar o Pure CSS. Você tem que se conduzir ao site Pure CSS para usar e aprender mais sobre a estrutura simplesmente compacta. Deixe-nos saber sua opinião sobre este framework depois de verificar os exemplos e usá-lo em seu projeto.
Rakesh Kumar
Obrigado por postar esta revisão maravilhosa do puro css. Já que estou tentando desenvolver meus próprios temas wordpress para a comunidade, acho que este novo css do yahoo.com pode me ajudar muito.
Hari
Eu acho muito útil. Explorarei cada um deles mais tarde.
Cassie
Uau. Isso é realmente interessante. Obrigado por compartilhar esta informação.
Raimundo Sam
Você recomendaria Pure em vez de Bootstrap ou Foundation neste momento? Achei o Bootstrap um pouco menos do que documentado de forma ideal como um usuário pela primeira vez.
Sajesh
Olá Abhijith N Arjunan, devo dizer que você fez um ótimo trabalho e obrigado por esclarecer meus conhecimentos e habilidades.
Santosh
Ótimo artigo Abhijit. Usei PureCSS para criar um tema para um novo sistema de gerenciamento de conteúdo chamado PyroCMS. Dê uma olhada em [PyroPure]).
Foi muito divertido desenvolver o tema. Acho que era muito mais leve do que outros frameworks por aí. O estilo também é muito personalizável.
Erwin
Uau .. Isso é algo que é interessante de aprender, sei que não tenho talento em programação e design, mas foi interessante de fazer. O PureCSS provavelmente é algo de que preciso, muito.
Adam
Olá, eu tenho usado pureCss (PureCss) do Yahoo em 3 projetos e é realmente uma estrutura leve incrível, por assim dizer, em comparação com o Bootstrap ou a fundação, seu foco é iluminar e trazer de volta o design para o desenvolvedor e contar com um kit de interface de usuário de 300kb que você não usa 70% dos elementos de qualquer maneira, e se você tirar partes do Bootstrap ele ainda precisa do Java, ainda está na seção de 200kb. Sem mencionar que todos os sites parecem Bootstrappy, e é por isso que nunca usarei o Bootstrap para construir um site ou uma fundação Zurb, todos eles pesados e você precisa usar a grade de 12 colunas que ficou realmente chata. Eu vejo sites em que todos parecem bons e legais, no entanto, eles parecem tão quadrados e bem Bootstrap-Foundation, Yahoo PureCss é um kit de interface do usuário incrível, rápido, fácil de usar, modificar e o melhor de tudo funciona muito rápido com o WordPress como um tema! Usei-o para 4 projetos WordPress com YUI PureCss e o cliente ficou surpreso depois de mudar do Bootstrap, o primeiro aviso foi a velocidade do site e o segundo o belo design FLAT por padrão.