Cronofy Style Guide
This is a styleguide/pattern library with styled elements and shortcodes for the Cronofy website.
alerts
Shortcode
[alert_box]Text goes here.[/alert_box]blockquotes
Some sort of famous witty quote marked up with a
blockquoteand a childpelement.
Even better philosophical quote marked up with just a blockquote element.
colours
Main colours
$col-page
#f5f3f2
$col-text
#5a554d
$col-border
#ccc
$col-reverse-btn
#000
Main support colours
$col-light
#f5f3f2
$col-dark
#5a554d
$col-white
#fff
$col-page-lighter
#f8f7f6
$col-extra-light
#d4cfca
$col-extra-lighter
#e1ddda
$col-extra-dark
#b3a79e
$col-extra-darker
#958b83
Cronofy colours
$col-cronofy-lightbrown
#a3978c
$col-cronofy-brown
#5a554d
$col-cronofy-blue
#49bed8
$col-cronofy-blue-hover
#76CFE2
$col-cronofy-seagreen
#2e787d
$col-cronofy-seagreen-hover
#65999E
Extra button colours
$col-cronofy-accent
#ffc100
$col-cronofy-accent-hover
#ecb400
$col-cronofy-landing
#d35400
$col-cronofy-landing-hover
#de7f3f
Miscellaneous
$col-required
#c7254e
$col-optional
#17be7c
$col-google
#dd4c39
fonts
All the fonts are SASS mixins. Use the SASS @include in CSS to assign a font to an element.
font-body()
"FFDINWebLight", Helvetica, Arial, sans-serif;
font-italic()
"FFDINWebItalic", Helvetica, Arial, sans-serif;
font-bold()
"FFDINWebProBold", Helvetica, Arial, sans-serif;
font-code()
Monaco, Menlo, Monaco, Consolas, 'Courier New', monospace;
form-fields
gravity-forms
Adding a regular Gravity Form
The title and description attributes are optional. If you don't add them, they will default to false and not appear.
[gravityform id="" title="true" description="true"]Adding a Popup Gravity Form
If you are adding a Gravity Form in the Popup Maker you need to add ajax="true" to the shortcode
[gravityform id="" title="true" description="true" ajax="true"]Adding a coloured background to a Gravity Form
You need to surround the Gravity Form shortcode with the [gravity_form_box]...[/gravity_form_box] shortcode.
If you want to add a column of text alongside the form include the [column_text]...[/column_text] shortcode inside the box shortcode. The [column_text] shortcode should always appear before the Gravity Form shortcode. Please.
[gravity_form_box background="" button=""][column_text]...Text to use...[/column_text][gravityform id="" title="true" description="true"][/gravity_form_box]Choice of background values
lightblue, darkgreen, lightbrown, darkbrown, orange, yellow, swirlsChoice of button colour values
lightblue, darkgreen, lightbrown, darkbrown, orange, yellowExample
lists
Ordered List
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- Ut wisi enim ad minim veniam.
- Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Un-ordered List
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diam nonummy nibh
- Euismod tincidunt ut laoreet dolore
- Magna aliquam erat volutpat
preformated-text
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Pre Code
<html>
<head>
</head>
<body>
<div class="main"> <div>
</body>
</html>tables
| Type of dried grape | Fresh colour | Dry colour | Seeds |
|---|---|---|---|
| Raisin | white | dark | yes |
| Sultana | white | golden | no |
| Currant | black | dark | no |
testimonial-excerpt
Shortcode
Use the shortcode to display the testimonial and add the .excerpt class in the style section.
An excerpt testimonial will float on the right hand side in a content module when the viewport is wide enough. For this to work you'll need to put the shortcode in front of the content you want to float on the left.
[testimonial id="" style="excerpt"] The text you want to float on the left of the testimonial follows the shortcode.
Working with Cronofy to provide our customers with two-way calendar sync was really efficient. The API is consistent and well documented and the support is first class. They even added a feature to fit our needs!
The text you want to float on the left of the testimonial follows after the shortcode in the markup. When viewports are wide enough the testimonial will sit on the right and the text on the left. When viewports are too narrow for two columns, the testimonial will come first because it sits first in the source order.
One line.
The text you want to float on the left of the testimonial follows after the shortcode in the markup. When viewports are wide enough the testimonial will sit on the right and the text on the left. When viewports are too narrow for two columns, the testimonial will come first because it sits first in the source order.
testimonial-full
Shortcode
Use the shortcode to display the testimonial and add the .full class in the style section.
[testimonial id="" style="full"]Working with Cronofy to provide our customers with two-way calendar sync was really efficient. The API is consistent and well documented and the support is first class. They even added a feature to fit our needs!
One line.
testimonial
This is an additional content box you can add to a page.
“The Cronofy API allowed us to add calendar sync support to our platform in a fraction of the time it would have taken to build support for separate protocols.”
“One line.
Shortcode
[twitter id=""]Use the post id of the twitter post you would like to use.
Attila Domokos
@adomokos
@cronofy is a great calendar integration platform. Check out their Evernote connector, it's very convincing.
typography
The page title is always H1
H1: FFDINWebLight, font-size 40px, line-height 1, uppercase
A 2nd level heading
H2: FFDINWebLight, font-size 32px, line-height 1.3
This is the highest heading you can choose when adding content to pages.
A 3rd level heading
H3: FFDINWebLight, font-size 22px, line-height 1.5, uppercase, letter-spacing 1px
Some paragraph text to fill up the gap. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
A 4th level heading
H4: FFDINWebProBold, font-size 20px, line-height 1.8
Some paragraph text to fill up the gap. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
A 5th level heading
H5: FFDINWebProBold, font-size 14px, line-height 1.8, uppercase, letter-spacing 1px, $col-extra-dark
For when you get down to the nitty gritty.
A 6th level heading
H6: FFDINWebProBold, font-size 12px, line-height 1.8, uppercase, letter-spacing 1px, $col-cronofy-blue
This should only be used for extremely detailed stuff. The kind of stuff only die hard people would still be around to read.
This is a paragraph of text. Some of the text may be emphasised and some of it might even be strongly emphasised. Occasionally a link may appear in the text. The average paragraph contains five or six sentences although some may contain as little or one or two while others carry on for anything up to ten sentences and beyond.
P: FFDINWebLight, font-size 18px, line-height 1.5