Skip to content

Instantly share code, notes, and snippets.

@furenku

furenku/css-tradicional.css

Last active March 24, 2018 20:12
Show Gist options
  • Save furenku/b639bb3255f3c468c509e3b7931e6175 to your computer and use it in GitHub Desktop.
Save furenku/b639bb3255f3c468c509e3b7931e6175 to your computer and use it in GitHub Desktop.
Download ZIP
holygrail
Raw
css-tradicional.css
body * {
/* db */
display: block;
/* bz */
box-sizing: border-box;
}
#main-menu li {
/* fl */
float: left;
/* tac */
text-align: center;
/* p16 */
padding: 16px;
}
#main-menu li.active,
#main-menu li.active a {
/* bgc#000 */
background-color: #000;
/* c#fff */
color: #ffffff;
}
#main-header {
/* w100p */
width: 100%;
/* h20p */
height: 20%;
}
main {
/* ovya */
overflow-y: scroll;
/* p32 */
padding: 32px;
}
/* body > footer, */
#main-footer {
/* w100p */
width: 100%;
/* h10p */
height: 10%;
}
/* REGLAS RESPONSIVAS */
/* primero, version movil */
#main-menu li {
width: 100%;
}
aside, main {
/* w100p */
width: 100%;
height: auto;
min-height: 250px;
/* tac */
text-align: center;
}
/* luego, reglas para tablet */
/* @media screen and (min-width:768px) and (max-width: 1199px) { */
@media screen and (min-width:768px) {
#main-menu li {
width: 50%;
}
aside, main {
/* h70p */
height: 70%;
/* fl */
float: left;
}
aside, main {
/* w33.33p */
width: 33.33%;
}
#first-sidebar {
/* ta */
text-align: left;
}
main {
/* ta */
text-align: left;
}
#second-sidebar {
/* ta */
text-align: right;
}
}
/* reglas para laptops o mayores */
@media screen and (min-width:1200px) {
#main-menu li {
width: 25%;
}
aside {
width: 25%;
}
main {
width: 50%;
}
}
/* pantalla extra grande */
@media screen and (min-width:1600px) {
#main-menu li {
width: 25%;
}
aside {
width: 15%;
}
main {
width: 70%;
}
}
Raw
html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Layout en CSS
</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/css-tradicional.css">
</head>
<body>
<!-- header#main-header -->
<header id="main-header">
<!-- nav#main-menu>ul>(li>a{Menú $})*4 -->
<nav id="main-menu">
<ul>
<li class="active">
<a href="index.html">
CSS Tradicional
</a>
</li>
<li>
<a href="flexbox.html">
Flexbox
</a>
</li>
<li>
<a href="cssgrid.html">
CSS Grid
</a>
</li>
<li>
<a href="bootstrap.html">
Bootstrap
</a>
</li>
</ul>
</nav>
</header>
<!-- aside#first-sidebar -->
<aside id="first-sidebar">
Barra Lateral 1
</aside>
<!-- main#main-content -->
<main id="main-content">
<!-- h1{CSS Tradicional} -->
<h1>
CSS Tradicional
</h1>
<!-- (p>lorem25)*8 -->
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste dolore aliquam provident numquam ea odio sit soluta omnis eligendi quod necessitatibus, laudantium dolorem nesciunt aperiam!</p>
<p>Libero, aperiam! Ut ad tempora libero quaerat sed nemo aperiam sit pariatur perferendis molestias quis architecto animi sint labore soluta, reprehenderit repellendus quidem? Rem, nobis?</p>
<p>Esse commodi eius amet voluptatibus rem minima mollitia qui dignissimos laborum dolorem eveniet totam modi a labore, rerum iusto aperiam reprehenderit vitae recusandae repellendus odio.</p>
<p>Consectetur reprehenderit dolor, voluptas fuga sit voluptatum nostrum nesciunt autem quibusdam officia veniam voluptate! Illo reprehenderit atque dolore commodi asperiores nostrum error ad. Alias, omnis.</p>
<p>Id est, harum hic aliquam molestias accusamus nobis adipisci enim in ullam ex pariatur, velit numquam suscipit exercitationem animi maiores facere reprehenderit voluptatum aliquid omnis.</p>
<p>Exercitationem natus, sed cumque porro, quidem doloribus veniam architecto quis magnam aut reprehenderit excepturi consequatur, nesciunt et deserunt nihil libero officiis rerum voluptatum quae blanditiis!</p>
<p>Nesciunt quas, voluptas cupiditate, voluptatum provident ut labore iure, maiores exercitationem perspiciatis minus quasi eius. Eius odit error vel rerum aliquam odio modi. Officia, voluptas.</p>
<p>Tempora, omnis maxime fuga voluptatibus, commodi impedit reprehenderit quibusdam ipsum dolor est illum, aut alias! Laborum quibusdam at esse ex odio quod aspernatur labore neque.</p>
</main>
<!-- aside#second-sidebar -->
<aside id="second-sidebar">
Barra Lateral 2
</aside>
<!-- footer#main-footer -->
<footer id="main-footer">
Pie de Página
</footer>
</body>
</html>
Raw
reset.css
* {
outline: 1px solid #abc;
}
body, html {
/* m0 */
margin: 0;
/* p0 */
padding: 0;
/* w100p */
width: 100%;
/* h100p */
height: 100%;
}
ul, li {
/* m0 */
margin: 0;
/* p0 */
padding: 0;
}
li {
list-style: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment