Basic Theme Framework Concepts

Bootstrap 3A 'theme framework' is a tool or library of stylesheets and javascript code which help a web designer more efficiently create a stylish web site. In most cases they allow for effectively sectioning off a page using styles instead of tables. They also include code to easily create the different user interface 'widgets' and utilities which would otherwise take a lot of code (e.g. time) to produce.  Exponent CMS currently contains built-in support for two (2) different theme frameworks: 1) Yahoo User Interface (or YUI), and 2) Twitter Bootstrap (or Bootstrap).  And within each of these frameworks we include two (2) versions.  The question is 'which one to use?'

First, we'll cover some definitions which relate to the goals of each of these theme frameworks:

  • Fixed - this term relates to a section (page, column, etc...) having a 'fixed' width in terms of pixels.  Regardless of the size of the display (this includes the width of the browser window when resized), the section is the same size.  A fixed section may have to be 'zoomed' in order to be fully displayed on the screen, and then the size of the text may be unreadable.
  • Fluid - this term relates to a section having a 'fluid' width in terms of percentage of the parent section.  When the size of the parent container changes, the 'fluid' section will change.  A fluid section inside a fixed section would appear to be fixed, but could adjust based on the style used for that parent section.
  • Grids - this term relates to using html 'div' containers to section off a web page layout, instead of having to use html tables (which at this point in time is an ancient concept).  Most web pages have many grids, especially to make headers, columns, navigation areas, etc... for the page layout.  In other words, to keep the entire page from acting as if it were a single block of text.
  • Responsive - this term relates to the page layout (automatically) adjusting itself based on the size of the display (whether due to the physical size of the screen or width of the browser window).  Of these four definitions, this is 'the goal' for being able to present content to a visitor to your web site.  Imagine browsing to a web page on your smart phone, where the entire page is displayed but it is so small it is unintelligible...enter 'responsive' web site styling.  In days past, web designers were required to create two different web sites to provide content to both small handheld devices and desktop pc's.  Exponent provides built-in support for using two different types of sub-themes  based on whether a device is small or large (mobile theme variations), but that still requires creating two page layout designs.  'Responsive' styling allows a single page layout to provide the best information display to the user regardless of the size of display being used.

A basic rundown of the five (5) available frameworks (we'll count 'NO' theme framework as one) included in Exponent are:

  • YUI2 - has been deprecated since 2011 and was the primary framework used in Exponent v0.9x..  The styles allow for both fixed and fluid grids, but they are not responsive.  It also provides many widgets from its own javascript code library.  
    • YUI3 based widgets are automatically displayed, since we've replaced all the YUI2 javascript code (as of about v2.3.0)
    • To use the YUI2 grids, you must specially load the stylesheet 'YUI2_RELATIVE."yui2-reset-fonts-grids/yui2-reset-fonts-grids.css"' in your expTheme::head();. YUI2 grids typically use a class name with a 'yui-' prefix and provide both fixed and fluid variations
    • Though we don't recommend creating new custom themes based on YUI2, there is an example theme named 'basetheme'  based on YUI2 available here.  
  • YUI3 - is no longer supported by Yahoo, but is still being maintained.  It was the primary framework used in Exponent v2.x until v2.2.0.  The styles allow for both fixed, but mostly fluid grids, and more recently (since v2.2.0) allows for minimal 'responsive' support.
    • YUI3 based widgets are automatically displayed.  To display jQuery library based widgets (if they are available instead of YUI3), you can set the theme framework to 'jquery' in your expTheme::head(); (which also automatically loads the jQuery javascript library).  You can also display Bootstrap 3 based widgets (including the Exponent and module menus) by setting a config.php constant named 'NEWUI'.
    • To use YUI3 grids, you must specially load the stylesheet 'YUI3_RELATIVE."cssgrids/cssgrids-min.css"' in your expTheme::head();.  YUI3 grids typically use a class name with a 'yui3-u-' prefix.
    • Though we don't recommend creating new custom themes based on YUI3, we ship an example theme named 'simpletheme'  based on YUI3.  
  • Bootstrap 2 - was originally shipped with Exponent v2.2.0.  The styles allow for both fixed and fluid grids with some responsive support.  The typical grid system uses 12 columns.  To use the Bootstrap 2 theme framework, set it to 'bootstrap' in your expTheme::head();
    • Bootstrap 2 based widgets are automatically displayed (using jquery or YUI3 widgets if Bootstrap 2 ones are not available).  The Exponent and module menus are still YUI based.  Bootstrap 2 widgets use the jQuery library, but are written to support Bootstrap 2 styling.
    • Bootstrap 2 grids are automatically available with responsive support and columns typically use a class name with a 'span' prefix.
    • We also automatically provide Font Awesome v3.x support with icons having an 'icon-' prefix.
    • Since Bootstrap 2 has reached 'end of life', we don't recommend it for new custom themes, however we ship an example theme named 'bootstraptheme' based on Bootstrap 2.
  • Bootstrap 3 - is the current recommended theme framework for Exponent and has been available since v2.3.0.  Like Bootstrap 2 it's grid system uses 12 columns, but allows for fully 'responsive' web designs since it is 'mobile first'.  Each grid may be 'classed' as to how it should display on various sized devices (large widescreen desktops, medium desktops, tablets, and smart phones).    To use the Bootstrap 3 theme framework, set it to 'bootstrap3' in your expTheme::head();
    • Bootstrap 3 based widgets are automatically displayed (using Bootstrap 2, jquery, or YUI3 widgets, in that order if Bootstrap 3 ones are not available).  Bootstrap 3 widgets use the jQuery code library, but are written to support Bootstrap 3 styling.
    • Bootstrap 3 grids are automatically available with responsive support and columns typically use a class name with a 'col-' prefix.
    • We also automatically provide Font Awesome v4.x support with icons having an 'fa-' prefix.
    • Bootstrap 3 is the recommended theme framework and we ship an example theme named 'bootstrap3theme' based on Bootstrap 3.
  • No framework - you are not required to use a theme framework for a custom theme in Exponent CMS.  In fact most web theme templates can be converted for use in Exponent (see this article)
    • YUI3 based widgets are automatically displayed.  To display jQuery library based widgets (if they are available instead of YUI3), you can set the theme framework to 'jquery' in your expTheme::head(); (which also automatically loads the jQuery javascript library).

If you have already developed a custom theme for Exponent, you may want to stick with a known quantity and use that familiar theme framework.  However, if your just starting a custom theme, we'd recommend using Bootstrap 3.  Though we will continue to include, support, and fix the YUI2, YUI3, and Bootstrap 2 theme frameworks, in the future most of the new features will emphasize Bootstrap 3.

NOTE: For details about building a custom theme for Exponent CMS or about how themes work, please visit our help/documentation pages found here.  Details about the expTheme::head() method are found here.

Comments

No Comment yet