Go from sketch to wireframe to prototype with this front-end development and design kit by generating static HTML pages from dynamic templates and partials, and modular CSS structure using SASS, allowing you to keep everything organised the way you need it to be.
We’re not designing pages, we’re designing systems of components
Enable the building and demonstration of tangible products and reduce describing and documenting them, by facilitating "in-browser design" ("deciding in the browser") using:
- A modular/atomic system of reusable components/patterns
- Flexible tools – opt-in over opt-out
All features are optional, if you don't want to use one just comment it out in the appropriate tasks/task-name.js file. Everything is highly configurable and automated with Grunt.
- Modular templating and partial/includes system (Handlebars) – Assemble
- CSS pre-processing – SASS
- Livereload your designs instantly after saving on multiple devices (without a browser plugin)
- SVG conversion to PNG and Base64 encoded CSS for fallback - Grunticon
- Package/asset management (jQuery, modernizr, etc.) - Bower
- Minification of JS and CSS
- Image optimisation
- Rule based linting of JS, CSS, HTML and Accessibility
- Reordering/formatting of CSS according to rules you set – CSSComb
- HTML beautification according to rules you set – Prettify
- Growl notifications
The Sass/CSS adheres somewhat closely to the following guidelines (needs cleanup):
NOTE: This will eventually all be handled by a script (optional).
If you are unfamiliar with terms like homebrew, npm, ruby and bundler or are having difficulty with the instructions below, read the full install instructions.
If you already have node installed, read on.
gem install sass compass bundler
npm install -g grunt grunt-cli bower
npm install && bower install && bundle install
NOTE: Need to elaborate on this
A lot of the variables are defined in Gruntfile.js and also in package.json.
Source files are in the src directory and the static/flat output is output to the build directory.
Start a server with livereload and edit your HTML (.hbs), SASS or js files from the src and have the changes update in the browser without refreshing.
grunt serve
After you have changed any of the source files, generate new files in the build directory by running the following command:
grunt build
Most page and directory relatred settings are in tasks/options/assemble.js.
Matt Bailey's bones generator and his blog posts on using Grunt – the seed that started this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent