Watch Video

Overview 

The Core Theme forms the foundation of your website’s styles.  All other Atom Themes inherit their default colours, font family, font size, padding, etc from it.  It also includes all the CSS elements required for the layout of your responsive web pages.  Without it the pages based on the template you designed would not be able to understand the column-based layout structure.

Guidance

Theme

• Colour Settings
  
  
• Background Colour
  Used as the default background colour for atoms, and a calculated 20% darker colour is used as default for buttons and borders.
  
  
• Foreground Colour
  Used as the default colour for the fonts and the headings.
  
  
• Heading Colour
  Overrides the default heading colour for H1 through to H6 with the selected colour.
  
  
• Button Colour
  Overrides the default button colour.
  The button’s border is set to 10% darker than the implemented colour
  
  
• Border Colour
  Overrides the border colour of any html input field (text, text area, password, etc) by the selected colour.
  
  
• Shade Fields
  If selected it shades the background of any html input field (text, text area, password, etc) by the background colour through to a calculated 20% darker colour.

Text

• Font Settings
  
  
• Font Size
  The default font size for the website.
  Also used to calculate the sizes for each of the headings based off the Header 1 font size (see below for proportions.).  The Header 1 font size is 2.25 times the standard font size by default.
  
  
• Font
  The default font family for the website.
  
  
• Line Height
  Overrides the default line height.
  Line height is the vertical space each line of text takes up.  Therefore a 14px font will have at least 16px line height to ensure a small amount of vertical space between the lines.  If the line height is increased it tends to make the text more legible.
  
  
• Header 1 Font Size
  Overrides the default Header 1 font size set from the standard font size.  All other header font sizes are proportional to this size:

• H2 = 89% of H1
• H3 = 78% of H1
• H4 = 67% of H1
• H5 = 56% of H1
• H6 = 50% of H1

Appearance

• Sizing
  
  
• Base Padding
  The amount of padding, in pixels, that each standardised element that has been defined to have padding, is set to by default
  
  
• Curves Enabled
  For standardised elements that can be set to have rounded corners (buttons, containers, etc) this turns that option on or off.  The amount of curve is defined as a multiple (x2) of the padding selected as “Base Padding”.

Atom

• Options
  
  
• Atom Background A
  This style’s background colour defaults to a 40% calculated darker version of the background colour
  
  
• Atom Background B
  This style’s background colour defaults to a 60% calculated darker version of the background colour