7ce71ee9f0931c4ea73943235dd5af32.jpg
Curiosidades

Bootstrap, LESS, CSS

1. File and Folder Structure

The big word for Joomla 3.0 is Bootstrap (BootStrap was developed by Twitter as a way to promote quick, clean and highly usable applications ). With basic CSS already integrated into Joomla 3.0, it is aiming for a much better UX for the end-user.

When JA t3v3 plugin is installed, it includes the BOOTSTRAP Library.

    • Bootstrap library is located in: plugins/system/jat3v3/t3v3base/bootstrap.
    • All LESS folders are located in: templates/ja_t3v3_blank/less.
    • All LESS Theme files are located in: templates/ja_t3v3_blank/less/themes. These are the files that you use to develop, customize, style for your themes in your site
    • By default, each theme has 3 LESS files: template.less, variable.less, variables-custom.less

Structure of JA t3v3 system plugin

plugins/system/jat3v3/t3v3base/
├── css/
├── layout-custom.css
├── menu.css
├── thememagic.css
├── bootstrap/      /* Bootstrap library folder
├── css/         /* css files in bootstrap library
├── ico/
├── img/
├── js/
├── less/    /* include all less files
├── accordion.less
├── form.less
├── ...

Structure of LESS in JA T3 3.0

templates/ja_t3v3_blank/
├──less/                 /* all LESS files are located here 
├── themes/         /* all theme folders and files are located here 
├── bootstrap.less
├── bootstrap-responsive.less
├── home-responsive.less
├── layout.less
├── ...
├── css/                      /# all compiled files are located here
├── themes/ /* all theme folders and files are located here ├── bootstrap.css ├── bootstrap-responsive.css ├── custom.css ├── home.css ├── template.css ├── ...

Theme folder structure in JA T3 3.0

templates/ja_t3v3_blank/less/themes
├──theme_name/  
├──variables.less           /* any override default variables 
├──variables-custom.less    /* custom variables, override by ThemeMagic
├──template.less              /* override template style, added after default template.less and before template-responsive.less
├──template-responsive.less   /* override default template-responsive.less
├──xxx.less              /* override other separated default xxx.less (same name). This separated less is not imported in any other less files.
├── ...

II. Compile LESS to CSS

When to use the option?

The "Compile LESS to CSS" option is to compile the LESS that that we use to develop the webiste to CSS files that our website runs on (when development mode is off). The LESS files will be compiled to corresponding CSS files. And it will override all current CSS files.

The compiled files are located in: templates/ja_t3v3_blank/css/.

Compiled Theme Folder

All Theme files that are compiled are located in: templates/ja_t3v3_blank/css/themes. The themes in your site uses the compiled files.

Note:

The following files are added automatically to each theme folder when compiled.

  • bootstrap.css
  • bootstrap-responsive.css
  • template.css
  • template.css
  • template-responsive.css

Each theme works independently from each other. They are not overridden from default theme so each theme folder has all files like default theme with different variables, settings ...

III. Add a separated less/css in layout

To add a saperated less/css in layout, use the code format:

addStyleSheet ('file_name') ?>

Note:

The file 'file_name' added is based on your development mode. If you are in development mode, the file added is less file. And if your are not in development mode, file added will be css file.

IV. Basic Knowledge of LESS

Variables

The variables are used to specify the widely used values, they are repeated throughout the stylesheet. One change of variable will make the global changes.

// LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
/* Compiled CSS */

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

Mixins

Mixins are to embed all the propertices of a class into another class. The difference of Variable and Mixins is that, Mixins is for whole classes.

// LESS

.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* Compiled CSS */

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

Nested Rules

With LESS, you can specify inheritance without long selector, LESS allows you to nest selectoros inside other selectors simply.

// LESS

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

/* Compiled CSS */

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

Functions and Operations

You can add, subtract, divide and multiply property values, colors. This allows you to create complex relationship between properties.

// LESS

@the-border: 1px;
@base-color: #111;
@red: #842210;

#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}

/* Compiled CSS */

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

References: