This Gist outlines the gulp workflow that will:
public/This Gist also assumes you already know how to install npm modules, gitignore, create directories and create files via the command line.
| // Imports ///////////////////////////////// | |
| @import "partials/reset"; | |
| @import "partials/clearfix"; | |
| // Really ugly styles ///////////////////////////////// | |
| body{ | |
| background-color: red; | |
| font-size: 40px; |
Write html for the largest, most complex layout; style for the smallest, simplest layout.
| // Resets, Clearfix, etc | |
| // import reset and clearfix | |
| // Variables | |
| $dark: #222; | |
| $light: #EEE; | |
| $highlight: orange; | |
| $padding: 20px; | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>block family</title> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| </head> | |
| <body> | |
| <h1>block family</h1> |
Run gulp. This project uses the Gulp + Livereload + Sass Project boilerplate, however all of this should already be set up for you.
Check that Livereload is running.
Check that sass is compiling. (set a variable, use the variable, then check if gulp compiles to a proper css file)
| var gulp = require('gulp'); | |
| var sass = require('gulp-sass'); | |
| var connect = require('gulp-connect'); | |
| gulp.task('connect', function(){ | |
| connect.server({ | |
| root: 'public', | |
| livereload: true | |
| }); | |
| }); |