Blog items tagged with "theming"

The Shape of Things to Come?

In recent conversations in the #exponent-cms irc chat on irc.freenode.net we’ve been discussing how best to maintain Exponent using the most current software technology.  Though Exponent has been based on YUI (Yahoo User Interface) for years, there are more commonly supported libraries which might be worth considering.  Some of these have familiar names in the developer community such as ‘jQuery’, ‘Twitter-Bootstrap’, and the ‘LESS’ css stylesheet compiler.  What’s more, several aspects of YUI are currently broken and unusable in Exponent (e.g., we ship v3.4.0 because newer versions such as v3.4.1, v3.5.x and the soon to be released v3.6.x break our displays).  (Rest assured, we'll maintain backwards compatibility) So here’s where Exponent MIGHT go within the next several releases.

The LESS css stylesheet compiler will likely be implemented and ship with v2.0.8, though not necessarily in its final configuration.  LESS allows a designer to create stylesheet templates with variables and other programming commands to allow the ‘machine’ to do most of the work rather than the designer needing to continually re-write redundant styles.  More information can be found at http://leafo.net/lessphp.  You will be able to fully use .less files in v2.0.8, however their location MAY have to be moved and their inclusion statements MAY need to be edited in future versions once we finalize support.

jQuery is a javascript library similar to YUI, but is designed for smaller projects.  However, it is more widely used and supported across the developer community.  If you were to browse the internet for examples of coding solutions, you’d most likely see several based on jQuery and very few solutions based on YUI.  There are tons of interface add-ons and other solutions available for jQuery.  More information can be found at http://jquery.com/.

Twitter-Bootstrap is a new user interface library of components and styles similar to YUI .  It uses both jQuery & LESS.  In many ways it is much simpler to implement than YUI and is more responsive to various display sizes without the need for multiple stylesheets or themes.  More information can be found at http://twitter.github.com/bootstrap/.
We already have locally running copies of Exponent using these technologies in the form of a custom theme which could easily be dropped into an existing v2.0.8 installation if desired.  So a future version of Exponent with a Bootstrap theme could look like this:

Theming for the iPad

I have been working this week on updating some of my Exponent sites to take advantage of the mobile theming feature now available in Exponent 2. In a nutshell, the feature allows you to define a separate index.php file that will be viewed by clients using mobile browsers. You can also use specific CSS code to adjust the appearance of your page to better suit the browsing of small screen mobile devices.

Enter the iPad. With a maximum screen width of 1024 px you have a screen size equivalent to most laptop screens but with the handicap that dropdown menus (Such as the YUI Top Menu) do not work in the safari browser on the iPad.

Now if you talk to other web designers you will find many who advocate that dropdown menus are a poor way to provide efficient navigation to your users and the fact that they do not work on the iPad calls for a solution.

In my early testing, I made changes in  /themename/mobile/index.php  and was not able to see them  on my iPad. I later found that the iPad was not included in the array that is used to identify browsers in expTheme.php  (fixed for 2.0.7) Once past this hurdle it was not too hard to provide specific code to replace the dropdown menus with a tabbed interface.

That same page has dropdown menus when viewed with a regular PC.

The code in the template for the above tabbed interface contains two embedded navigator modules, each in their own div.

<div id="nav">
<?php expTheme::module(array("module"=>"navigation","view"=>"Tab Nav","source"=>"@top")); ?>
</div>

<div id="top-sub-nav">    
<?php expTheme::module(array("module"=>"navigation","view"=>"children-only-top-nav","source"=>"@top")); ?>
</div>

Included in the CSS directory is a stylesheet for mobile devices.

iPad.css contains some CSS3 specific code which recognizes the iPad and displays css which will work on its 1024 pixel wide screen.

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px)
{
/* Navigation */
#top-sub-nav .navigationmodule.children-only-top-nav ul li a:link {
background:#e2e2e2;
text-decoration:none; }
}

​The CSS above is just an example, obviously there is a whole lot more code needed to display the tabs but you get the idea. The CSS declarations are all wrapped in curly braces and the @media screen and max-device-width designations make this css specific to the iPad.

I have not done a lot of testing with other mobile devices (iPod Touch, iPhone or Droid) but for my purposes where my school sites are increasingly being visited by iPads, I think this will be a workable solution.

You can read a bit more about Mobile theming in this exponent docs site article.