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