Sass Starter Kit
Kit de inicio Sass simple y liviano para usar en proyectos de front end.
Sass Starter Kit es un framework CSS muy simple y pequeño construido con Sass y PostCSS.
Utiliza normalize.css y una serie de reglas elementales para iniciar un proyecto con HTML y CSS rápidamente.
El kit incluye un sistema de grilla super simple y similar a la grilla de Bootstrap, pero con solo dos breakpoints.
Contenido del Kit
En la carpeta sass
tenemos el archivo principal llamado style.scss
y 3 partes:
_mixins.scss
_normalize.scss
_variables.scss
Usted puede añadir mas partes o reglas en style.scss
.
El archivo de _mixins.scss
contiene algunos mixins Sass elementales, el archivo _normalize.scss
unifica los estilos entre los distintos navegadores y el archivo _variables.scss
contiene un conjunto de variables básicas para trabajar en el proyecto.
Sistema de grilla y Media Queries
El Sistema de grilla tiene dos breakpoints (se puede cambiar el valor en _variables.scss
):
- tablet (md)
- mobile (sm)
Media queries
Ejemplo de uso de media queries:
@include tablet {
header {
background: #000;
}
}
@include mobile {
header {
background: #444;
}
}
Sistema de grilla
Tenemos tres componentes de la grilla:
- Contenedores (
.container
) - Filas (
.row
) - Columnas (
.col-x
or.col-bp-x
)
En el archivo de variables se puede setear el número de columnas y el espaciado de la grilla.
Ejemplo de uso del sistema de grilla:
<div clas="container">
<div class="row">
<div class="col-4 .col-md-6 .col-sm-12">
.col-4 .col-md-6 .col-sm-12
</div>
<div class="col-4 .col-md-6 .col-sm-12">
.col-4 .col-md-6 .col-sm-12
</div>
<div class="col-4 .col-md-12">
.col-4 .col-md-12
</div>
</div>
</div>
Grunt
Este kit incluye un Gruntfile que compila Sass y utiliza el plugin autoprefixer de PostCSS. Siéntase libre de añadir sus propios plugins al proyecto.
Cómo empezar
- Descargar el Kit o clonar el repositorio.
- Cambiar el nombre de la carpeta por el nombre de su proyecto.
- Abrir la línea de comandos e instalar dependencias:
npm install
- Correr
grunt
para compilar y desarrollar. - Desarrolle su proyecto.
Bower
bower install sass-starter-kit --save