GithubHelp home page GithubHelp logo

ro0t / boiler Goto Github PK

View Code? Open in Web Editor NEW
23.0 4.0 1.0 600 KB

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.

Home Page: https://boiler.js.org

JavaScript 24.92% HTML 24.04% CSS 32.72% Vue 18.33%
javascript sass sass-mixins boilerplate webpack html website web development development-tools

boiler's Introduction

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/)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.