Skip to content
This repository has been archived by the owner on Aug 9, 2019. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
pygmentized code samples
  • Loading branch information
Daniel Ryan committed Oct 17, 2011
1 parent c68e177 commit 8ba1b3d
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 36 deletions.
62 changes: 62 additions & 0 deletions css/pygments.css
@@ -0,0 +1,62 @@
.highlight .hll { background-color: #ffffcc }
.highlight { background: #ffffff; }
.highlight .c { color: #808080 } /* Comment */
.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #303030 } /* Operator */
.highlight .cm { color: #808080 } /* Comment.Multiline */
.highlight .cp { color: #507090 } /* Comment.Preproc */
.highlight .c1 { color: #808080 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #808080 } /* Generic.Output */
.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #303090; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #6000E0; font-weight: bold } /* Literal.Number */
.highlight .s { background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #0000C0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #B00060; font-weight: bold } /* Name.Class */
.highlight .no { color: #003060; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #505050; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #800000; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #F00000; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0060B0; font-weight: bold } /* Name.Function */
.highlight .nl { color: #907000; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #007000 } /* Name.Tag */
.highlight .nv { color: #906030 } /* Name.Variable */
.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */
.highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #0040D0 } /* Literal.String.Char */
.highlight .sd { color: #D04020 } /* Literal.String.Doc */
.highlight .s2 { background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */
.highlight .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */
.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #A06000 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #306090 } /* Name.Variable.Class */
.highlight .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */
.highlight .vi { color: #3030B0 } /* Name.Variable.Instance */
.highlight .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */
78 changes: 42 additions & 36 deletions index.html
Expand Up @@ -15,6 +15,7 @@
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/smart-grid.min.css">
<link rel="stylesheet" href="css/smart-grid-doc.css">
<link rel="stylesheet" href="css/pygments.css">

<script src="js/modernizr.js"></script>
</head>
Expand Down Expand Up @@ -134,55 +135,60 @@ <h2 id="usage">How to Use It</h2>

<p>There's only one <span class="caps">CSS</span> file to include: <code>smart-grid.min.css</code>. Place that in <code>&lt;head&gt;</code> <em>before</em> your own stylesheet.</p>
<p>Wrap your page inside a <code>&lt;div class="container"&gt;</code>. If you want to support larger screens, use <code>&lt;div class="container large"&gt;</code> or for <span class="caps">HD</span> screens use <code>&lt;div class="container hd"&gt;</code>. Note that you can use more than one container if your need calls for it:</p>
<pre>&lt;header id=&quot;hd&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;h1&gt;My Page Title&lt;/h1&gt;
&lt;/div&gt;
&lt;/header&gt;

&lt;section id=&quot;main&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;p&gt;This is where my content goes.&lt;/p&gt;
&lt;/div&gt;
&lt;/section&gt;</pre>
<div class="highlight"><pre><span class="nt">&lt;header</span> <span class="na">id=</span><span class="s">&quot;hd&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>My Page Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span>

<span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">&quot;main&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>This is where my content goes.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/section&gt;</span>
</pre></div>

<h3 id="column-markup">Column Markup</h3>
<p>Grid columns are achieved by adding a <code>column</code> class to any element. By default, anything with the <code>column</code> class is one column wide. For wider columns, add a class matching the number of columns you want the element to be: <code>two</code>, <code>four</code>, etc. Additionally, there are several shorthand classes for common use cases: <code>one-fourth</code>, <code>three-fourths</code>, <code>one-third</code>, <code>two-thirds</code> and <code>one-half</code>. Group rows of columns together under a parent element with the class <code>row</code> to make sure all of the floats are cleared.</p>

<pre>&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;article id=&quot;main&quot; role=&quot;main&quot; class=&quot;column two-thirds&quot;&gt;
&lt;p&gt;The beginning of the best article in the history of humanity.&lt;/p&gt;
&lt;/article&gt;
&lt;aside id=&quot;sidebar&quot; role=&quot;complementary&quot; class=&quot;column four&quot;&gt;
&lt;p&gt;Here is some additional information.&lt;/p&gt;
&lt;/aside&gt;
&lt;/div&gt;&lt;!-- end .row --&gt;
&lt;/div&gt;&lt;!-- end .container --&gt;</pre>
<div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;row&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;article</span> <span class="na">id=</span><span class="s">&quot;main&quot;</span> <span class="na">role=</span><span class="s">&quot;main&quot;</span> <span class="na">class=</span><span class="s">&quot;column two-thirds&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>The beginning of the best article in the history of humanity.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;aside</span> <span class="na">id=</span><span class="s">&quot;sidebar&quot;</span> <span class="na">role=</span><span class="s">&quot;complementary&quot;</span> <span class="na">class=</span><span class="s">&quot;column four&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>Here is some additional information.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- end .row --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- end .container --&gt;</span>
</pre></div>

<p>If you only have one row of columns in a container, you can use the same element for both classes:</p>

<pre>&lt;div class=&quot;container row&quot;&gt;
&lt;article id=&quot;main&quot; role=&quot;main&quot; class=&quot;column two-thirds&quot;&gt;
&lt;p&gt;The beginning of the best article in the history of humanity.&lt;/p&gt;
&lt;/article&gt;
&lt;aside id=&quot;sidebar&quot; role=&quot;complementary&quot; class=&quot;column four&quot;&gt;
&lt;p&gt;Here is some additional information.&lt;/p&gt;
&lt;/aside&gt;
&lt;/div&gt;&lt;!-- end .container --&gt;</pre>
<div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container row&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;article</span> <span class="na">id=</span><span class="s">&quot;main&quot;</span> <span class="na">role=</span><span class="s">&quot;main&quot;</span> <span class="na">class=</span><span class="s">&quot;column two-thirds&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>The beginning of the best article in the history of humanity.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;aside</span> <span class="na">id=</span><span class="s">&quot;sidebar&quot;</span> <span class="na">role=</span><span class="s">&quot;complementary&quot;</span> <span class="na">class=</span><span class="s">&quot;column four&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>Here is some additional information.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/aside&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- end .container --&gt;</span>
</pre></div>

<h3 id="column-offsets">Column Offsets</h3>

<p>Sometimes you need a blank column between content. Rather than add superfluous markup, you can add one of the <code>offset-xxxxx</code> classes to the element you want to push left. There are classes defined to offset anywhere from 1 (<code>offset-one</code>) to 11 (<code>offset-eleven</code>) columns. Note that the offsets work by padding the element they're placed on; if you change the padding in your own <span class="caps">CSS</span>, the offsets will not work. Just like their column counterparts, offsets only take effect in browsers that are at least 768 pixels wide.</p>

<pre>&lt;div class=&quot;container row&quot;&gt;
&lt;div class=&quot;column two offset-two&quot;&gt;
&lt;p&gt;There are two blank columns to the left of this one.&lt;/p&gt;
&lt;/div&gt;&lt;!-- end .two --&gt;
&lt;div class=&quot;column seven offset-one&quot;&gt;
&lt;p&gt;This column leaves one column empty between it and it&#x27;s predecessor then takes up the rest of the row.&lt;/p&gt;
&lt;/div&gt;&lt;!-- end .seven --&gt;
&lt;/div&gt;&lt;!-- end .container --&gt;</pre>
<div class="highlight"><pre><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;container row&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column two offset-two&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>There are two blank columns to the left of this one.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- end .two --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;column seven offset-one&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p&gt;</span>This column leaves one column empty between it and it&#39;s predecessor then takes up the rest of the row.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- end .seven --&gt;</span>
<span class="nt">&lt;/div&gt;</span><span class="c">&lt;!-- end .container --&gt;</span>
</pre></div>

<p>You can mix and match columns and offsets however you want as long as the offset and column numbers add up to 12. To see it all working together, <a href="demo.html" title="View the demo">view the demo</a>.</p>
<p>To get around the <a href="http://www.quirksmode.org/css/contents.html#t17" title="Learn more at Quirksmode"><span class="caps">IE</span> 7 <code>:first-child</code> bug</a> when adding elements via JavaScript, make sure to add a class of <code>first</code> to element you introduce that is the first-child in its row.</p>
Expand Down

0 comments on commit 8ba1b3d

Please sign in to comment.