A responsive front-end boilerplate that uses Gulp, a simple Flexbox grid and basic Design System patterns to get you working on new ideas faster instead of having to set up a lot of stuff over and over again (DRY). The template uses a couple of Gulp plugins to get you up and running and creating a new project in no time. The SCSS contains a couple of foundations for each project you create (like colors, fonts, grid, breakpoints, shadows, spacing, sizing, borders etc.). BaseCSS runs your HTML, SCSS, JavaScript and images from the /src folder to a directly distributable /dist folder.
Either hit the Use this template button at the top of this page to create a repository based on this template or clone/download BaseCSS to your local computer (on GitHub). Start with installing the necessary Gulp plugins by typing the following command in the command line from within your local project folder. Example:
git clone https://github.com/markteekman/BaseCSS
cd BaseCSS
npm install
Now either run Gulp for building your project and automatically watch for changes in your HTML, SCSS and JavaScript:
gulp
Or just build your project once without watching for changes:
gulp build
If you get an error about a missing binding run:
npm rebuild node-sass
When you use the gulp command you can check your project in your browser using BrowserSync by accessing a local address like http://localhost:8000. Use the address BrowserSync gives back to you in your command line tool. BrowserSync automatically reloads the browser when changes happen in your HTML, SCSS or JavaScript.
To use the free Font Awesome 5 Solid Icons library that's included in BaseCSS you can use something like
<i class="fas fa-home"></i>in your HTML. The Font Awesome JavaScript will convert this tag into an accessible SVG which you can easily manipulate through your SCSS files with your own classes or a global .svg-inline--fa class. To see all the icons you can use, checkout the Font Awesome Icon Gallery. If you don't want to use Font Awesome you can simply remove the package:
npm remove --save-dev @fortawesome/fontawesome-free
and update your Gulp file by removing the copy function (faJS):
// remove this and all faJS instances when you don't want to use font awesome
const faJs = () => {
return src("node_modules/@fortawesome/fontawesome-free/js/all.min.js")
.pipe(dest("src/js/libs"));
}Your /src folder is where you'll be doing your thing. As long as you have gulp running or have run the gulp build command at least once, you have a /dist folder that you can drop on a server (that is, if your not building some kind of CMS behind it). The /src folder consists of four mayor sub folders:
BaseCSS uses ZURB Foundation's Panini as your HTML templating engine (which in turn uses Handlebars.js). Great for re-usability of HTML code and for your workflow efficiency! This is what your /html folder structure looks like and how you use it:
/html/layoutsto store your layouts, always requires adefault.html/html/pagesto store all your different pages (such asindex.html,about.html,contact.htmletc.)/html/partialsto store all your different partials (such asheader.html,navigation.html,footer.htmletc.)
For a more indepth look on how to use Panini, check out the the Foundation docs here. I've set up a default.html to get you started and an index.html with an example of the Flexbox based grid.
Your image folder simply contains your media assets. The Gulp plugin gulp-imagmin optimizes this folder for you and generates the optimized images to the /dist folder. You can use Panini's {{root}} function to link to your image, for example:
<img src="{{root}}img/placeholder-logo.png" />This folder contains all your JavaScript. You can structure it how you like, the Gulp plugin gulp-concat will concatenate all the .js files in /src/js and all it's sub folders. In /js/libs you can include different libraries (this is where the Font Awesome JavaScript is for example).
The scss folder of this templates contains a couple of presets set in /scss/base to get you going quick. Setting up a new project? Just 'tweak' these settings. I'll break it down a little so you know where to go:
/scss/base- This folder contains all your base styles. See it as the foundation of everything you make. It contains your color variables, box shadows mixins, borders mixins, fonts, sizing mixins, spacing variables, grid and mobile breakpoints.
/_base-border.scss/_base-breakpoint.scss/_base-color.scss/_base-elevation.scss/_base-font.scss/_base-grid.scss/_base-icon.scss/_base-outline.scss/_base-print.scss/_base-reset.scss/_base-size.scss/_base-space.scss
- This folder contains all your base styles. See it as the foundation of everything you make. It contains your color variables, box shadows mixins, borders mixins, fonts, sizing mixins, spacing variables, grid and mobile breakpoints.
/scss/brick- Bricks are the smallest components of your system like lists, buttons, form elements, labels etc. Use what you define in base to build your bricks.
/scss/block- Blocks are a collection of your bricks, things like navigation menu's, dropdown's, call to actions, widgets, cards etc. go here. Use what you define in base and bricks to build your blocks.
/scss/section- Sections contain a collection of blocks and bricks. The easiest examples would be the header and footer of your website.
/scss/template- Templates are your page specific styles, for example home, about, shop or contact.
/scss/app.scss- This files imports all your SCSS partials. Don't forget to include new ones here.
This is just an example of how you could use this template. You are, of course, completely free to go about it as you please!
- Download and install the template (refer to "how to use")
- Setup your color scheme in
/scss/base/_base-color - Define a spacing system in
/scss/base/_base-space(or just use the default) - Define a sizing system in
/scss/base/_base-size(or just use the default) - If needed change your breakpoints in
/scss/base/_base-breakpoint.scssand the grid width in/scss/base/_base-grid.scss - Run
gulpin your command line to run BrowserSync and start watching for changes - Structure your project partials in
/html/partials,/scss/brickand/scss/block - Build up your pages, sections and templates in
/html/pages,/scss/sectionand/scss/template - Write your necessary JavaScript in
/src/js - Deploy your compiled website from the
/distfolder to your webserver
- @babel/core compiler core, for compiling JavaScript ES6 into backwards compatible code.
- @babel/preset-env presets for different ES environments.
- @fortawesome/fontawesome-free Font Awesome 5 solid icons.
- autoprefixer automatically add vendor prefixes to CSS.
- browserSync watch for changes in HTML, SCSS and JavaScript and refresh browser accordingly.
- cssnano minify CSS.
- del delete and rebuild the
/distfolder when running thegulporgulp buildcommand. - gulp task automation of Gulp plugins.
- gulp-babel use babel pipe task in gulp file.
- gulp-cache cache images.
- gulp-concat concatenate all JavaScript into one .js file.
- gulp-imagemin automatically optimize images.
- gulp-postcss use autoprefixer and cssnano tasks.
- gulp-sass compile SCSS files into one .css file.
- gulp-sourcemaps debug SCSS and JavaScript in the browser.
- gulp-uglify minify the concatenated JavaScript file.
- panini template engine for your HTML.
- scss-resets include popular SCSS resets.
Many awesome people and organizations around the world, including ZURB Foundation, Solved by Flexbox, Zell, CSS Tricks and many more. Made to support the Open Source mindset.
If you've got any ideas on how to improve this template then let me know! I'm always looking on how to optimize and standardize my work so I can focus on what matters: creating new things :)
MIT. Feel free to do as you please!