Skip to content

Commit

Permalink
More styling for new styleguide
Browse files Browse the repository at this point in the history
  • Loading branch information
David Annez committed Apr 21, 2015
1 parent 139b17a commit 51aa927
Show file tree
Hide file tree
Showing 15 changed files with 197 additions and 186 deletions.
4 changes: 4 additions & 0 deletions styleguide/assets/javascripts/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
"use strict";

function App(){
gumshoe.init({
activeClass: 'sidebar__nav-link--active'
});
var tabs = new tabScroll($(".nav__link.active"), $(".nav-container"));

var toggleLinks = document.querySelectorAll(".js-toggle__link");

for (var i = toggleLinks.length - 1; i >= 0; i--) {
Expand Down
4 changes: 0 additions & 4 deletions styleguide/assets/javascripts/modules/sticky-sidebar.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,17 @@
if (elem === null) return;

var box = elem.getBoundingClientRect();
console.log(box)
var targetOffset = box.top + window.pageYOffset - document.documentElement.clientTop;

_listenToScroll(targetOffset, elem);

window.addEventListener("scroll", function(e){
console.log(e)
_listenToScroll(targetOffset, elem)
});
}

function _listenToScroll(targetOffset, elem){
console.log(targetOffset);
var winTop = window.pageYOffset;
console.log(winTop);
if (targetOffset < winTop){
elem.classList.add("sticky");
} else {
Expand Down
2 changes: 2 additions & 0 deletions styleguide/assets/javascripts/vendor/gumshoe.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion styleguide/assets/sass/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ $needs-font: true;
$load-icons: true;

// Ustyle imports
@import "ustyle";
@import "ustyle",
"ustyle/content";

@import "structure/base",
"structure/header";
Expand Down
5 changes: 5 additions & 0 deletions styleguide/assets/sass/modules/_sidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ $sidebar-padding : 0;
display: block;
padding-top: 2px;
padding-bottom: 2px;

&--active {
color: $c-typecyan;
font-weight: 700;
}
}
}

Expand Down
6 changes: 3 additions & 3 deletions styleguide/assets/sass/modules/_styleguide.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ $styleguide-block-border-color: $c-bordergrey;
.styleguide {

&__block {
padding-top: $styleguide-block-padding;
padding-top: $styleguide-block-padding / 2;

@include respond-to(tablet, true) {
padding-bottom: $styleguide-block-padding;
Expand Down Expand Up @@ -85,8 +85,8 @@ $styleguide-block-border-color: $c-bordergrey;

&__block-example-class {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: $c-bggrey;
color: $c-typegrey-2;
padding: 3px 8px;
Expand Down
97 changes: 48 additions & 49 deletions styleguide/code/grid.tpl
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
---
section: Code
---
<div class="styleguide__block">
<h2 class="styleguide__block-title">Introduction</h2>
<p>
Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.
</p>
<ul>
<li>Default gutter width: <strong>15px either side</strong></li>
<li>Large container width: <strong>1170px</strong></li>
<li>Desktop container width: <strong>970px</strong></li>
<li>Tablet container width: <strong>770px</strong></li>
</ul>
<ul>
<li>The parent container is <code>.us-container</code>, you must have this to start building the uSwitch layouts.</li>
<li><code>.us-grid-row</code> is then used when you are building rows of columns (gives a negative margin to the container so they align correctly)</li>
<li>All grid class names are prefixed with <code>.us-col-</code></li>
</ul>
</div>
<div class="styleguide__block">
<h2 class="styleguide__block-title">Example</h2>
<p>Here is an example of a grid which will turn into 100% width columns on mobile.</p>
<div class="grid-example">
<div class="us-grid-row">
<div class="col-example us-col-md-2">.us-col-md-2</div>
<div class="col-example us-col-md-2">.us-col-md-2</div>
<div class="col-example us-col-md-4">.us-col-md-4</div>
<div class="col-example us-col-md-4">.us-col-md-4</div>
</div>
<div class="us-grid-row">
<div class="col-example us-col-md-8">.us-col-md-8</div>
<div class="col-example us-col-md-4">.us-col-md-4</div>
</div>
<div class="us-grid-row">
<div class="col-example us-col-md-6">.us-col-md-6</div>
<div class="col-example us-col-md-6">.us-col-md-6</div>
</div>
</div>
<pre><code class="html">
<div class="styleguide__block">
<h2 class="styleguide__block-title">Introduction</h2>
<p>
Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.
</p>
<ul>
<li>Default gutter width: <strong>15px either side</strong></li>
<li>Large container width: <strong>1170px</strong></li>
<li>Desktop container width: <strong>970px</strong></li>
<li>Tablet container width: <strong>770px</strong></li>
</ul>
<ul>
<li>The parent container is <code>.us-container</code>, you must have this to start building the uSwitch layouts.</li>
<li><code>.us-grid-row</code> is then used when you are building rows of columns (gives a negative margin to the container so they align correctly)</li>
<li>All grid class names are prefixed with <code>.us-col-</code></li>
</ul>
</div>
<div class="styleguide__block">
<h2 class="styleguide__block-title">Example</h2>
<p>Here is an example of a grid which will turn into 100% width columns on mobile.</p>
<div class="grid-example">
<div class="us-grid-row">
<div class="col-example us-col-md-2">.us-col-md-2</div>
<div class="col-example us-col-md-2">.us-col-md-2</div>
<div class="col-example us-col-md-4">.us-col-md-4</div>
<div class="col-example us-col-md-4">.us-col-md-4</div>
</div>
<div class="us-grid-row">
<div class="col-example us-col-md-8">.us-col-md-8</div>
<div class="col-example us-col-md-4">.us-col-md-4</div>
</div>
<div class="us-grid-row">
<div class="col-example us-col-md-6">.us-col-md-6</div>
<div class="col-example us-col-md-6">.us-col-md-6</div>
</div>
</div>
<pre><code class="html">
&lt;div class=&quot;us-grid-row&quot;&gt;
&lt;div class=&quot;us-col-md-2&quot;&gt;.us-col-md-2&lt;/div&gt;
&lt;div class=&quot;us-col-md-2&quot;&gt;.us-col-md-2&lt;/div&gt;
Expand All @@ -52,18 +52,17 @@ section: Code
&lt;div class=&quot;us-col-md-6&quot;&gt;.us-col-md-6&lt;/div&gt;
&lt;div class=&quot;us-col-md-6&quot;&gt;.us-col-md-6&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
<div class="styleguide__block">
<h2 class="styleguide__block-title">Example with mobile columns</h2>
<div class="grid-example">
<div class="us-grid-row">
<div class="col-example us-col-xsm-6 us-col-md-2">.us-col-xsm-6.us-col-md-2</div>
<div class="col-example us-col-xsm-6 us-col-md-2">.us-col-xsm-6.us-col-md-2</div>
<div class="col-example us-col-sm-6 us-col-md-4">.us-col-sm-6.us-col-md-4</div>
<div class="col-example us-col-sm-6 us-col-md-4">.us-col-sm-6.us-col-md-4</div>
</div>
</div>
</code></pre>
</div>
<div class="styleguide__block">
<h2 class="styleguide__block-title">Example with mobile columns</h2>
<div class="grid-example">
<div class="us-grid-row">
<div class="col-example us-col-xsm-6 us-col-md-2">.us-col-xsm-6.us-col-md-2</div>
<div class="col-example us-col-xsm-6 us-col-md-2">.us-col-xsm-6.us-col-md-2</div>
<div class="col-example us-col-sm-6 us-col-md-4">.us-col-sm-6.us-col-md-4</div>
<div class="col-example us-col-sm-6 us-col-md-4">.us-col-sm-6.us-col-md-4</div>
</div>
</div>
</div>
</div>
36 changes: 18 additions & 18 deletions styleguide/design/imagery.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@ section: Design
<p>This will also extend into 3D renderings of objects, which are used within the banner areas of our website.</p>
</div>
<div class="us-col-md-2">
<img class="us-img--full trailered" src="images/object-photography-01.png">
<img class="us-img--full trailered" src="images/object-photography-02.png">
<img class="us-img--full trailered" src="images/object-photography-05.png">
<img class="us-img--full trailered" src="images/object-photography-06.png">
<img class="us-img--full trailered" src="/images/object-photography-01.png">
<img class="us-img--full trailered" src="/images/object-photography-02.png">
<img class="us-img--full trailered" src="/images/object-photography-05.png">
<img class="us-img--full trailered" src="/images/object-photography-06.png">
</div>
<div class="us-col-md-2">
<img class="us-img--full trailered" src="images/object-photography-03.png">
<img class="us-img--full trailered" src="images/object-photography-04.png">
<img class="us-img--full trailered" src="images/object-photography-07.png">
<img class="us-img--full trailered" src="images/object-photography-08.png">
<img class="us-img--full trailered" src="/images/object-photography-03.png">
<img class="us-img--full trailered" src="/images/object-photography-04.png">
<img class="us-img--full trailered" src="/images/object-photography-07.png">
<img class="us-img--full trailered" src="/images/object-photography-08.png">
</div>
</div>
</div>
Expand All @@ -58,16 +58,16 @@ section: Design
<p>Our illustration style should be straightforward, clean and simple. Illustrations should be put over our brand colours, gradients or white, and they should be 2-D where possible, and not be overly metaphor based or cliché.</p>
</div>
<div class="us-col-md-2">
<img class="us-img--full trailered" src="images/illustration-01.png">
<img class="us-img--full trailered" src="images/illustration-02.png">
<img class="us-img--full trailered" src="images/illustration-05.png">
<img class="us-img--full trailered" src="images/illustration-06.png">
<img class="us-img--full trailered" src="/images/illustration-01.png">
<img class="us-img--full trailered" src="/images/illustration-02.png">
<img class="us-img--full trailered" src="/images/illustration-05.png">
<img class="us-img--full trailered" src="/images/illustration-06.png">
</div>
<div class="us-col-md-2">
<img class="us-img--full trailered" src="images/illustration-03.png">
<img class="us-img--full trailered" src="images/illustration-04.png">
<img class="us-img--full trailered" src="images/illustration-07.png">
<img class="us-img--full trailered" src="images/illustration-08.png">
<img class="us-img--full trailered" src="/images/illustration-03.png">
<img class="us-img--full trailered" src="/images/illustration-04.png">
<img class="us-img--full trailered" src="/images/illustration-07.png">
<img class="us-img--full trailered" src="/images/illustration-08.png">
</div>
</div>
</div>
Expand All @@ -80,10 +80,10 @@ section: Design
<p>Infographics are generally displayed on our news and guide pages, so size the graphic accordingly (ie. 8 column width). They are also sometimes printed, so prepare them at 300dpi, then save at 72dpi if also needed for web.</p>
</div>
<div class="us-col-md-2">
<img class="us-img--full trailered" src="images/infographic-01.png">
<img class="us-img--full trailered" src="/images/infographic-01.png">
</div>
<div class="us-col-md-2">
<img class="us-img--full trailered" src="images/infographic-02.png">
<img class="us-img--full trailered" src="/images/infographic-02.png">
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions styleguide/design/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
section: Design
name: Design
---

This is the design section
107 changes: 107 additions & 0 deletions styleguide/design/language.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
---
section: Design
---

**How does a brilliantly simple brand sound?** Think of our tone of voice as a natural extension of our values and personality. We might not mention them in our copy, but their ‘feel’ should come across in every word, sentence and paragraph.

Tone of voice
---

### Expert
We have a deep understanding of people, household finances and the industries in which we operate. Be confident and authoritative.

### Human
We always talk on the same level as our customers. Be friendly and conversational, never patronising.

### Connected
We are seamlessly synchronised with the wider world and financial one. Be timely, knowledgeable and accurate.

### Frank
We speak truthfully and with insight. Be honest and transparent.

### Advisory
We make a positive impact on the lives of our customers. Be empowering and informative.

Some writing tups
---

### Write like you speak
Write as if the reader is in front of you. It’ll make your words sound more natural and believable.

### Jargon-free zone
Leave the corporate words to the boardroom. Everyday words are much better. They’re easier to read and get our message across quicker.

### Statistical value
Well-placed stats and relevant data really add weight to what we’re saying. But use them sparingly, and only if it really merits it.

### Be active
Use an active voice rather than a passive one. This means writing sentences this way round: ‘The customers were saving money.’ Rather than this way round: ‘Money was being saved by the customers.

### Consistency is key
We all need to speak and write the same way, otherwise it waters down our brand and weakens our position.

### Headlines
Keep them short. The longer a headline is, the less likely it is to be read. So don’t write it in four words if you can do it in three.

### Less is more
Short copy gets read. Long copy doesn’t. Get to the point as quick as possible. Otherwise you’ll lose the reader.

### Be purposeful and actionable
Content should always be actionable. You’ve given the customer relevant information, now tell them what they can do with it.

### Once is enough
Say it once and say it well. Repetition makes copy boring and overly long, and creeps in when we’re not confident about what we’re saying.

### Snack-sized copy
If you have a lot of information to get across, use bullet points or sub-headings to break it up. But don’t use too many bullets or make them too long or it will defeat the objective.

### Go with the flow
Do your words trip off the tongue? There’s one way to find out. Read them out loud and you’ll soon find out where it’s not flowing.

Writing conventions
---

### Abbreviations
For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.

### Ampersands (&)
For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.

### Apostrophes
Avoid common misuse of apostrophes:

- Mixing up it’s (it is) and its (possessive)
- Using to denote plural: DVD’s (wrong) vs DVDs (correct)
- When writing Dos and Don’ts (not Do’s and Don’ts)
- When writing decades 1990s (not 1990’s); the ’80s (not the 80’s)

### British English
Use the British ‘s’ in words such as ‘realise’, and ‘specialise’, rather than the American ‘z’.

### Capital letters
Never use all capital letters. Headlines follow usual sentence structure, with only the first word and proper nouns utilising capitals.

### Company names and references
Follow punctuation and capitalisation of company names and products as they are branded.

Example: E.ON, iPhone, iSaver

When referencing a company in a news or guide, remember to always keep them in the singular.

Example: BT is launching a new ... (not BT are launching a new ...)

### Contractions
Our tone of voice is friendly and familiar, so it’s fine to use contractions like ‘they’ll’, ‘it’ll’, ‘isn’t’.

### Dashes and hyphens
If you use a dash within a sentence to create emphasis, then use a long em dash – rather than a hyphen.
Compound adjectives before a noun generally use a hyphen (e.g. ‘the well-organised energy provider’). After a noun, they should be separated (e.g. ‘the energy provider was well organised’).

### Exclamation marks
Use sparingly.

### Full stops
Don’t use full stops at the end of headlines.

### Legals, disclaimers and caveats
Superscript numbering should be used when there is more than one caveat, however, when there is only one caveat in a communication, an asterisk (*) should be used.
Loading

0 comments on commit 51aa927

Please sign in to comment.