post toolkit and documentation

Jun 13 •

Article subheader (h2)

The wordpress theme contains some grid classes from the Bootstrap framework. These classes are available for creating articles too. See the bootstrap documentation.

Centred article subheader (h2)

Many classes available for styling articles are, by design, not available across the rest of the blog. I have done this to enable the use of more generic classnames which will make your lives easier, but which are themselves too generic to risk implementing globally.

This paragraph is a larger size. We misuse header tags to achieve larger font-sizes. We should use this instead.

 

This paragraph is the largest size available. We misuse header tags to achieve larger font-sizes. We should use this instead.

 

This column of text is 50% of the width of the article container. This and the following paragraph are wrapped in a highlighted block.

This is a paragraph featuring a grey label, and a default red label. The spacing class is added to the containing paragraph. I recommend doing this because of the height of the labels, unless the label is being used on a single line. A label’s background colour can be overriden with an inline style.

 

 

This column of text is 50% of the width of the article container. The text in this paragraph is also jusitifed.

Placeholder image

 

Article subheader (h3)

This column of text is 50% of the width of the article container. This text is coloured with a custom style. See the inline stylesheet in the source code.

Placeholder image

 

Caption for above image

 

This nested column is 50% even at mobile screensize.

 

This nested column is 50% even at mobile screensize.

 

Text can be italic. Text can be bold and italic. Nested columns should be inside a row class.

 

 

 

This column of text is 25% of the width of the article container. It has slightly larger line-spacing than other paragraphs.

 

This column of text is 25% of the width of the article container.

 

 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a highlighted block with no overlap, rounded corners, and a custom background colour from the inline stylesheet. Custom background colours can also be inlined

 

 

This paragraph of text is smaller. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This paragraph of text is the smallest. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

 
This block is useful for emphasising key points from an article. Border and text colour can be overriden with a class from the inline stylesheet, or an inline style.
 

This block is for including quotes in an article. All colours can be overriden. Speech-mark is an SVG and can be coloured inline (see source).

 

 

Buttons

Button size can be set with inline font-size. The button will scale automatically scale proportionally. Colours can be customised with inline styles. Wrap a button in a centre class to centre.

Small button
Default button
Medium button
Large button

Alignment

Buttons are left-aligned by default

Default button

 

Buttons can be centre-aligned

Default button

 

 

Buttons can be right-aligned

Default button

 

 

Dividers

Dividers can be used to create vertical space between content. By adding/removing classes (see source) it is easy to select a dotted/solid divider with no spacing, a divider with a large space either top or bottom (or both), or a divider with a small space either top or bottom (or both). Also see examples used through this document. Inline background colours can be added for interesting effects. See the last example.

 
 
 
 
 
 

Lists

Large

1List point 1
2List point 2
3List point 3

 

1List point 1
2List point 2
3List point 3

 

1List point 1
2List point 2
3List point 3

 

Smaller

1List point 1
2List point 2
3List point 3

 

1List point 1
2List point 2
3List point 3

 

1List point 1
2List point 2
3List point 3

 

Smallest

1List point 1
2List point 2
3List point 3

 

1List point 1
2List point 2
3List point 3

 

1List point 1
2List point 2
3List point 3

 

Block

1List point 1

At vero eos et accusamus et iusto odio dignissimos ducims qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

 

 

2List point 2

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

 

 

3List point 3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

 

 

4List point 4

At vero eos et accusamus et iusto odio dignissimos ducims qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

 

 

5List point 5

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

 

 

6List point 6

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

 

 

1

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

2

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

4

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas.

 

Inset block

Any text wrapped in <p></p> tags is inset and wraps around the callout-block if present. Text is not inset on mobile, but it still wraps the callout-block. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Text wraps around this callout-block when placed inside the inset-block.

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Placeholder image

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

 
KidStart works with more than 1,600 retailers like Sainsbury's Logo, John Lewis' logo, Mothercare's logo, eBay's logo, British Airway's logo, Amazon's Logo and many more. You only need to access the retailer you want to shop at from the KidStart site, and then shop as normal. The retailers will then pay a percentage of your spending to KidStart as a thank-you for business, and KidStart top-up your kids’ savings account. Learn more here.