Skip to content

Instantly share code, notes, and snippets.

@rodrigo-frenk

rodrigo-frenk/_colores.scss

Last active February 2, 2017 03:59
Show Gist options
  • Save rodrigo-frenk/52b783f6bccf9503a4bc4d977f41e39b to your computer and use it in GitHub Desktop.
Save rodrigo-frenk/52b783f6bccf9503a4bc4d977f41e39b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_colores.scss
/****** COLORES ******/
header#cabecera-principal,
footer#pie-pagina {
background-color: #eee;
}
$white: #fff;
$black: #000;
$color-primary-0: #FF7A00;
$color-primary-1: #FFAC5F;
$color-primary-2: #FF9532;
$color-primary-3: #D26500;
$color-primary-4: #A54F00;
$color-secondary-1-0: #FFAE00;
$color-secondary-1-1: #FFCC5F;
$color-secondary-1-2: #FFBE32;
$color-secondary-1-3: #D29000;
$color-secondary-1-4: #A57100;
$color-secondary-2-0: #FF1300;
$color-secondary-2-1: #FF6A5F;
$color-secondary-2-2: #FF4132;
$color-secondary-2-3: #D20F00;
$color-secondary-2-4: #A50C00;
$color-complement-0: #0397AB;
$color-complement-1: #49B0BF;
$color-complement-2: #259FB0;
$color-complement-3: #027181;
$color-complement-4: #015965;
$lista-colores: (
"white" $white,
"black" $black,
primary-0 $color-primary-0,
primary-1 $color-primary-1,
primary-2 $color-primary-2,
primary-3 $color-primary-3,
primary-4 $color-primary-4,
secondary-1-0 $color-secondary-1-0,
secondary-1-1 $color-secondary-1-1,
secondary-1-2 $color-secondary-1-2,
secondary-1-3 $color-secondary-1-3,
secondary-1-4 $color-secondary-1-4,
secondary-2-0 $color-secondary-2-0,
secondary-2-1 $color-secondary-2-1,
secondary-2-2 $color-secondary-2-2,
secondary-2-3 $color-secondary-2-3,
secondary-2-4 $color-secondary-2-4,
complement-0 $color-complement-0,
complement-1 $color-complement-1,
complement-2 $color-complement-2,
complement-3 $color-complement-3,
complement-4 $color-complement-4,
);
@each $value in $lista-colores {
.color-#{nth($value, 1)} {
& {
color: nth($value, 2) !important;
}
}
.color-#{nth($value, 1)}-bg {
& {
background-color: nth($value, 2) !important;
}
}
.color-#{nth($value, 1)}-bd {
& {
border: 1px solid white;
border-color: nth($value, 2) !important;
}
}
.color-#{nth($value, 1)}-hover:hover {
& {
color: nth($value, 2) !important;
}
}
.color-#{nth($value, 1)}-hover-bg:hover {
& {
background-color: nth($value, 2) !important;
}
}
.color-#{nth($value, 1)}-hover-bd:hover {
& {
border: 1px solid white;
border-color: nth($value, 2) !important;
}
}
}
Raw
_layout.scss
body,html {
height: 100%;
}
.h-33 {
height: 33.33%;
}
.h-45 {
height: 45%;
}
.h-55 {
height: 55%;
}
.h-100 {
height: 100%;
}
// directivas para hacer loop y generar automáticamente clases:
@for $i from 0 through 10 {
.h-#{$i}x {
height: 80px * $i
}
}
// Generar clases para padding:
$nombre_clase: p;
@for $i from 0 through 10 {
.#{$nombre_clase}-#{$i} {
padding: 8px * $i
}
}
/****** LAYOUT ******/
header#cabecera-principal,
footer#pie-pagina {
position: fixed;
left: 0;
width: 100%;
}
header#cabecera-principal {
top: 0;
}
header #icono-menu .btn {
padding: 0;
}
footer#pie-pagina {
bottom: 0;
}
main#area-principal {
padding-top: 75px;
}
Raw
_reset.scss
.nospacing {
padding: 0;
margin: 0;
}
html, body {
@extend .nospacing;
}
ul {
// el elemento dentro de que estamos se representa con &
&, li {
@extend .nospacing;
}
}
li {
list-style: none;
}
Raw
_tipografias.scss
/****** TIPOGRAFÍAS ******/
.font-s {
font-size: 12px;
}
.font-m {
font-size: 16px;
}
.font-l {
font-size: 20px;
}
.font-xl {
font-size: 32px;
}
.font-xxl {
font-size: 48px;
}
Raw
app.scss
$fontsize_base: 16px;
$altura_base: 80px;
$color_base: #c1ed0b;
@debug "iniciando sass";
@import 'reset';
@import 'layout';
@import 'tipografias';
@import 'colores';
/* dibujar contorno para facilitar maquetado */
* {
outline: 1px solid $color_base;
}
// anidando selectores:
main#area-principal {
.bullet {
.imagen {
margin-bottom: $fontsize_base;
}
span {
font-weight: bold;
}
}
}
.square-h {
background-color: red;
width: 40%;
}
// ejemplo de mixins:
@mixin color-fondo-texto($color_fondo, $color_texto) {
background-color: $color_fondo;
color: $color_texto;
}
//
//
// .bullet:nth-child(1) {
// @include color-fondo-texto( #4567fa, #a567fa );
// }
// .bullet:nth-child(2) {
// @include color-fondo-texto( #a567fa, #45f022 );
// }
// .bullet:nth-child(3) {
// @include color-fondo-texto( #45f022, #4567fa );
// }
.bullet .imagen {
height: 33vw / (16/9);
}
// cuando no queremos usar clases en el html, podemos quedarnos dentro del scss,
//reciclando clases y mixins
.misuperelemento {
@extend .p-1;
@extend .h-4x;
@extend .color-primary-1-bg;
@include color-fondo-texto(#456,#fa0)
}
Raw
posts.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>Document</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- link[css/app.css] -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<header id="cabecera-principal" class="container-fluid h-1x p-0 color-secondary-2-2-bg color-complement-2">
<!-- #logotipo.col-xs-3.h-100.imgLiquidNoFillLeft -->
<div id="logotipo" class="col-xs-3 h-100 imgLiquidNoFillLeft">
<img src="http://fakeimg.pl/300x200/FFF/ccc?text=logo" alt="">
</div>
<!-- #icono-menu.col-xs-3.col-xs-offset-9.text-right -->
<div id="icono-menu" class="col-xs-3 h-100 col-xs-offset-6 text-right v-center">
<!-- i.fa.fa-bars -->
<i class="fa fa-bars font-xl btn m-0"></i>
</div>
</header>
<main id="area-principal" class="container-fluid">
<!-- (.col-xs-6.col-md-4.p-$.text-center>lorem8)*5 -->
<!-- <div class="col-xs-6 col-md-4 p-0 text-center">Cum, illo rerum! Quasi rerum magnam, exercitationem voluptatum.</div>
<div class="col-xs-6 col-md-4 p-1 text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col-xs-6 col-md-4 p-2 text-center">Ipsa qui, facilis autem quaerat voluptatum. Repellendus, debitis.</div>
<div class="col-xs-6 col-md-4 p-3 text-center">Esse cumque ipsum, totam pariatur iste cum mollitia?</div>
<div class="col-xs-6 col-md-4 p-4 text-center">Hic voluptatum fugiat dolor explicabo ea reprehenderit, nemo?</div>
<div class="col-xs-6 col-md-4 p-5 text-center">Hic voluptatum fugiat dolor explicabo ea reprehenderit, nemo?</div> -->
<div class="bullet col-xs-6 col-md-4 p-4 text-center color-secondary-1-3">
<!-- .imagen.row.h-1x.imgLiquidFill>img -->
<div class="imagen col-xs-12 imgLiquidFill">
<img src="http://unsplash.it/400/250?random=0" alt="">
</div>
<span class="col-xs-12 p-4">
Hic voluptatum fugiat dolor explicabo ea reprehenderit, nemo?
</span>
</div>
<div class="bullet col-xs-6 col-md-4 p-4 text-center color-secondary-2-1-bg color-secondary-1-1">
<!-- .imagen.row.h-1x.imgLiquidFill>img -->
<div class="imagen col-xs-12 h-2x imgLiquidFill">
<img src="http://unsplash.it/400/250?random=1" alt="">
</div>
<span class="col-xs-12 p-4">
Hic voluptatum fugiat dolor explicabo ea reprehenderit, nemo?
</span>
</div>
<div class="bullet col-xs-6 col-md-4 p-4 text-center color-complement-4-bg color-primary-2">
<!-- .imagen.row.h-1x.imgLiquidFill>img -->
<div class="imagen col-xs-12 h-2x imgLiquidFill">
<img src="http://unsplash.it/400/250?random=2" alt="">
</div>
<span class="col-xs-12 p-4">
Hic voluptatum fugiat dolor explicabo ea reprehenderit, nemo?
</span>
</div>
</main>
<footer id="pie-pagina" class="container-fluid h-1x text-center v-center color-secondary-2-3-bg color-primary-1">
<div>
<div class="btn btn-primary">
<i class="fa fa-glass col-xs-4"></i>
<span class="col-xs-8">Filtros</span>
</div>
</div>
</footer>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/imgLiquid/js/imgLiquid-min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment