Video Transcript

Hi, I'm John from JoomlArt. Today we're going to talk about T3 framework, our topic is how T3 integrates Bootstrap and how to develop T3 with LESS. There are 2 main parts in this video:

1. Bootstrap integration
2. Developoing with LESS

Let's start with Bootstrap Integration.

T3 integrates Bootstrap, the sleek, intuitive, powerful front-end framework for faster and easier web development. This is the homepage of Bootstrap. T3 includes the entire bootstrap library which means that everything Bootstrap supports, you can now use in the T3 framework: from typography to code, to tables, forms. Bootstrap is powerful because Bootstrap provides you the CSS and Javascript to control the presentation of content in your HTML. Bootstrap also provides the default settings for typography, tables, forms and buttons.

So how does T3 integrates Bootstrap? T3 includes the bootstrap library in the folder Bootstrap that you find in the T3 plugin folder, as you can see the folders of the bootstrap library are here and when you download Bootstrap package, you will see the exact same folders. Bootstrap is made with LESS at its core, the less folder here contains all the LESS files of Bootstrap. Now let's check out the typography page of T3. As you can see it is really great and the important thing is that we actually don't need to style it, it uses bootstrap default style. You can check out how to use Bootstrap from the Bootstraps primary site and then apply what you learn right here in T3. Another example of applying Bootstrap in the T3 site is the Video page. This is really neat because all you have to do is applying Bootstrap to create this page.

Now move to next part, that is developing T3 with LESS. T3 uses LESS to develop. LESS is a CSS preprocessor which then makes CSS dynamic. You do not want to use the LESS files that are found in the less folder under the T3 plugin folder. Instead, to develop and customize your template, we're going to use the LESS files that you find in the less folder in the template folder. Here they are here, all the less files that we're going to use to develop and customize our template.

The variable.less file contains variables to customize the look and feel of Bootstrap and it looks sort of familiar you can see how the variables are defined in this file. We have the variable name and besides, it's value. Let's see how to apply the variables to style for your site. Now instead of defining values here, we're going to use the variables in the variables.less file so when we change the value for the variables, all places in the site that use that variables will automatically be changed as well. If you scroll down, let's see there's style for the header and you see the background color for heading is currently blue. Now we're going to go to the variables.less file and change the value for the variables, so that the background color of the header will also change. Here's the blue and we're going to change it from Blue to the Blue dark color. Now here's your site before we changed and now we reloaded to load the latest changes, there is the Blud dark color that we customized.

Normally, each Joomla template supports multiple themes, all the theme files and folders are located in the "themes" folder. Each theme will have 3 less files: template.less, variables.less and variables-custom.less. The variables.less file will only include variables that are customized from default themes. For this reason, the file actually has fewer variables than the variables.less file of the default theme. And the template.less file is the style file that only includes the customized styles from the default theme. All of the LESS files are only applied for the theme. To customize the theme, use these files and do exactly what we're done here in the demo. The file variables-custom.less allows you to add your new variables, it is empty by default.

Now, we develop with LESS but your site can actually run on either LESS or CSS. With the development mode is enabled, our site is running on the LESS files; but when it is disabled, it is running on CSS files. When we finish the developing, we want to disable this mode for better performance and join and compressed CSS, but before that we have to compile LESS to CSS, and this feature here will compile what we customized in LESS to all the CSS files. It can take a few moments to compile so please be patient. Here we go, when it's compiled, just save the settings. You can see the less folder here and when we compile LESS to CSS, the LESS files will be compiled to CSS files. The compiled CSS files are now located in the css folder, you can see that there are less CSS files in comparision with all the LESS files, it's because of the compression.

All themes are in the folder themes, the same folder as the "less" folder. In fact, we don't work with the CSS folder as each time we compile LESS to CSS, the CSS files are actually being overwritten. If you want to customize your site without using LESS files, then just use the file Custom.css. This is the last file to be loaded in your site and it will never be overridden when compiling. You can style your site with CSS as normal.

This is the end of our tutorial for today, thank you for watching and for using the T3 framework. To view more video tutorials about T3, visit our Youtube chanel.