HTML5 Master Stylesheet
An HTML5-friendly master stylesheet for use with Symphony
Description
A default master stylesheet that can be used for HTML5 output with Symphony. It validates and uses class names for the new HTML5 markup elements such as article
, nav
, header
, footer
, section
, and so on. You can make this pure HTML5 by searching for those tags and replacing them as necessary.
One other small addition addition is that the template will automatically minify all the markup for smaller filesize and quicker load times. To disable this comment out the third to last line which reads <xsl:strip-space elements="*"/>
and change indent="no"
to indent="yes"
in the output declaration in line 8.
And, of course, feel free to use and abuse this as fits your needs.
Change Log:
1.1
- Updated JavaScript.
- Fixed wrong parameters.
- Added default template apply as in original
master.xsl
.
Should now work to just drop this in to replace the original master.xsl
file with only adding footer information.
1.0
- Initial launch1.2.2.3.
XSLT
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:import href="../utilities/page-title.xsl"/> <xsl:import href="../utilities/navigation.xsl"/> <xsl:import href="../utilities/date-time.xsl"/> <xsl:output method="html" omit-xml-declaration="yes" indent="no" /> <xsl:variable name="is-logged-in" select="/data/events/login-info/@logged-in"/> <xsl:template match="/"> <xsl:text disable-output-escaping="yes"><</xsl:text>!DOCTYPE html<xsl:text disable-output-escaping="yes">></xsl:text> <html lang="en"> <head> <!-- Start Page Data --> <meta charset="utf-8" /> <meta name="title" content="{$page-title}" /> <meta name="description" content="" /> <meta name="tags" content="" /> <title><xsl:call-template name="page-title"/></title> <!-- End Page Data --> <!-- Start Fav Icons --> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" type="images/png" href="/favicon.png" /> <!-- End Fav Icons --> <!-- Start CSS Links --> <link rel="stylesheet" media="screen" href="{$workspace}/css/reset.css" /> <link rel="stylesheet" media="screen" href="{$workspace}/css/styles.css" /> <!-- End CSS Links --> <!-- Start In-Page JavaScript --> <script> document.documentElement.className = "js"; </script> <!-- End In-Page JavaScript --> </head> <body id="{$current-page}-page"> <!-- Start Container --> <div id="container"> <!-- Start Header --> <div class="header" id="masthead"> <!-- Start Logo --> <p id="logo"><xsl:value-of select="$page-title"/></p> <!-- End Logo --> <!-- Start Main Navigation --> <div class="nav" id="main-nav"> <xsl:apply-templates select="data/navigation"/> </div> <!-- End Main Navigation --> </div> <!-- End Header --> <!-- Start Content --> <div class="article" id="content"> <xsl:apply-templates/> </div> <!-- End Content --> <!-- Start Footer --> <div class="footer" id="site-info"> </div> <!-- End Footer --> </div> <!-- End Container --> <!-- Start Javascript Links --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <!-- End Javascript Links --> </body> </html> </xsl:template> <xsl:strip-space elements="*"/> </xsl:stylesheet>