Skip to content

Commit

Permalink
Add installation page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ediblecode
ediblecode committed Aug 12, 2016
1 parent 56a289a commit ba3c4eb
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 22 deletions.
3 changes: 3 additions & 0 deletions web/server/views/about/_about-layout.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{% extends "../layouts/_sidebar.njk" %}
{% set breadcrumbs = [{ title: "About", href: "/about/" }, { title: title }] %}
{% set title = title + " | About" %}
4 changes: 2 additions & 2 deletions web/server/views/about/index.njk
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% extends "../layouts/_sidebar.njk" %}
{% extends "./_about-layout.njk" %}
{% set title = "About" %}
{% set breadcrumbs = [{ title: title }] %}

Expand Down Expand Up @@ -98,7 +98,7 @@
Either quickly rapidly prototype using a compiled version, or integrate it into your app and use it as a solid base.
</p>
<p>
<a class="btn" href="/todo">Start developing</a>
<a class="btn" href="/about/installation">Install</a>
</p>
</div>

Expand Down
77 changes: 77 additions & 0 deletions web/server/views/about/installation.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
{% extends "./_about-layout.njk" %}
{% set title = "Installation" %}

{% block body %}

<div class="container">
<h1>Installation</h1>

<nav role="navigation">
<ul>
<li><a href="#cdn">CDN</a></li>
<li><a href="#git">Git</a></li>
<li><a href="#zip">ZIP</a></li>
<li><a href="#npm">NPM</a></li>
<li><a href="#bower">Bower</a></li>
<li><a href="#meteor">Meteor</a></li>
</ul>
</nav>

<section id="cdn">
<h2>Use the CDN directly</h2>

<ul>
<li>Useful for rapid prototyping</li>
<li>Not recommended for production setups</li>
<li>Uses compiles CSS so loses the benefit of SASS</li>
<li>You get everything: you can't pick and choose <em>just</em> what you need</li>
</ul>

<p>
{% source "html" -%}
<link rel="stylesheet" href="todo" type="text/css" media="screen" charset="utf-8">
<script src="//todo"></script>
{%- endsource %}
</p>
</section>

<section id="git">
<h2>Git clone latest</h2>
<p>
{% source -%}
git clone https://github.com/nhsevidence/NICE.Bootstrap2.git
{%- endsource %}
</p>
</section>

<section id="zip">
<h2>Download latest ZIP</h2>
<p>
<a href="https://github.com/nhsevidence/NICE.Bootstrap2/archive/master.zip" class="btn">Download latest ZIP</a>
</p>
</section>

<section id="npm">
<h2>NPM install</h2>
<p>
NPM support is coming soon &hellip;
</p>
</section>

<section id="bower">
<h2>Bower install</h2>
<p>
Bower support is coming soon &hellip;
</p>
</section>

<section id="meteor">
<h2>Meteor install</h2>
<p>
Meteor support is coming soon &hellip;
</p>
</section>

</div>

{% endblock %}
7 changes: 4 additions & 3 deletions web/server/views/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,10 @@
<a href="/about/">Read more about NICE Experience</a>
</h2>

<a class="btn github-button" target="_blank" rel="external" data-style="mega"
href="https://github.com/nhsevidence/NICE.Bootstrap2">NICE Bootstrap 2 on GitHub</a>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<p>
<a class="btn btn--primary" href="/about/installation">Install</a>
<a class="btn btn--secondary" target="_blank" rel="external" href="https://github.com/nhsevidence/NICE.Bootstrap2">View on GitHub</a>
</p>

<h3 class="heading heading--separator">Style Guide</h3>

Expand Down
96 changes: 79 additions & 17 deletions web/server/views/style-guide/layout.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@

<h1>Grid &amp; layout</h1>

<nav>
<nav role="navigation">
<ul>
<li><a href="#containers">Containers</a></li>
<li><a href="#grid">Basic grid</a></li>
<li><a href="#basics">Basic grid</a></li>
<li><a href="#nested">Nested grids</a></li>
<li><a href="#nested">Responsive grids</a></li>
<li><a href="#nested">Semantic classes</a></li>
<li><a href="#features">Other grid features</a></li>
</ul>
</nav>

Expand All @@ -26,32 +27,32 @@
<li>Not designed to be nested</li>
</ul>

{% example -%}
{% example "html" -%}
<div class="container">
<p>Some content e.g. a grid goes here</p>
</div>
{%- endexample %}

</section>

<section id="grid">
<h2>Grid</h2>
<section id="basics">
<h2>Basic grid</h2>

<ul>
<li>We use <a href="http://csswizardry.com/csswizardry-grids/" target="_blank" rel="external">csswizardry-grids</a> with some different settings</li>
<li>We use <a href="http://csswizardry.com/csswizardry-grids/" target="_blank" rel="external">csswizardry-grids</a> with some different breakpoints (see <a href="#responsive">responsive section</a> below)</li>
</ul>

<h3>Whole</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-whole"><div class="grid-example-item">1 whole</div></div>
</div>
{%- endexample %}

<h3>Halves</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-half"><div class="grid-example-item">1/2</div></div>
<div class="grid__item one-half"><div class="grid-example-item">1/2</div></div>
Expand All @@ -60,7 +61,7 @@

<h3>Thirds</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-third"><div class="grid-example-item">1/3</div></div>
<div class="grid__item two-thirds"><div class="grid-example-item">2/3</div></div>
Expand All @@ -69,7 +70,7 @@

<h3>Quarters</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-quarter"><div class="grid-example-item">1/4</div></div>
<div class="grid__item one-quarter"><div class="grid-example-item">1/4</div></div>
Expand All @@ -87,7 +88,7 @@

<h3>Fifths</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-fifth"><div class="grid-example-item">1/5</div></div>
<div class="grid__item two-fifths"><div class="grid-example-item">2/5</div></div>
Expand All @@ -103,7 +104,7 @@

<h3>Sixths</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-sixth"><div class="grid-example-item">1/6</div></div>
<div class="grid__item two-sixths"><div class="grid-example-item">2/6</div></div>
Expand All @@ -119,7 +120,7 @@

<h3>Eighths</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-eighth"><div class="grid-example-item">1/8</div></div>
<div class="grid__item two-eighths"><div class="grid-example-item">2/8</div></div>
Expand All @@ -144,7 +145,7 @@

<h3>Tenths</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-tenth"><div class="grid-example-item">1/10</div></div>
<div class="grid__item two-tenths"><div class="grid-example-item">2/10</div></div>
Expand All @@ -170,7 +171,7 @@

<h3>Twelfths</h3>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-twelfth"><div class="grid-example-item">1/12</div></div>
<div class="grid__item two-twelfths"><div class="grid-example-item">2/12</div></div>
Expand Down Expand Up @@ -207,7 +208,7 @@
<li>Grids can be nested infinitely</li>
</ul>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-half">
<div class="grid-example-item">
Expand Down Expand Up @@ -248,7 +249,7 @@
<li>Use <code>palm--</code>, <code>tablet--</code>, <code>desktop--</code> and <code>wide--</code> modifiers</li>
</ul>

{% example -%}
{% example "html" -%}
<div class="grid">
<div class="grid__item one-whole palm--one-half tablet--one-third desktop--one-quarter wide--one-fifth">
<div class="grid-example-item"></div>
Expand All @@ -270,4 +271,65 @@

</section>

<section id="features">
<h2>Other grid features</h2>

<ul>
<li>Other grid features from Wizardry are also available</li>
<li>Includes <code>.grid--rev</code>, <code>.grid--full</code>, <code>.grid--right</code>, <code>.grid--center</code>, <code>.grid--middle</code>, <code>.grid--bottom</code>, <code>.grid--narrow</code> and <code>.grid--wide</code></li>
</ul>

<h3>Reversed</h3>

<p>The <code>.grid--rev</code> modifier renders the grid it in the opposite order to the source order</p>

{% example "html" -%}
<div class="grid grid--rev">
<div class="grid__item one-half">
<div class="grid-example-item">first in the source</div>
</div>
<div class="grid__item one-half">
<div class="grid-example-item">second in the source</div>
</div>
</div>
{%- endexample %}

<h3>Full (gutterlesss)</h3>

<p>Remove the gutter between grid items with the <code>.grid--full</code> modifier</p>

{% example "html" -%}
<div class="grid grid--full">
<div class="grid__item one-quarter">
<div class="grid-example-item">full</div>
</div>
<div class="grid__item one-quarter">
<div class="grid-example-item">full</div>
</div>
<div class="grid__item one-quarter">
<div class="grid-example-item">full</div>
</div>
<div class="grid__item one-quarter">
<div class="grid-example-item">full</div>
</div>
</div>
{%- endexample %}

<h3>Centered</h3>

<p>Centrally aligned grids with the <code>.grid--center</code> modifier</p>

{% example "html" -%}
<div class="grid grid--center">
<div class="grid__item one-quarter">
<div class="grid-example-item">centered</div>
</div>
<div class="grid__item one-quarter">
<div class="grid-example-item">centered</div>
</div>
</div>
{%- endexample %}

</section>

{% endblock %}

0 comments on commit ba3c4eb

Please sign in to comment.