• Ir para a navegação primária
  • Ir para o conteúdo principal
  • Skip to sidebar primária
  • Ir para o rodapé

TechLila

Bleeding Edge, sempre

  • Início
  • Sobre
  • Contato
  • Ofertas e ofertas
Logo Techlila
Compartilhe
Tweet
Compartilhe
pino
3 ações
Recursos de introdução do Microsoft WebMatrix 3
A seguir

Simplifique Seu Desenvolvimento Web com o Microsoft WebMatrix

Pure CSS Framework do Yahoo!

TechLila Web Design e Desenvolvimento

Pure CSS: Purest CSS Framework do Yahoo!

Avatar de Abhijith N Arjunan Abhijith N Arjunan
Última atualização em: 21 de julho de 2013

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.

Pure CSS Framework do Yahoo!

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.
  • Layouts de puro CSS

  • 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.
  • Usando CSS Skin Builder

    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:

    Lista de links de puro CSS

    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.

    Visualização de login e código de amostra

    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.

Compartilhe
Tweet
Compartilhe
pino
3 ações

Divulgação: O conteúdo publicado no TechLila é suportado pelo leitor. Podemos receber uma comissão por compras feitas por meio de nossos links de afiliados sem nenhum custo extra para você. Leia nosso Página de isenção de responsabilidade para saber mais sobre nosso financiamento, políticas editoriais e formas de nos apoiar.

Compartilhar é se importar

Compartilhe
Tweet
Compartilhe
pino
3 ações
Avatar de Abhijith N Arjunan

Abhijith N Arjunan

Abhijith N Arjunan é um escritor e blogueiro apaixonado de Kerala, que encontra a alegria final ao escrever sobre tecnologia de tendências, coisas geek e desenvolvimento web.

Categoria

  • Web Design e Desenvolvimento

Tags

CSS

Interações leitor

O que as pessoas estão dizendo

  1. Avatar de rakesh kumarRakesh 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.

    Resposta
  2. Avatar de HariHari

    Eu acho muito útil. Explorarei cada um deles mais tarde.

    Resposta
  3. Avatar de CassieCassie

    Uau. Isso é realmente interessante. Obrigado por compartilhar esta informação.

    Resposta
  4. Avatar de Raymond SamRaymond 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.

    Resposta
  5. Avatar de SajeshSajesh

    Olá Abhijith N Arjunan, devo dizer que você fez um ótimo trabalho e obrigado por esclarecer meus conhecimentos e habilidades.

    Resposta
  6. Avatar de SantoshSantosh

    Ó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.

    Resposta
  7. Avatar de ErwinErwin

    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.

    Resposta
  8. Avatar de AdãoAdam

    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.

    Resposta

Adicione seu comentário cancelar resposta

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *

Sidebar primária

Populares

Como aumentar a velocidade da banda larga no Windows

10 melhores lançadores de Android de 2021

Coisas a fazer após a instalação do Windows 10 - Dicas e truques do Windows 10

Os 10 principais mecanismos de pesquisa que você pode usar para pesquisar na web de maneira privada

55 fatos interessantes sobre informática que vão impressionar você

O que procurar ao comprar um laptop - um guia de compra de laptop

Fusion Drive Vs SSD - Coisas que ninguém lhe diz sobre o armazenamento Fusion vs SSD

Ferramentas úteis

. Grammarly - Verificador Gramatical Gratuito
. SEMRush – A melhor ferramenta de SEO confiável por especialistas
. Setapp – Assinatura completa para Mac e iOS

Trending Topics

  • Android
  • Internet
  • iPhone
  • Linux
  • Impermeável
  • Segurança
  • Redes sociais
  • Tecnologia
  • Windows

Vale a pena conferir

10 melhores equalizadores de som para Windows 10 (edição 2022!)

14 melhores skins VLC altamente recomendados e gratuitos

Logotipo do rodapé Logotipo do texto do rodapé

Rodapé

Sobre

Olá e bem-vindo ao TechLila, o famoso blog de tecnologia onde você pode encontrar artigos úteis para dominar o básico e muito mais.

Na TechLila, nosso principal objetivo é fornecer informações exclusivas, como dicas e truques de qualidade, tutoriais, guias de procedimentos no Windows, Macintosh, Linux, Android, iPhone, Segurança e alguns subtópicos diversos, como análises.

Ligações Úteis

  • Sobre
  • Falar Connosco
  • Aviso Legal
  • Política de Privacidade
  • Condições

Siga-nos

Tema personalizado usando Genesis Framework

Hospedagem em nuvem pela Cloudways

Língua

en English
bg Българскиzh-CN 简体中文nl Nederlandsen Englishtl Filipinofr Françaisde Deutschid Bahasa Indonesiait Italianoja 日本語pl Polskipt Portuguêsro Românăru Русскийsr Српски језикes Españolsv Svenskatr Türkçeuk Українськаvi Tiếng Việt

© Copyright 2012–2022 TechLila. Todos os direitos reservados.