Css Framework
Se você já teve que montar um layout de um site com css usando tableless, você já deve saber como essa simples tarefa pode se torna um pesadelo para um iniciante.
É comum problemas, uma propriedade funciona na versão 7 do IE outra não.
Com base nisso esta surgindo o idéia de CSS Framework, basicamente eles fornecem toda essa infra-estrutura de CSS para você, como por exemplo definir fontes padrões, e claro montar o layout, ou grid do seu site.
Abaixo irei explicar como utilizar o Blue Print CSS e construir uma estrutura basica de um site, header, footer e menu esquerdo.
1. Faça o download do framework em http://www.blueprintcss.org/
2. Descompacte o arquivo e copie a pasta blueprint para o diretorio raiz do seu site, neste exemplo irei utilizar c:\trabalho\site1
3. Vamos carregar o nosso framework em nosso site
index.html
<!DOCTYPE html PUBLIC "-/W3c/DTD HTML 4.01/EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <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"> <!--[uf IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> </head> <body> </body> </html>
pronto o nosso CSS Framework esta instalando agora vamos começar a usa-lo.
4. Definindo o nosso layout completo:
<!DOCTYPE html PUBLIC "-/W3c/DTD HTML 4.01/EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <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"> <!--[uf IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> </head> <div id="container"> <h1> Aqui é conteúdo do header. </h1> <hr> <h2 class="alt"> Simples teste </h2> <hr> <div class="span-15 prepend=1 colborder"> <p> Um simples texto para conteúdo </p> </div> <div class="span-7 last"> <ul> <li><a href="#"> MENU 1 </a></li> <li><a href="#"> MENU 2 </a></li> </ul> </div> <hr> <p> Um simples rodapé </p> </div> <body> </body> </html>
é essa uma estrutura basica de um layout em html, bom com isso já é possivel ter uma ideia do framework, mais é necessario um aprofundamento maior para entender toda logica do framework.
Baixe os arquivos utilizados acima junto com framework AQUI.
Leave a Reply