Development Style Guide

The purpose of this style guide is to provide an overview of all core elements, such as typography, buttons and inputs.

Colors

Headings

Please note, heading line-height and font-size are set globally, however any margins are scoped within the .content wrapper.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Body text and inline links

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Lists

Unordered list

  • List item 1.
  • List item 2.
  • List item 3.

Ordered list

  1. List item 1.
  2. List item 2.
  3. List item 3.

Buttons

Also ensure all button states are correctly configured, this includes: hover, active, focus.


Forms/inputs

Ensure state/event styles are all correctly configured, this includes: focus, blur, validate, error.


Border radius

Raptor comes with the global css variable --border-radius, which provides easy control of a border radius across a website. See the border radius here. For instances where a greater radius is used, try to still use the css variable, but with a multipler in a calc() function. Example below.

border-radius: calc( var(--border-radius) * 2 );

1x
2x
Good
Based on 14 reviews
Mark Belshaw
Mark Belshaw
2023-02-17
Ordered 2 bulk bags of manure on Wednesday, late afternoon and all was delivered by Friday lunch time. Great quality product and excellent delivery turnaround.
Charles Smith
Charles Smith
2022-06-30
Excellent, from order to delivery. 10 tonnes of loose load top soil delivered within a few days. Best price and the 10mm screened soil is great quality. Thank you
Lesley Barry
Lesley Barry
2022-05-15
Excellent product ordered 4 bags of top soil the driver was so accommodating as we have a very long driveway. The customer sevice was excellent. Thank you.
David Robberts
David Robberts
2021-05-13
Excellent product at a sensible price from a local supplier. Staff are friendly and willing to help: I asked if just one bag of topsoil could be delivered quickly and it arrived next day! Great service.
Mark Hibberd
Mark Hibberd
2018-06-11
Smooth execution of the transaction and delivery. Very helpful phone call and conversation. Ordered three bags of Border Blend topsoil. Paid by Paypal. They delivered, on the specified date, carefully, exactly where I wanted the bags placed. All in all, a very pleasing purchase. The topsoil was excellent and had been very carefully prepared. No lumps. Would definitely recommend and I will use again. Everyone I spoke to was nice and helpful.
David Stamp
David Stamp
2015-09-18
Ordered topsoil on Tuesday came by Friday at the exact time quoted. Was WAY cheaper than anywhere else (by about £15 per bag) and was dropped off via a crane on back of the lorry, not by pallet which most of the other places use. Soil was fine and dry. Brilliant !