Core Theme

Linked Help

 

 

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

 XPOR Ltd. UK Co. Registered in England No. 10409669
 02392 738000
 02392 739000