Pure CSS: Purest CSS Framework do Yahoo!

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, CSS 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.
• Menus: 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.