Bootstrap Themes Free Email Course / 7 February 2017 - 17:33:58

Free bootstrap tutorials

Bootstrap Themes Made Easy, Free Email Course

Over the last year the Bootstrap themes scene has exploded and it's nice to see. Matt Lambert from Cardeo Creative, produced some themes of his own, wrote a book called Mastering Bootstrap, and has used themes from other developers. Over this time a few problems have come up and he’s decided to tackle them. One of these problems is that Bootstrap theming is hard. It takes a long time to create a theme which can be frustrating. Another problem Matt encountered is that there is a lack of good theming tools out there. This leads to lazy development and the common complaints we hear like all Bootstrap themes look the same. This couldn't be more wrong, the problem lies with the developer. But is that really their fault? Perhaps we need a better way. We’re happy to say Matt has found a better way and it involves using a couple of key tools when creating your themes.

### Less

The first tool you need to be familiar with is Less. If you're new to preprocessors don't let them intimidate you. Only using Less variables can save you a ton of time when creating a new theme; don't get distracted with all the other Less features at first. The key is to divide your theme up into smaller parts. A Less file for each component and a library Less file to hold all your global styles will do. Global styles are things like colors, fonts, margin, padding, borders, etc... These are the elements used everywhere and change the most in a theme. They are also the elements you spend most of your time tweaking. What if there was any easier way? There is, load them all into a library as variables then setup your theme to inherit them throughout. You change your color values in one place, not in hundreds of selectors. That's working smarter not harder. Matt has written a ton of blog posts on this subject here and here.  If you're looking for even more in-depth information, check out Matt’s eBook Mastering Bootstrap which is the complete guide to theming Bootstrap. Less will super-charge you CSS but you also need to streamline your development environment.

### Harp

Harp is one of the best front end tools available. The makers call it "The Static web server with built-in preprocessing". What does that mean exactly? It means that you can create HTML template files that use things like variables and includes. It also means you can include Less files in your development work flow that will be automatically compiled into regular CSS for you. No need to use Less.js or other Less compilers, it's built right in. Harp also supports other languages like Jade, Markdown, EJS, CoffeeScript, Sass and Stylus. If you've been looking for a HTML static site generator with all the bells and whistles, this is it. As previously mentioned, Harp has built in preprocessing and it serves it to the browser as vanilla HTML, CSS and JavaScript code. This code can then be zipped up and distributed as a theme. You can focus on your theme's look and feel instead of continuously building out your development environment. The best part is you can create a boilerplate like this and then copy and paste it every time you want to start a new theme. Harp runs on Node so once you have everything installed on your computer, you can run it from anywhere. Don't get intimidated by Node, you don't need to know much about it to use it in Harp. Essentially it just runs your local server for you and compiles your code with a couple of easy to remember commands. Matt’s been happy using Harp for the past couple months, so he’s decided to create a free email course that teaches you how to build a theme with it.


The course is called **Bootstrap Themes Made Easy** and you can register for free at bootstrap-themes.ca




Share:


Tags:

web

COMMENTS

Comments

No comments yet.

Leave A Reply

Subscribe to our newsletters! Be the first who receive all our news, ideas and offers!