/Boiler

A frontend framework that uses Vue.js and already had state management and routing set up, including a feature rich Sass framework created by Igital.

Primary LanguageCSS

Boiler

Another javascript framework, but this one has Swag, Emojis and Vue! 👾 made by Adam from https://igital.co

Including:

  • Vue.js
  • Vue Router and VueX for State management
  • Hot 🔥 reloading dev server
  • Swag Sass Framework 💎
  • Super simple responsive Css ⭐️
  • ES6 Javascript 😎
  • Did I mention Emojis already? ⛄️

Responsive example

Responsive example with Boiler

Configuration

Before you install and run the webpack compiler, edit the config /config/settings.json and insert your values there.

Development

Download the project, install packages with yarn or npm install and run the dev server.

git clone https://github.com/ro0t/Boiler.git
cd Boiler
yarn
npm run dev

Production

Assuming you've already installed all the packages, just run npm run build and your files should end up in the public/ directory, ready for production use.

npm run build

Vue Components

Insert your Vue components at /app/src/components and configure the main component called main. The main component has access to all the middleware supplied in app/bootstrap.js and configured in app/src/app.js

Stylesheets

Edit the config files in /app/style/config/ to fit your needs. Use styled scoping for Vue components, you can import the Swag sass framework to get all the hot mixins and variables like this:

<style lang="scss" scoped>
	@import '../swag';

	h1 {
		font-size: 2em;
		font-weight: 100;
		color: $main;

		@include size('large') {
			color: $avocado;
		}

		@include size('medium') {
			color: $strawberry;
		}

		@include size('small') {
			color: $pumpkin;
			font-size: 1.5em;
		}
	}
</style>

The checklist

In the project you can find a CHECKLIST.md file to help you prepare for launching your website.

  • Started using Boilertal
  • Imported the Igital Swag Sass Framework
  • Created your Vue components
  • Favicon
  • Meta description and default open graph tags have been added
  • Google Analytics ID inserted
  • Minified Javascript & CSS
  • Images have been optimized
  • Tested in all browsers (except IE 🤮)
  • Proofread all content
  • Make sure all links work, test clicking on all of them 😈
  • Add a sitemap
  • Validation, validate them forms!!1
  • Added a Print stylesheet? Check how your web looks in print mode CMD+P
  • Test your entire website... 🤡

Special thanks

The web penguin Jón Þór for showing me 30 Seconds of CSS. 😍

Thanks to Atomiks for all the tips and tricks. ⭐️ (https://github.com/atomiks/30-seconds-of-css)

Thanks to Evan You (true legend) for making Vue.js (https://vuejs.org)

Thanks to the awesome devs of Webpack for their super moist bundler (https://webpack.js.org/)