- Webknit
- WON
- Base
Here’s a comprehensive guide to Base, my front-end template.
Base is a CSS/SASS/HTML5 based mobile first front end template which is impeccably neat and tidy and is an ideal starting point for a web project of any size. It’s not a developers toolbox like Bootstrap or Zurb. It’s the basic foundations of a web project which are then built upon.
Please note!
I work on mac so things might differ slightly for the PC brigade.
I’m starting with the basics, including those that might not want to use grunt. Hopefully you might learn some other stuff about the template in the process.
Download the template here.
If you don’t want to use grunt then simple delete the following files
If you still want to use SASS without grunt then the files are in assets/SASS/. You could use something like codekit to compile your CSS, or perhaps you want to use terminal (SASS and Ruby need to be installed). If it’s the latter you can run this command from the root (where index.html is).
(If you don’t know how to install SASS or ruby then keep reading..)
sass --watch assets/SASS/style.scss:style.css --style compressed
This watches the style.scss file and every time it’s changed it compiles the code – including all the partials etc – to the main css file. The ‘compressed’ bit just minifys your CSS, it’s optional.
A quick little guide to the SASS stuff…
SASS Modules
SASS Partials
These are purposely basic, perhaps you want a vendor or typography file, add whatever you want.
For me, each new module gets it’s own partial and i add the @import into the main style.scss file. If it’s a smaller project I will just write all my code in style.scss with comments dividing each module/page. It’s a BASE, each project is different and so too is the code.
I still write vanilla CSS. Sometimes there is just no need to write SASS, especially when a project is small and I need things done quickly.
If you’re writing Vanilla CSS you will want to delete the following
Then just write Vanilla CSS in style.css. This CSS file still has everything that the SASS has, including grids etc. Check the demo code to see how that works. You can read about the media queries etc here.
Ok first grunt uses node.js. You can download that here.
Next you’re going to need to install Grunt’s command line interface (CLI) globally. Open terminal and type this.
npm install -g grunt-cli
Next we need ruby in order to install stuff. I’m fairly sure all new macs come with ruby installed. Type
ruby -v
You should see what version you’re running. If for whatever reason you don’t have it you need to get yourself sorted here.
There are lots of different options, you have a read and choose your own.
Ok next you need to navigate to the Base folder. I simple drag it into the terminal, you might want to change directory (cd) to it?
Base uses some cool stuff to help it function proficiently. We’re using something called Susy for the grids, SASS to compile the sass and we will soon be making more use of Compass. To use these things we need to download the gems. I’ve set something up to download these. Staying in the same pace type the following in your terminal window..
gem install bundler
That installs the bundler gem. Then to start work on the project we type.
bundle install
Hopefully you’ve just installed what we need! You will see a gemfile.lock has been created in your files and that lists all the stuff we’ve downloaded and their versions.
For those of you who are still reading to find out how to use the SASS command I mentioned earlier, you can simply do this.
gem install sass
That installs the sass gem and allows you to run stuff like I mentioned before.
sass --watch assets/SASS/style.scss:style.css
Next we need the grunt stuff. This are the actual things that make the magic happen, so compiling the SASS, compressing the images etc.
Stay in the root directory and type.
npm install
Terminal should do a whole load of stuff and you will probably feel like the guy from swordfish. After that we’re ready to write some code.
I would recommend you read into how grunt works and how you can create your own stuff. Have a read of the gruntfile.js and see how the tasks are made. Also look at the JSON in package.json file and see how I include the stuff we just installed. Looks complex but it’s really not.
I’ve set up two simple grunt tasks. The default task simply watches the JS/SASS and compiles the code each time you save a file. To run this type
grunt
Open a SASS file and change something then check out style.css. You will see the code is compiled in there. Each time you save the JS it groups all the JS code together and creates a file called deployment.js. The index.html file is currently linked to the individual js files for those who might not use grunt. You might want to just have the following js file in the bottom of your document.
<script src="assets/js/script.js"></script>
The terminal is constantly watching the code to see if anything changes. To exit this mode type ctrl + c.
The second task I implemented is a deploy task. This compiles the SASS and JS and optimises the image file sizes.
Type the following to run that..
grunt deploy
This is a very simple task and there’s so much that you can do here. I’m going to introduce some more tasks in the future but I want to keep it as basic as possible. People might not want their JS or SASS checking and I have to make a decision where to draw the line.
And that’s it!
Pretty simple eh? I hope that you can see how easy it is to get Base running.
I will keep this page updated with information about Base and as always if you’ve any questions then I’m on twitter @webknit.
Thanks for reading