Rate this item
(0 votes)
Read 1634494 times Last modified on Viernes, 30 Noviembre 2012 03:07

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Project Description

Miércoles, 24 Octubre 2012 10:04
Responsive Design
Written by 

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.

LayoutLayout WidthGridColumnGutter 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.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

ClassMobile max-767pxTablets 768px to 979pxDesktop min-980px
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

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.

What we did

Visit Project
Recent Works