The idea is to build layout for my blog site that will be responsive - and these days that means mobile first. Although it is a simple site, I don't feel like building whole thing on my own with less. For me it is important to be less a for few reasons. First, bootstrap is natively built with less and offers a simple way of customization, secondly I'm more comfortable with it. No other requirements.
Usually I would use angular generator for any type of prototyping which includes bootstrap (I thing it is a sass version), but this time i want to create just a simple layout.
What to use?
So I can setup bootsrap manually (with some other boilerplate) and that would be really boring to do. Or i can use some generator. I will be using yeoman and find some of its generator.
Why using yeoman
Because it can create a template that contain grunt tasks that will automatically compile less files and also it has a built in http-server with auto reload. Probably few other convenient tasks, but these are two main reason. Otherwise I would need to create tasks manually which is little boring (a lot :).
What generator to use?
There is a list of these generators on this link and there are many less, bootstrap generators.
First I've tried generator-bootstrap but it was not what I expected. There wasn't grunt task etc... So the next I've tried is generator-bootstrap-less.
Install generator: npm install -g generator-bootstrap-less
Than mkdir for the project, cd into that folder and do yo bootstrap-less. I usually on mac open sublime with that folder with
subl ..
In terminal you can start http server with live reload with command grunt serve. This grunt task is available on almost all webapp
generators (actually i checked it only on angular generator) and if is not available you can manually add it. After executing command
browser will open and show a page.
Building layout
So from documentation: there is 12 columns greed system for every screen sizes.
I want to build the simplest layout there is. On mobile header, one column content and links on the bottom. For desktop i want fixed header, content of 8/12 and aside with links 3/12 with an offset of 1. Really original.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8"></div>
<div class="col-xs-12 col-md-3 col-md-offset-1"></div>
</div>
</div>
I've added some lorem ipsum text in the first col, and few links on the second, so i can see how it will look like.
The next thing is a header. I want that simplest default header. So i will use expamples from site and take a look at a source and copy everything between lines 30 and 51. I will change styling later, for now only copying things.
Now the problem is that content is under the fixed header. Documentation suggest adding padding-top: 70px to the <body>
tag.
If grunt serve task is running, less files will be automatically compiled and applied, and you will see changes in browser.
Styling
First of all maybe you want to look at this page.
Now when I'm satisfied (more or less) with this layout I will change fonts, add some background image and change the header background.
I don't want to manually override every bootstrap value, so I will change global bootstrap values which are located in a variables.less file. But this file is bower_component folder, so if I change it there and later decide to do update of
bootstrap (bower update) i will discard my settings. I think that the best solution is to make a copy of variables.less
in to my styles folder. And in my main.less file I need to import variables.
@import "../bower_components/bootstrap/less/bootstrap.less";
@import "variables.less";
Order is very important, because we want our settings to have higher priority than bootstrap's default settings. Also, grunt serve task is not watching bootstrap less folder, so if we make some changes there it will not automatically compile it in main.css.
Fonts
I already found font i want to use on google fonts, so i need to paste a link in a index.html and in variables.less change @font-family-sans-serif variable to use my font. Also I will update font size.
Header
If you want to change header colors you can also do that through variables.less file. Change navbar-inverse to navbar-default and then change @navbar-default-bg to your preference.
Background
First add background image to the <html> tag.
html{
background: url('../images/background.jpg') no-repeat center center fixed;
background-size: cover;
}
I had to change @body-bg to transparent so that background would be visible. But now everything is transparent. Add
some class to every column that need to have some non transparent background, add set it in css.
Example:
<div class="col-xs-12 col-md-offset-1 col-md-3 panel">
and in css:
.panel{
background: rgba(255,255,255,0.9);
}
Lot of things you can change easily with setting appropriate value in bootstrap variables file.
Sharing, subscriptions and comments
For each of these elements I am using third party services like disqus, addThis and mailchimp and I will create separate panel fore these widgets.
And that is enough for a simple blog.