Blueprint CSS

•

0 gostou•368 visualizações

O documento descreve o framework CSS Blueprint, incluindo sua estrutura de grade de 950px com 24 colunas de 30px e margens laterais de 10px. Ele também discute como instalar e usar o Blueprint através de links CSS e classes como .span-16 para criar colunas, e lista recursos adicionais como formulários e tipografia.

Tecnologia

spend your time innovating, not replicating

o que é?

Framework CSS
Grid fácil de usar
Está no GitHub

como funciona?

950px
24 colunas com 30px
10px de margem à direita

utilização
<link rel="stylesheet" href="blueprint/screen.css" type="text/css"
media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css"
media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection" />
<![endif] -->

utilização
<body>
<div class="container">
<div class="span-16">
<p>Column 1</p>
</div>
<div class="span-8 last">
<p>Column 2</p>
</div>
</div>
</body>

referências

garethjmsaunders.co.uk/blueprint

blueprintcss.org

Mais conteúdo relacionado

Semelhante a Blueprint CSS

Html5Alan Pereira

Arquitetura CSSRafael Rinaldi

Devmedia - Conhecendo o framework front-end FoundationDevmedia

Um guia bem básico de Bootstrap + LessBruno Said

Web design responsivo e adaptativo - HTML5/CSS3Heraldo Gonçalves Lima Junior

Simplificando o full stack - desenvolvimento web na práticaMarianna Cruz Teixeira

Aula html5Rodrigo Gidra

Cobol Web com Net Express 5.1 - Parte 3Altair Borges

Html5 workshopSérgio Laranjeira

Responsive Web Design - Entregando a informação da melhor maneiro possívelSérgio Lima

HTML/CSS PatternsLeonardo Quixada

Otimização Front-end para WordPressGuga Alves

Alta Performance em Aplicações WebAnderson Aguiar

2. Introdução ao CSSpptx.pdfRubenManhia

Gabarito ad1 web_2012_2paulofa

SVG EssencialHelder da Rocha

Css Curso completomarcossonotec

Apostila Css ( Apostilando.com )Rodrigo Dias

Mecanismo de busca em Node.js e MongoDBLuiz Duarte

Guia prático de desenvolvimento front-end para django devsDavidson Fellipe

Semelhante a Blueprint CSS (20)

Html5

Arquitetura CSS

Devmedia - Conhecendo o framework front-end Foundation

Um guia bem básico de Bootstrap + Less

Web design responsivo e adaptativo - HTML5/CSS3

Simplificando o full stack - desenvolvimento web na prática

Aula html5

Cobol Web com Net Express 5.1 - Parte 3

Html5 workshop

Responsive Web Design - Entregando a informação da melhor maneiro possível

HTML/CSS Patterns

Otimização Front-end para WordPress

Alta Performance em Aplicações Web

2. Introdução ao CSSpptx.pdf

Gabarito ad1 web_2012_2

SVG Essencial

Css Curso completo

Apostila Css ( Apostilando.com )

Mecanismo de busca em Node.js e MongoDB

Guia prático de desenvolvimento front-end para django devs

Mais de Luiz Faias Junior

Apresentação da monografia - PRONTOLuiz Faias Junior

Apresentação do Ghost.orgLuiz Faias Junior

Cosmogênese e antropogêneseLuiz Faias Junior

Os 10 mandamentos do insucessoLuiz Faias Junior

Reggae do nodeLuiz Faias Junior

Pensando LeanLuiz Faias Junior

Remember the milkLuiz Faias Junior

Certified Scrum Product OwnerLuiz Faias Junior

Lean software and systems conference 2010Luiz Faias Junior

Implementing lean software developmentLuiz Faias Junior

Scrum feito com soluções simples e de baixo custoLuiz Faias Junior

Restrospectiva Bluesoft 2008Luiz Faias Junior

Mais de Luiz Faias Junior (12)

Apresentação da monografia - PRONTO

Apresentação do Ghost.org

Cosmogênese e antropogênese

Os 10 mandamentos do insucesso

Reggae do node

Pensando Lean

Remember the milk

Certified Scrum Product Owner

Lean software and systems conference 2010

Implementing lean software development

Scrum feito com soluções simples e de baixo custo

Restrospectiva Bluesoft 2008

Último

Padrões de Projeto: Proxy e Command com exemploDanilo Pinotti

ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx2m Assessoria

Luís Kitota AWS Discovery Day Ka Solution.pdfLuisKitota

Boas práticas de programação com Object CalisthenicsDanilo Pinotti

ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx2m Assessoria

Programação Orientada a Objetos - 4 Pilares.pdfSamaraLunas

ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx2m Assessoria

ATIVIDADE 1 - SISTEMAS DISTRIBUÍDOS E REDES - 52_2024.docx2m Assessoria

ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx2m Assessoria

Blueprint CSS

1. spend your time innovating, not replicating

2. o que é? Framework CSS Grid fácil de usar Está no GitHub

3. quem usa?

4. Quem usa? Webvanta

5. Quem usa? Mint

6. como funciona?

7. como funciona? 950px 24 colunas com 30px 10px de margem à direita

9. página de exemplo

10.

11. espaços em branco

12. append

13. prepend

14. instalação blueprintcss.org

15. instalação

16. utilização <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />

17. utilização <body> <div class="container"> <div class="span-16"> <p>Column 1</p> </div> <div class="span-8 last"> <p>Column 2</p> </div> </div> </body>

18. formulários

19. formulários

20. formulários

21. formulários

22. tipografia

23. tipografia

24. e muito mais...

25. referências

26. referências garethjmsaunders.co.uk/blueprint blueprintcss.org

27. obrigado!