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.
| Label | Layout width | Column 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:
- /* Landscape phones and down */
- @media(max-width:480px){...}
- /* Landscape phone to portrait tablet */
- @media(max-width:767px){...}
- /* Portrait tablet to landscape and desktop */
- @media(min-width:768px)and(max-width:979px){...}
- /* Large desktop */
- @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.
| Class | Phones 480px and below | Tablets 767px and below | Desktops 768px and above |
|---|---|---|---|
.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 |
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.