A responsive template that fits all devices
The big word for Joomla 3.0 is Bootstrap. With basic CSS already integrated into Joomla 3.0, it is aiming for a much better UX for the end-user. Moreover, BootStrap includes responsive CSS, which allows a website to fit all devices, screen size.
| Layout | Layout Width | GridColumn | Gutter Width |
|---|---|---|---|
| Large Desktop | min: 1200px | 12 | 40px |
| Default | min-980px, max-1199px | 12 | 40px |
| Normal Desktop & Tablet | min-768px, max-979px | 12 | 40px |
| Mobile | max-767px | 12 | 20px |
The file bootstrap-responsive.less in folder: templates/ja_t3v3_blank/assets/less is to define media queries:
// RESPONSIVE CLASSES
// ------------------
@import "../../../plugins/system/jat3v3/t3v3base/bootstrap/less/responsive-utilities.less";
// MEDIA QUERIES
// ------------------
// Large desktops
@import "../../../plugins/system/jat3v3/t3v3base/bootstrap/less/responsive-1200px-min.less";
// Tablets to regular desktops
@import "../../../plugins/system/jat3v3/t3v3base/bootstrap/less/responsive-768px-979px.less";
// Phones to portrait tablets and narrow desktops
@import "../../../plugins/system/jat3v3/t3v3base/bootstrap/less/responsive-767px-max.less";
// RESPONSIVE NAVBAR
// ------------------
// From 979px and below, show a button to toggle navbar contents
@import "../../../plugins/system/jat3v3/t3v3base/bootstrap/less/component-animations.less";
@import "../../../plugins/system/jat3v3/t3v3base/bootstrap/less/responsive-navbar.less";
By default, the responsive files are located in: plugins/system/jat3v3/t3v3base/bootstrap/less
The list responsive files include:
responsive.lessresponsive-767px-max.lessresponsive-768px-979px.lessresponsive-1200px-min.lessresponsive-navbar.lessresponsive-utilities.lesscomponent-animations.lessresponsive-navbar.less
Responsive utility classes
| Class | Mobile max-767px | Tablets 768px to 979px | Desktop min-980px |
|---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
Tablet and Regular Desktop Layout
The file responsive-768px-979px.less is the style file for Tablet and regular desktop layout. When the screen size is smaller than 979px and bigger than 768px, the template runs on the responsive-768px-979px.less file.
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#grid > .core(@gridColumnWidth768, @gridGutterWidth768);
// Fluid grid
#grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
// Input grid
#grid > .input(@gridColumnWidth768, @gridGutterWidth768);
// No need to reset .thumbnails here since it's the same @gridGutterWidth
}
Large Desktop Layout
The file responsive-1200px.less is the style file for large desktop layout (width size > 1200px} and regular desktop layout. When the screen size is smaller than 979px and bigger than 768px, the template runs on the responsive-1200px-min.less file.
@media (min-width: 1200px) {
// Fixed grid
#grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
// Fluid grid
#grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
// Input grid
#grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
// Thumbnails
.thumbnails {
margin-left: -@gridGutterWidth1200;
}
.thumbnails > li {
margin-left: @gridGutterWidth1200;
}
.row-fluid .thumbnails {
margin-left: 0;
}
}
-
Mobile Layout
The file
responsive-767px-max.lessis the style file for Mobile layout. the elements are defined to fit the mobile device. When the screen size is smaller than 767px, the template runs on theresponsive-767px-max.less file.- Logo is now on top
- Menu is collapsed
- One Column Content display
- Modules blocks is in one column display as well
- Responsive media (image, video, ...) are defined to fit the mobile layout.
Responsive CSS file
The file bootstrap-responsive.lessin folder: templates/ja_t3v3_blank/assets/less will be compiled to a CSS file named: bootstrap-responsive.css and the file is located in folder: plugins/system/jat3v3/t3v3base/bootstrap/css.