Bootstrap, an essential tool for custom web developers, makes front-end development much easier. Developed by Twitter, it combines CSS and HTML conventions to provide endless resources for quick, stylish, good-looking and functioning templates.
As somebody who uses Bootstrap constantly, I know my way around. If you’re getting started with Bootstrap, here’s my 20-step “recipe” for creating a completely custom Bootstrap 3 template from scratch.
How to create a Bootstrap template in 20 steps
1. Get all of your pre-mockup information figured out. This includes:
- Color scheme;
- Direction of the website;
- Needed components, etc.
2. After your wireframes and mockups are approved, it is time to crank out your new Bootstrap template. It never hurts to keep Bootstrap in mind when creating certain parts of the mockup (ie. responsive navigation, drop-down menus, etc).
3. Download the latest Bootstrap 3 files from getbootstrap.com.
4. Start to create your template just as you would any other custom template from Joomla. This includes your favicons, template XML file, component file, preview and thumb images, and create the necessary folders. CSS, LESS, fonts, HTML, JS, and images are good folders to start with.
5. Copy over all necessary images and fonts from the mockup process.
6. Copy over the current Bootstrap.min.js from the assets folder in the package you downloaded. This will just go to your template's js folder. Also, copy over respons.min.js and html5shiv.js. If you plan on using a component that requires a separate .js file, copy them over too.
7. Create the template's index.php file and start to fill out the template just as you would a normal template. This is where your Bootstrap knowledge and planning will pay off. You can incorporate the grid here as well as any other Bootstrap elements that need to be in your template. When you reference the template's CSS file, in this instance we will call up bootstrap.css. Keep in mind you can change it to whatever you want to. Be sure to include the bootstrap.min.js as well, and best practices say to place it just before the </body> tag.
8. Once that is mostly created, drag your LESS folder to your LESS editor/compiler. We use Crunch, but there may be some others that work as well.
9. Create a style.less and a style-responsive.less file to that folder.
10. Open your bootstrap.less file in your compiler/editor and comment out all LESS files that you do not need. Add your two LESS files (style and style-responsive) at the bottom, just before the utilities.
11. Open your variables and if you need reference, your mixins LESS files.
12. Edit your variables to closer match what you need accomplished by the template. This can include simple things like fonts and font sizes to more complex things like how many columns are in the grid and when the responsive navbar should show up.
13. Create your template-specific LESS in your style.less. This can include template-specific design (ie. site having a unique background image, background colors of areas if the logo is a background image, custom styling on one specific header or module, etc.).
14. Once you have it pretty well coded out, open the bootstrap.less file and compile it. By default, it will compile to bootstrap.css (which is why I suggested that name to use earlier in your template index file) Make sure it compiles to the right CSS location so that the template uses it properly.
15. Zip and install your template. Bazinga!
16. Once it is installed, set your site to use that template accordingly, which typically is just setting it to default.
17. Open the site in your browser and start testing immediately. Make sure it looks and behaves just as you would like it. If not, edit your LESS files and recompile them. Test again. Tweak again. Repeat until you are satisfied.
18. Open a can of pop, a bottle of beer, pour a cup of coffee, a glass of wine, or just do something fun to celebrate creating a template using Bootstrap and LESS.
19. If possible, take a nap. Sometimes templating can be tough work.
20. Start brainstorming to use Bootstrap in even more creative ways that you just did. Think of more effective workflows, using LESS to a higher degree, and ways to simplify your code and remove any redundancies.
That’s all there is to it!
Use these 20 steps and start templating like a boss. Wanna see it live in action? Thanks, and comment below with any questions!