<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Github Pages Template</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <!-- Combo with CSSNormalize, CSSGrids-Responsive, CSSForm, CSSTable, CSSList (v3.9.1) --> <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.9.1/build/cssnormalize/cssnormalize-min.css&3.9.1/build/cssgrids-responsive/cssgrids-responsive-min.css&3.9.1/build/cssbutton/cssbutton-min.css&gallery-2013.03.27-22-06/build/gallerycss-csslist/gallerycss-csslist-min.css&gallery-2013.03.27-22-06/build/gallerycss-csstable/gallerycss-csstable-min.css&gallery-2013.03.27-22-06/build/gallerycss-cssform/gallerycss-cssform-min.css"> <!-- Some custom styles to make things pretty. --> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/tilomitra/prettypages/gh-pages/ui.css"> <!-- RainbowJS Syntax Highlighting - Github Theme. For more themes, go to https://github.com/ccampbell/rainbow/tree/master/themes --> <link rel="stylesheet" type="text/css" href="https://rawgithub.com/ccampbell/rainbow/master/themes/github.css"> <!-- Modify header colors here to customize the look and feel of the site--> <style> .header { background: rgb(53, 41, 116); } .header h1 { color: white; } .header h2 { font-weight:300; margin:0; color: rgb(116, 130, 230); } </style> </head> <body class='yui3-skin-sam'> <div id="headerMenu" class="yui3-menu yui3-menu-open yui3-menu-horizontal yui3-menu-fixed"> <span class="yui3-menu-heading">PrettyPages</span> <ul> <li class="yui3-menu-active"><a href="http://tilomitra.github.com/cssforms/">Documentation</a></li> <li><a href="http://github.com/tilomitra/prettypages/">Fork on Github</a></li> <li><a href="http://github.com/tilomitra/">Other Projects</a></li> </ul> </div> <div class="header yui3-u-1"> <h1 class="yui3-u-1">Pretty Pages</h1> <h2 class="yui3-u">A pretty Github Pages template</h2> </div> <div class="content"> <h2>Get Started</h2> <p><a href="http://github.com/tilomitra/prettypages/">PrettyPages</a> is just an HTML template that makes it easy for you to create nice looking Github Pages for your projects. This page was created using PrettyPages. </p> <a href="http://github.com/tilomitra/prettypages/" class="yui3-button primary-button">View on Github</a> <h2>About</h2> <p>PrettyPages comes with a flat horizontal menu, where you can place links, and add the title of your project. This menu is responsive at lower screen sizes.</p> <p>You can also add pretty code snippets that have syntax highlighting thanks to <a href="http://craig.is/making/rainbows">RainbowJS</a>! These come in a variety of different <a href="https://github.com/ccampbell/rainbow/tree/master/themes">themes</a>.</p> <pre><code data-language="javascript"> YUI().use('node', function(Y) { Y.log('YUI Loaded. Vroom vroom!'); }); </code></pre> <p>You can also display nice looking buttons thanks to YUI's CSSButton module. Add the <code>.yui3-button</code> class to a <code>a</code> element to make a nice looking button, and add the <code>primary-button</code> class to make a really big callout button.</p> <a class="yui3-button">Regular button</a> <a class="yui3-button primary-button">Primary button</a> <h2>More Content</h2> <p> In general, all your content should be placed inside a <code>div class="content"</code>. You can use <code>code</code> elements to highlight inline-code. If you want sub-headings, those are nicely styled too. </p> <h3>A sub-heading</h3> <p> Use <code>h3</code> for subheadings! If you want something smaller, you can go for an <code>h4</code>. </p> <h4>A sub-sub heading</h4> <p>That's what an <code>h4</code> looks like.</p> <!-- TYPEKIT --> <script type="text/javascript" src="//use.typekit.net/ajf8ggy.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <script src="https://rawgithub.com/ccampbell/rainbow/master/js/rainbow.min.js"></script> <script src="https://rawgithub.com/ccampbell/rainbow/master/js/language/generic.js"></script> </div> </body> </html>