- Written by Tito Alvarez
Did you know that Wright v.3 is all based in Bootstrap? And did you know that Bootstrap is all based in LESS rather than simple CSS? And, are you aware of the benefits of using the Wright Framerwork to create your template?
Let's put it this way: LESS is a CSS pre-processor that can use variables and built-in functions to create the final CSS code, so that if the blue color in a template is #0000FF and you want to change it to #000099 (a darker tone of blue), you don't have to search all your CSS code, but rather you can just change a variable and all the CSS will be changed.
Using the Bootstrap customizer
Bootstrap has a tool with a simple User Interface (UI) that allows you to create customized Bootstrap CSS files. This means that you can easily go into the customizer and change any of the variables (font color, font family, headings, tables, button styles, etc.), and generate the customized Bootstrap files from it. Once you've made the changes, you can download a bootstrap.zip file.
Bootstrap Customizer, available in http://twitter.github.io/bootstrap/customize.html
The Bootstrap tool, using the LESS variables that you have changed, will generate the new CSS based on the colors, sizes and any other changes you have made.
Downloaded customized files from Bootstrap
Placing the customized file into Wright
Now that you have your customized files, you're going to use only one of them: bootstrap.min.css to create a new style in the Wright template (assuming so far that you have Wright v.3 installed in your Joomla site and the template is selected).
In the Wright template, you can create several styles for a single template using the native LESS compiler included in it (I will talk about this in another blog post later), but there is a default generic style that you can use to customize your template. In the css folder included in your template files (templates/js_wright/css folder of your Joomla site) just place the bootstrap.min.css file renaming it to style-generic.bootstrap.min.css, as shown in the image below.
New CSS files placed into Wright
And that's it! In a few steps you now have created the basis for your new Wright-based template. Now you can continue creating your own styles to improve your customization by adding a custom.css file into that css folder.