Evo

Usage Theme

Grab the CSS code and start styling text, color, buttons, or images. Use this page as a general style guide.

Theme

Evo theme variables are found in the _evo_variables.scss file. Run Gulp and Sass on the source files, then edit the variables to match the desired look and feel. Example variables below.

// Primary accent color
$evo_color:                 #{$color_15} !default;

// Typography
$html_font_style:           normal !default; // or italics or oblique
$html_font_variant:         normal !default; // or small-caps if the font supports it
$html_font_weight:          normal !default; // or bolder or lighter or 400
$html_line_height:          1.4375 !default; // define this in body
$html_font_stretch:         normal !default; // or condensed or expanded
$html_font_size:            1rem !default; // // or 1 rem, define this in body
$html_font_family:          #{$google-source-sans}; // or #{$sans-serif}
$html_tap_highlight_color:  rgba(0, 0, 0, 0);

These variables power the evo-color and evo-font classes, demonstrated below.

// evo color
#{$evo}-color,
#{$evo}-color-hover:hover      { color: #{$evo_color}; }

#{$evo}-color-bg,
#{$evo}-color-bg-hover:hover   { background-color: #{$evo_color}; }

#{$evo}-color-box,
#{$evo}-color-box-hover:hover  { border-top-color: #{$evo_color}; border-bottom-color: #{$evo_color}; border-right-color: #{$evo_color}; border-left-color: #{$evo_color}; }

// evo font
#{$evo}-font { 
  // font-size:    #{$html_font_size};
  font-family:     #{$html_font_family};
  font-weight:     #{$html_font_weight};
  line-height:     #{$html_line_height};
}

Theme variables that exist or are planned

  1. Masonry grid
  2. Masonry grid inverse
  3. Base code
  4. Base code inverse
  5. Code inline box
  6. Code inline box inverse
  7. Quote
  8. Quote inverse
  9. Dropcap
  10. Dropcap inverse
  11. Horizontal rule
  12. Horizontal rule inverse
  13. Icons
  14. Icons inverse
  15. Form input
  16. Form input inverse
  17. Form padding
  18. Form box
  19. Form box inverse
  20. Form hover
  21. Form hover inverse
  22. Form placeholder text
  23. Form placeholder text inverse
  24. Form legend text
  25. Form legend text inverse
  26. Table
  27. Table inverse
  28. Highlight
  29. Highlight inverse
  30. Selection
  31. Selection inverse
  32. Link
  33. Link inverse
  34. Paragraph link
  35. Paragraph link inverse
  36. List
  37. List inverse
  38. Number list
  39. Number list inverse
  40. Bullet list
  41. Bullet list inverse
  42. Font
  43. Text
  44. Text inverse
  45. Text paragraph
  46. Text measure
  47. Text tracking
  48. Text leading
  49. Text shadow
  50. Text shadow inverse
  51. Text glow
  52. Text glow inverse
  53. Heading H1
  54. Heading H1 inverse
  55. Heading H2
  56. Heading H2 inverse
  57. Heading H3
  58. Heading H3 inverse
  59. Heading H4
  60. Heading H4 inverse
  61. Heading H5
  62. Heading H5 inverse
  63. Heading H6
  64. Heading H6 inverse
  65. Body background color
  66. Body background color inverse
  67. Black
  68. White
  69. Gray dark
  70. Gray
  71. Gray light
  72. Color
  73. Box
  74. Box inverse
  75. Box shadow
  76. Box shadow inverse
  77. Button
  78. Button inverse