Skip to content

Instantly share code, notes, and snippets.

@peas
Created September 5, 2012 05:03
Show Gist options
  • Save peas/3630828 to your computer and use it in GitHub Desktop.
Save peas/3630828 to your computer and use it in GitHub Desktop.
CSS de exemplo para o livro de Design Responsivo da Casa do Código
* {
margin: 0;
padding: 0;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
.container {
margin: 0 auto;
width: 960px;
}
h1 {
font-size: 32px;
}
.brief {
margin: 5px 0;
}
.content {
margin: 15px 0;
}
.content-main {
float: left;
width: 593px;
}
.hero {
margin: 25px 0;
}
.brief {
margin: 5px 0;
}
.last-contents {
font-size: 12px;
}
.last-content-call {
float: left;
margin: 15px 15px 15px 0;
width: 280px;
}
.last-content-call .secondary-title {
margin-bottom: 0;
}
.last-content-call .brief {
margin: 5px;
}
.content-sidebar {
background-color:#F0F0F0;
float: right;
padding: 10px;
width: 322px;
}
.main-nav ul {
list-style-type: none;
}
.main-nav li {
background-color: #F9F9F9;
float: left;
margin: 15px;
outline: 1px solid #DEDEDE;
text-align: center;
width: 130px;
}
.main-nav a {
display: block;
padding: 10px;
text-decoration: none;
}
.main-footer {
background-color: #F0F0F0;
clear: both;
float: left;
font-size: 12px;
margin: 15px 0;
padding: 15px;
text-align: center;
width: 100%;
}
@tarciozemel
Copy link

A não ser em elementos que, especificamente, precisam de altura definida, regra geral não é preciso especificar alturas -- o conteúdo deve fluir em todos os sentidos.

Mas, caso haja algum elemento/módulo que demande, geralmente é em medidas relativas, sim.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment