ThemeXpert Blog

Expose Get Responsive!

Expose Get Responsive!
Parvez Akther

3 mins

It has been just 1 month since we released Expose framework 3 with FREE bootstrap template. We immediately moved ourself to a new branch to bring responsive awesomeness into Expose. We are really excited to announce that our next major version of Expose framework 4 will be totally responsive!


Smartphone and Tablet users are increasing rapidly and everyone wants to fit there website on all devices. This is where responsive really shines!

In this blog post we will give an inside look of Expose 4 responsive features and what we've done to achieve this.

Before Expose 4.0, we used our own CSS framework for our templates but once we started thinking about responsive design we looked all the popular css frameworks including Boostrap , Foundation, Less framework, 1140 Css grid and many more. We finally settled on Bootstrap framework by Twitter.

There are 2 reason behind this choice:

1. Bootstrap is now the most popular framework among all choices and backed by some very talented developers from Twitter

2. Joomla! 3.0 is coming with bootstrap integration.

Responsive Breakpoints:

We've implemented Bootstrap 12 grid system in Expose 4 but with modifications for backward compatibility with our prior templates. We removed gutter spaces from grid and the negative margin from row and re-calculated the grid values.

LabelLayout widthColumn width
Smartphones 480px and below Fluid columns, no fixed widths
Smartphones to tablets 767px and below Fluid columns, no fixed widths
Portrait tablets 768px and above 62px
Default 980px and up 80px
Large display 1200px and up 100px

Media queries:

  1. /* Landscape phones and down */
  2. @media(max-width:480px){...}
  4. /* Landscape phone to portrait tablet */
  5. @media(max-width:767px){...}
  7. /* Portrait tablet to landscape and desktop */
  8. @media(min-width:768px)and(max-width:979px){...}
  10. /* Large desktop */
  11. @media(min-width:1200px){...}

Also Bootstrap provides a very handy and useful utility class set which allows you to easily show/hide modules from your template. You will able to add this class in the Module Class Suffix Class table.

ClassPhones 480px and belowTablets 767px and belowDesktops 768px and above
.visible-phone Visible
.visible-tablet Visible
.visible-desktop Visible
.hidden-phone Visible Visible
.hidden-tablet Visible Visible
.hidden-desktop Visible Visible

Features and Improvements:

  • Fully responsive
  • Dropdown menu for mobile devices
  • Separated all Less files into less folder and compiled in Css directory
  • Removed all mobile platform checking code for better performance
  • Built in Update Notification System
  • Removed vender prefix from all areas (tx/ex)

Backward Compatibility

The Expose 4 HTML is re-written to match with the Bootstrap grid system which means updating your Expose 3 based site to Expose 4 will break your site. With that case in mind we decided to release an updated version of all our Expose 3 based templates so that it can take advantage from Expose 4 and also responsive at same time, wohoo!

We are little behind our schedule for 1st template of August because of this responsive feature and we think it is worth it. We will release our 1st August Responsive Business Template next week named 'Crisp'.

We are expecting to release all updated versions of our templates in the last week of this month and we really appreciate your patience. We'll release an update version of our Bootstrap Template based on Expose 4 next month.

A crispy responsive template - sneak peek
Expose Framework finally in air

Build better website with ThemeXpert

Get access to all premium Joomla templates and
next generation page builder Quix.

Join our club

Comments (1)

This comment was minimized by the moderator on the site

Responsive design matters now both for Google and for users experience. Google don't range high sites that don't have a mobile or optimized mobile version. Check whether this site can’t be reached.

There are no comments posted here yet

Leave your comments

  1. Posting comment as a guest. Sign up or login to your account.
Attachments (0 / 3)
Share Your Location