Core Theme

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.

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