Some rules to follow when doing any front-end design for our publishing sites using the Unified Theme.
Note
- There are many styling guidelines that should be followed for our unified theme.
- Please be vigilant about following them, in order to keep our code clean, consistent and maintainable. Read our Front-End Design Guidelines
Examples of CSS custom properties
xxxxxxxxxx:root { // Logo --logo-width: 10rem; // Fonts --body-font: 'Inter', sans-serif; --heading-font: 'Metropolis', sans-serif; // Spacing + Sizing --container-width: 87.5rem; --column-gap: 1rem; --card-gutter: 1.25rem; --header-gap: 1.25rem; --header-height: 3.625rem; // Misc --box-shadow: 0 .1875rem .3125rem rgba(0,0,0,0.15); --border-radius: .3125rem; // Colors --primary: #053361; // Navy Blue --accent-1: #1D87D2; // Blue --accent-2: #F6F3F0; // Pastel Brown --dark-gray-1: #757575; --light-gray-1: #DCDCDC; --light-gray-2: #F6F6F6; --black: #303030; // Black - default --white: #FFF; --disabled: #98AABE; --overlay-color: rgba(5, 51, 97, 0.5);}Some breadcrumb HTML markup utilizing BEM
xxxxxxxxxx<nav class="breadcrumb" aria-label="breadcrumb"> <ol class="breadcrumb__list"> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://walletgenius.com">Home</a> </li> <li class="breadcrumb__item"> <a class="breadcrumb__link" href="https://walletgenius.com/budgeting/">Budgeting</a> </li> </ol></nav>