A modern and flexible front-end boilerplate, built with SASS, ES6 and Webpack.
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
public
.babelrc
.eslintrc.js
.gitignore
.stylelintignore
.stylelintrc.js
README.md
package-lock.json
package.json
postcss.config.js
webpack.config.js
yarn.lock

README.md

Fuji Front-end Boilerplate

A modern and flexible front-end boilerplate, built with SASS, ES6 and Webpack.

Installation

Simply clone down this boilerplate down and run either yarn install or npm install to install the dependencies. You can then run npm run dev to compile the assets.

When developing, keep the webpack watcher running in the background with the npm run watch command in the terminal.

When you're ready to push to production, run npm run production to compile and minify the assets.

Features

Webpack

This boilerplate comes setup with webpack, which compiles, concatenates and minifies the assets. It also comes with several plugins:

Note: PurifyCSS watches your views so that it can remove any unused CSS. This means you need to specify the path to your views in webpack.config.js. By default, this is set to public/**/*.html; however, you will need to change this based on your project.

For example, if you are using this boilerplate for a Ruby on Rails project, you will need to change it to watch for .html.erb files in the view folder:

new PurifyCSSPlugin({
 	paths: glob.sync(path.join(__dirname, 'app/views/**/*.html.erb')),
}),
  • Stylelint: A webpack plugin to lint your CSS/Sass code using stylelint.

Note: I've purposely kept the .stylelintrc config minimal, so you are free to customise it to your preferences.

Yarn

This boilerplate comes installed with Yarn, which you can use instead of NPM to manage your dependencies. So make sure you have it installed so you can enjoy its benefits: https://yarnpkg.com/en/docs/install

Why Yarn?

SASS & PostCSS

This boilerplate uses the SASS preprocessor for it's styles, but also comes equipped with the PostCSS postprocessor.

This gives us access to some useful PostCSS plugins, including Autoprefixer and pxtorem.

If you want to add more plugins, then simply install the dependency with Yarn and then add it to the postcss.config.js file.

The 7-1 Pattern

This boilerplate uses the 7-1 Pattern to organise its scss files. You can read more about it here.

To summarise, the files are organised in such a fashion:

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
|– app.scss              # Main Sass file

ES6

This boilerplate is also compatible with ES6, thanks to Babel, so we don't have to worry about browser support. ES6 brings with it a lot of awesome features, which make writing JavaScript even more fun and productive!

This boilerplate uses a component based system to link functionality to the front-end. Components are created as such:

// Hello.js

export default class Hello {
	constructor(wrap) {
		const defaults = {
			message: 'Hello, World!'
		}

		this.options = defaults
		this.wrap = wrap

		this.wrap.addEventListener('click', () => this.sayHello())
	}

	sayHello() {
		alert(this.options.message) // Hello, World!
	}
}

They are then linked to a JavaScript selector, so the behaviour can be triggered in your views:

// app.js

import Hello from './components/Hello.js'

...

const inits = [
	['js-hello', Hello],
]

...

// index.html

<button class="js-hello">Say hello</button>

Note: This boilerplate does not come with jQuery included by default. You can easily add it by downloading it or adding this CDN to your views:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Sprites

This boilerplate uses svg-sprite-loader to create sprites out of your SVGs.

Simply add your .svg files to assets/svg, and then import then in assets/javascripts/svg.js:

import '../svg/logo.svg'

To use your sprites in your markup, you just refer to them as:

<svg><use xlink:href="#id"></use></svg>

Linters

This boilerplate comes with two linting tools: ESLint for your JavaScript and stylelint for your styles.

By default, ESLint is using the Airbnb config. Their JavaScript style guide can be found here.

If you want, you can use the .eslintrc.js file in the root of the project to customise this to your liking, by either adding a new config, or adding custom rules to the current one.

Likewise, you can find the configuation files for stylelint in the root of the boilerplate in .stylelintrc.js.

As mentioned above, I've purposely kept the lint config files minimal, so you are free to tailor them to your preference.

Read more here:

How to use

Setup WordPress

To setup WordPress to use with this boilerplate, download a copy of it and rename the folder to public. Move the folder into the boilerplate's directory, replacing the public folder that is already inside.

It is recommended to use the Fuji WordPress Theme with this boilerplate. Simply clone it down into your-project/public/wp-content/themes.

You will need to remember to tell Webpack PurifyCSS plugin to watch the correct view files. For example, if you were using the Fuji Wordpress Theme, you would need to change public/**/*.html to public/**/*.twig in webpack.config.js:

new PurifyCSSPlugin({
 	paths: glob.sync(path.join(__dirname, 'public/**/*.twig')),
}),

Other Frameworks

This boilerplate is not restricted to just WordPress. It can be used with various frameworks, such as CraftCMS and Ruby on Rails. You will just need to fiddle the folders around to fit that framework's folder structure.

Assets

There is a media/ folder included by default in the public/ folder, which contains folders for images and fonts. It is recommended to store your static assets here to reference in your stylesheets and the front-end.

BEM Naming

This boilerplate uses BEM methodology for naming CSS selectors by default.

Pattern:

.block__element--modifier

Examples:

.navbar__link
.wrapper--small
.form__submit--disabled

JavaScript hooks

These are selectors for targeting components for JS behaviour.

Pattern:

.js-hook

Examples:

.js-dropdown
.js-carousel
.js-toggle-active

Grid system

This boilerplate uses @kristoferjoseph's Flexbox Grid. Read the docs for more info.

Examples:

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

License

Open source under the MIT License.
https://opensource.org/licenses/MIT