Responsive front-end HTML and SCSS starter template using a simple Flexbox Grid, basic Design System patterns and ES6 support for writing JavaScript functions. Powered by Gulp.
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:
/src/html
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/layouts
to store your layouts, always requires a default.html
/html/pages
to store all your different pages (such as index.html
, about.html
, contact.html
etc.)/html/partials
to store all your different partials (such as header.html
, navigation.html
, footer.html
etc.)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.
/src/img
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" />
/src/js
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).
/src/scss
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
/_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
/scss/brick
/scss/block
/scss/section
/scss/template
/scss/app.scss
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!
/scss/base/_base-color
/scss/base/_base-space
(or just use the default)/scss/base/_base-size
(or just use the default)/scss/base/_base-breakpoint.scss
and the grid width in /scss/base/_base-grid.scss
gulp
in your command line to run BrowserSync and start watching for changes/html/partials
, /scss/brick
and /scss/block
/html/pages
, /scss/section
and /scss/template
/src/js
/dist
folder to your webserver/dist
folder when running the gulp
or gulp build
command.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!