Responsive Design

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.

Live fluid grid example

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

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.less
• responsive-767px-max.less
• responsive-768px-979px.less
• responsive-1200px-min.less
• responsive-navbar.less
• responsive-utilities.less
• component-animations.less
• responsive-navbar.less

Responsive utility classes

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.less is 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 the responsive-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.