Si llevas tiempo trabajando con CSS seguro que has oído hablar sobre estos dos Frameworks de CSS: Foundation Sites y Bootstrap 4. En esta entrada veremos la mejor manera de incluirlos en nuestro proyecto aprovechándonos de Gulp y SCSS.

¿Porqué Npm?

Seguro que os preguntáis ¿porqué hacerlo con npm? Lo más rápido sería descargar el framework en css e incluirlo en nuestro proyecto, después en un archivo aparte incluir nuestro CSS personalizado. Esto nos genera una serie de desventajas:

1. Si quiero modificar el color de los botones? La tipografía base o el tamaño de los títulos debo hacerlo con mi propio CSS o modificando el CSS del framework, esto casi siempre acaba con la utilización de !important que no son muy recomendables
2. Tengo que incluir todo el framework: En muchos casos no queremos todos los componentes que tiene el framework pero los incluimos igual y el tamaño de nuestro CSS aumenta

Ventajas de incluirlos con Npm

1. Customización: vía SCSS
2. Actualizaciones: Al tenerlo separado de nuestro proyecto podemos actualizar sin tener miedo a perder los cambios que realicemos
3. Acceso a variables y funciones: Podemos acceder a todas las variables de las que dispone y utilizarlas en nuestros archivos
4. Inclusión parcial: Al tener el framework en SCSS solo incluimos los componentes que nos interesan

¿Porque Gulp?

Con Gulp incluiremos el framework que queramos en nuestro archivo css principal y del mismo modo que con nuestro css le podemos aplicar filtros como «autoprefix, sourcemaps o minificar». Si no estás familiarizado con Gulp.js te recomiendo leer antes mi anterior artículo donde explico los conceptos básicos.

Partiremos del punto donde lo dejamos en el último artículo

Punto de partida

Dejamos la tarea de estilos de la siguiente forma:

gulp.task(‘styles’, function() {

[ws]return gulp.src(«./assets/scss/**/*.scss»)

[ws][ws].pipe(sass())

[ws][ws].pipe(autoprefixer({

[ws][ws][ws]browsers: [‘last 2 versions’],

[ws][ws][ws]cascade: false

[ws][ws]}))

[ws][ws].pipe(cleanCSS())

[ws][ws].pipe(rename({

[ws][ws][ws]suffix: «.min»,

[ws][ws]}))

[ws][ws].pipe(gulp.dest(«./static/css»))

[ws][ws].pipe(browserSync.stream());

});

Añadiendo Foundation Sites

Primero vamos a ver cómo añadir Foundation Sites como dependencia de nuestro proyecto. Abrimos el terminal, navegamos a la carpeta base de nuestro proyecto y escribimos:

npm install foundation-sites –save

Ahora modificamos la función styles de nuestro Gulpfile de la siguiente forma para incluir Foundation Sites:

gulp.task(‘styles’, function() {

[ws]return gulp.src(«./assets/scss/**/*.scss»)

[ws][ws].pipe(sass({

[ws][ws][ws]includePaths: [«node_modules/foundation-sites/scss»]

[ws][ws]}))

[ws][ws].pipe(autoprefixer({

[ws][ws][ws]browsers: [‘last 2 versions’],

[ws][ws][ws]cascade: false

[ws][ws]}))

[ws][ws].pipe(cleanCSS())

[ws][ws].pipe(rename({

[ws][ws][ws]suffix: «.min»,

[ws][ws]}))

[ws][ws].pipe(gulp.dest(«./static/css»))

[ws][ws].pipe(browserSync.stream());

});

¡Perfecto! con esto ahora Gulp sabe donde esta Foundation Sites en nuestro proyecto, nos falta incluirlo en nuestro css, para eso tenemos que añadir estas líneas en al archivo app.scss

@import ‘foundation’;

@include foundation-everything();

La primera línea importa Foundation Sites a nuestro archivo, la segunda es una función hecha por Foundation para generar todo el CSS (Esta función añade todos los componentes de golpe, si queréis escoger qué componentes añadir podeis verlo en su documentación.

Si ejecutamos nuestra tarea styles de Gulp veremos que el archivo app.css contiene todo el código de Foundation Sites

gulp styles

Modificando estilos en Foundation Sites

Todas las opciones que se pueden modificar se encuentran en el archivo

node_modules/foundation-sites/scss/settings/_settings.scss

Lo interesante es que todas estas variables ya están definidas, entonces solo tenemos que sobrescribir lo que nos interese, lo más seguro es que queramos cambiar los colores principales, así que vamos a copiar la variable$foundation-palette a nuestro archivo de la siguiente forma, modificando los colores que nos interese:

@import ‘foundation’;

$foundation-palette: (

[ws]primary: #1779ba,

[ws]secondary: #767676,

[ws]success: #3adb76,

[ws]warning: #ffae00,

[ws]alert: #cc4b37,

);

@include foundation-everything();

Es importante incluir las variables que queremos entre el@import i el@include de forma que sobrescriban las variables predefinidas, para este ejemplo lo hemos puesto directamente en el mismo archivo pero es recomendable moverlo todo a otro archivo e incluirlo en el principal.

Generamos el css otra vez

gulp styles

Con esto ya tenemos Foundation Sites en nuestro proyecto!

Añadiendo Bootstrap 4

Para incluir Bootstrap el proceso es similar, primero, navegamos a la carpeta de nuestro proyecto vía terminal y lo instalamos como dependencia:

npm install [email protected] –save

(Actualmente Bootstrap 4 se encuentra en Alpha, comprobad si ha cambiado en este enlace)

Ahora modificamos la función styles de nuestro Gulpfile de la siguiente forma para incluir Bootstrap:

gulp.task(‘styles’, function() {

[ws]return gulp.src(«./assets/scss/**/*.scss»)

[ws][ws].pipe(sass({

[ws][ws][ws]includePaths: [«node_modules/bootstrap/scss»]

[ws][ws]}))

[ws][ws].pipe(autoprefixer({

[ws][ws][ws]browsers: [‘last 2 versions’],

[ws][ws][ws]cascade: false

[ws][ws]}))

[ws][ws].pipe(cleanCSS())

[ws][ws].pipe(rename({

[ws][ws][ws]suffix: «.min»,

[ws][ws]}))

[ws][ws].pipe(gulp.dest(«./static/css»))

[ws][ws].pipe(browserSync.stream());

});

Perfecto, con esto ahora Gulp sabe donde esta Bootstrap en nuestro proyecto, pero nos falta incluirlo en nuestro css, para eso tenemos que añadir esta línea en al archivo app.scss

@import ‘bootstrap’;

Si ejecutamos nuestra tareastyles de Gulp veremos que el archivoapp.css contiene todo el código de Bootstrap

¿Cómo modificamos Bootstrap?

De la forma anterior, no podemos modificar las variables de Bootstrap para ello, lo que haremos es borrar la línea anterior y copiar la estructura del archivo en

node_modules/bootstrap/scss/bootsrap.scss

Este archivo tiene la estructura completa, así que al copiarlo podemos realizar las personalizaciones que queramos, podemos incluir sólo los componentes que nos hagan falta

Si os fijáis el propio Bootstrap tiene un archivo «custom» después del de variables, en este punto es donde podemos aplicar nuestros cambios

@import «variables»;

@import «mixins»;

@import «custom»;

// Reset and dependencies

@import «normalize»;

@import «print»;
// Core CSS

@import «reboot»;

@import «type»;

@import «images»;

@import «code»;

@import «grid»;

@import «tables»;

@import «forms»;

@import «buttons»;
// Components

@import «transitions»;

@import «dropdown»;

@import «button-group»;

@import «input-group»;

@import «custom-forms»;

@import «nav»;

@import «navbar»;

@import «card»;

@import «breadcrumb»;

@import «pagination»;

@import «badge»;

@import «jumbotron»;

@import «alert»;

@import «progress»;

@import «media»;

@import «list-group»;

@import «responsive-embed»;

@import «close»;
// Components w/ JavaScript

@import «modal»;

@import «tooltip»;

@import «popover»;

@import «carousel»;
// Utility classes

@import «utilities»;

El archivo de variables de Bootstrap se encuentra en:

node_modules/bootstrap/scss/_variables.scss

Vamos a crear un nuevo archivo para nuestras variables en nuestra carpeta de proyecto, por ejemplo_my-custom.scss, lo ponemos en la misma carpeta que el app.scss y lo añadimos justo debajo del @import «custom» de esta forma

@import «variables»;

@import «mixins»;

@import «custom»;

@import «my-custom»;

…

Entonces enmy-custom.scss podemos añadir las variables que queramos modificar, como por ejemplo:

$brand-primary: #ff0000;

$body-bg: #fefefe;

Guardamos y ejecutamos nuestra tarea de styles para generar de nuevo el css:

gulp styles

Con esto ya tenemos Bootstrap 4 incluido en nuestro proyecto!

Conclusión

Cómo veis, es muy fácil incluir nuestro framework favorito a un proyecto de esta forma y ajustarlo a nuestras necesidades. El código queda mucho más limpio y nos permite reutilizar partes de nuestro código sin prácticamente hacer cambios