-
Notifications
You must be signed in to change notification settings - Fork 41
Design
Tim Nelson edited this page Oct 2, 2020
·
1 revision
For this application, we are using Bootstrap version 4.5 to align with our current Django lessons on the Full-Stack Frameworks module.
This will also allow us to utilize django-crispy-forms for cleaner forms.
Palette: Primary Colors
--p-orange |
--p-blue |
--p-grey |
--p-navy |
--p-red |
---|---|---|---|---|
#E84610 | #009FE3 | #4A4A4F | #445261 | #D63649 |
Palette: Secondary Colors
--s-grey |
--s-yellow |
--s-pink |
--s-teal |
---|---|---|---|
#E6ECF0 | #EFB920 | #FF5A60 | #23BBBB |
Palette: Tertiary Colors
--t-grey |
---|
#E0E7FF |
CSS Color :root
Variables
:root {
/* P = Primary | S = Secondary | T = Tertiary */
--p-orange: #E84610;
--p-blue: #009FE3;
--p-grey: #4A4A4F;
--p-navy: #445261;
--p-red: #D63649;
--s-grey: #E6ECF0;
--s-yellow: #EFB920;
--s-pink: #FF5A60;
--s-teal: #23BBBB;
--t-grey: #E0E7FF;
--bg-grey: #F5F5F5;
}
/* How To Use CSS Root Variables */
element {
color: var(--p-orange);
background-color: var(--bg-grey);
}
Please be sure to use the Font Awesome version 5 icon set, not version 4.
Library of all Font Awesome version 5 free icons.
-
Montserrat : primary font-family, with
sans-serif
fallback. -
Rubik : secondary font-family, with
sans-serif
fallback.
Both fonts above come from Google Fonts.