This is our toolbelt how to start a new project from scratch.
Latest Release:
If you're interested in HTML patterns, code snippets and best practices, try nikita.html. If you want to write efficient and scalable (S)CSS-code for big websites, try nikita.css.
- Grunt – js task runner
- Assemble – static site generator
- SASS with LibSass – css preprocessing
- nikita.html – HTML conventions and coding guidelines
- nikita.css – (S)CSS conventions and coding guidelines
- nikita.js – JS conventions and coding guidelines
- Bower – package manager for frontend libraries
- SCSS-Lint – linter for SCSS files
- Livereload – browser auto refresh
Grunt depends on node.js, SCSS-Lint depends on Ruby. Some of the Grunt plugins depend on command line tools to be installed on your (build) system.
These are the minimum requirements for the project setup:
- Node.js & Node Package Manager
- Grunt Command Line Interface –
sudo npm install -g grunt-cli - Bower –
sudo npm install -g bower - SCSS Lint –
sudo gem install scss-lint
If you want to use the browser-auto-refresh-feature, get LiveReload.js and install it to the root-folder of localhost.
Open your preferred command line tool and choose your project directory.
Either use ./setup-dev-env.sh. This will start a shell script to check requirements, then runs npm install and bower install automatically to install Grunt and Grunt plugins required for the build script plus Bower and Bower packages.
Or use npm install and bower install if your are on Windows (you have to check the requirements manually). This will install Grunt and Grunt plugins required for the build script plus Bower and Bower packages.
gruntorgrunt build– start build script- http://localhost:9002/ or http://0.0.0.0:9002/ – watch your build-directory in the browser (livereload is running on port 9002)
grunt dist– start distribution build script
If you want to specify a different port, you can start the script with the --port option:
grunt --port=9010 will launch the webserver on http://0.0.0.0:9010/
If you dont't like the command line you can use an alternative called grunt-devtools for the Chrome browser to start the grunt tasks.
- Download the Grunt Devtools extension for Chrome Developer Tools from the Chrome Web Store.
- Global install via
npm install -g grunt-devtools. - Run
grunt-devtoolsin a directory with a Gruntfile. - Open Chrome Devtools and find the Grunt tab. Your grunt tasks should now be accessible from within Chrome.
You don't like to stare permanently on your console? So wouldn’t it be great if your system could notify you when your fresh build is ready to consume or when anything bad happened? Meet grunt-notify, an automatic desktop notification service for Grunt using Growl for OS X or Windows, Mountain Lion and Mavericks Notification Center and Notify-Send. Just install this plugin via npm and load it in your Gruntfile.
- assemble
- bower
- connect-livereload
- grunt
- grunt-accessibility
- grunt-autoprefixer
- grunt-concurrent
- grunt-contrib-clean
- grunt-contrib-concat
- grunt-contrib-connect
- grunt-contrib-copy
- grunt-contrib-cssmin
- grunt-contrib-imagemin
- grunt-contrib-jshint
- grunt-contrib-requirejs
- grunt-contrib-uglify
- grunt-contrib-watch
- grunt-gitinfo
- grunt-group-css-media-queries
- grunt-htmlhint
- grunt-jsdoc
- grunt-modernizr
- grunt-newer
- grunt-pagespeed
- grunt-phantomas
- grunt-photobox
- grunt-prettify
- grunt-sass
- grunt-scss-lint
- grunt-string-replace
- grunt-svg-css
- grunt-svgmin
- grunt-svgstore
- grunt-sync
- handlebars-helper-autolink
- handlebars-helper-partial
- handlebars-helpers
- jit-grunt
- time-grunt
The kickstart-setup provides the three main folders source/, build/ and dist/. All source-files will be put to the source-folder like templates, fonts, images, js- and sass-files. These files will be processed by several grunt tasks – e.g. grunt-sass: sass -> css – and then stored in the build-folder. From there you can view the generated html-files in the browser. The dist-folder is built up like the build-folder. The main difference between build/ and dist/ is, that dist/ has combined and minified css/js files, no unnecessary files or code-comments. The build-folder is for debugging your files, the dist-folder should be used for production.
$ tree -d -I node_modules
.
├── bower_components
├── build
│ ├── ajax-content
│ ├── bower_components
│ ├── css
│ ├── fonts
│ ├── img
│ │ ├── appicons
│ │ └── bgs
│ └── js
│ └── modernizr
├── dist
│ ├── ajax-content
│ ├── bower_components
│ ├── css
│ ├── fonts
│ ├── img
│ │ ├── appicons
│ │ └── bgs
│ └── js
│ └── modernizr
├── source
│ ├── ajax-content
│ ├── assemble
│ │ ├── data
│ │ ├── helpers
│ │ ├── layouts
│ │ ├── pages
│ │ └── partials
│ ├── fonts
│ ├── img
│ │ ├── appicons
│ │ ├── bgs
│ │ ├── dev
│ │ ├── icons
│ │ └── temp
│ ├── js
│ │ └── modernizr
│ └── sass
│ ├── blocks
│ ├── extends
│ ├── mixins
│ └── variables
└── tmp
├── svgcss
├── svg-bg-extends
└── svgmin
└── bgs
For the HTML structure, please have a look at nikita.html. This sub project describes the HTML coding standards and conventions.
For the CSS structure, please have a look at nikita.css. This sub project describes the CSS coding standards and conventions.
For the JS structure, please have a look at nikita.js. This sub project describes the JS coding standards and conventions.
The page will contain two parts of javascript.
The first part is in assemble/layouts/lyt-default.hbs at the beginning:
<script src="js/modernizr.js"></script>It ensures that the html5shiv is loaded and modernizr is ready. The modernizr file is generated automagically with all modernizr features, which are used in your sass/**/*.sass and js/**/*.js files. The js/modernizr folder contains custom tests for modernizr. Those will be added to the modernizr.js, too.
The second part is at the end of the file (before the closing </body> tag:
<script data-main="app" src="js/main.js"></script>The data-main attribute ensures, that the app.js will be loaded (as soon as main.js is ready). The js/main.js file is generated by using the project specific js/_requireconfig.js and the generic requirejs.js from bower components. For dist mode the main.js file contains everything, which is required or included in the js/_requireconfig.js.
There're two possible ways to use icons.
You'd like to edit your icons with CSS, e.g. to change the fill-color or you have one and the same icon in different colors? Then this is your choice.
- Just put your SVG-icons into
source/img/icons. - All icons will be processed with the svgmin-task and put into the
tmp/svgmin/iconsfolder. - Afterwards the svgstore-task uses these icons to put together an
icon-sprite.svgwhich will be copied to theimg/iconsfolder. It must be injected with ajax directly after the opening<body>element at the top of the document (have a look at the filelyt-default.hbsin thelayoutsfolder). - To include a SVG-icon use
<svg class="your-class-name"><use xlink:href="#filename" /></svg>in your .hbs-files. Make sure you use a class name on the SVG to size it. - Now you can use
.your-class-name { fill: #f30; }to color your icon.
For further infos read the article Icon System with SVG sprites by Chris Coyier.
If you have to include your icon as a background-image, e.g. because you can't simply add a svg element, then you should use this method.
- Just put your SVG-icons into
source/img/bgs. - All icons will be processed with the svgmin-task and put into the
tmp/svgmin/bgsfolder. - Afterwards the svgcss-task uses these icons to produce SCSS-files (all icons are included as data-URIs in the form of SASS-placeholders), which will be put into
tmp/svgcssfolder. - These SCSS-files will now be processed by the string-replace-task to get different placeholder-extends. They are saved into
tmp/svg-bg-extendsfolder. - Now you can include your icons by using the
_svg-background.scssmixin. Just type@include svg-background(name-of-your-icon);.
If you're asking yourself »Why not …?« have a look at my WHYNOT.md file. There we might answer some common questions. :)
nikita.kickstarter is licensed under CC0: Public Domain Dedication, please see NIKITA-LICENSE.md for further information.