0.1
Colors
0.1.0
colors.scss
Foundational Colors
Variants
- $black - Content text color
- $white - Content background color
0.1.1
colors.scss
Logo and Accent Colors
0.1.2
colors.scss
Layout Colors
Variants
- $dark-soft-blue - Header background
- $soft-blue - Navigation background and Links
- $offwhite - Footer background
0.2
Typography
0.2.0
typography.scss
Fonts
|
Museo Sans 100
Museo Sans 300
Museo Sans 500
Museo Sans 700
Museo Sans 900
|
0.2.1
typography.scss
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
0.2.1.1
typography.scss
Structural Headings
Variants
- h1.key - Used to call out an identifier for the current document.
- h1.title - Used to present the document title.
- section.info - Used to present additional information and actions.
Content Key
Content Title
2 weeks
Content Title Sans Key
2 weeks
0.2.1.2
typography.scss
Markdown Headings
Heading 1
Heading 2
Heading 3
0.2.1.3
attribution.scss
Curriculum Attribution
Required legal text for Curriculum
Some curriculum attribution text with a link
0.2.1.4
related_standards.scss
Related Standards
Related Standards
ELA
| L.K.4 | Determine or clarify the meaning of unknown and multiple-meaning words and phrases based on kindergarten reading and content. | Details > |
| L.K.5 | Determine or clarify the meaning of unknown and multiple-meaning words and phrases based on kindergarten reading and content. | Details > |
| L.K.6 | Determine or clarify the meaning of unknown and multiple-meaning words and phrases based on kindergarten reading and content. | Details > |
0.2.2
Inline Elements
0.2.2.1
typography.scss
Links
Variants
- :hover - Mouseover style.
- :visited - Visited pages.
- .active - Currently active links.
- .destructive - Links to destructive actions
:hover
Link Text
:visited
Link Text
.active
Link Text
.destructive
Link Text
<a href="/not/a/visited/link" class="">Link Text</a>
0.3
Images
0.3.1
images.scss
Logo
0.3.2
Icons
0.3.2.1
images.scss
Icon Styles
This is a collection of mixins to aid in the consistent styling of icons.
Variants
- icon-large - Fetch a larger variant of the icon.
- icon-medium - Fetch a mid-sized variant of the icon. (Default)
- icon-small - Fetch a smaller variant of the icon.
- icon-white - A white variant of the icon.
- icon-light - A very light grey variant of the icon.
- icon-grey - A lighter grey variant of the icon.
- icon-blue - A blue variant of the icon.
- icon-dark - A darker grey variant of the icon. (Default)
- icon-black - A black variant of the icon.
icon-large
icon-medium
icon-small
icon-white
icon-light
icon-grey
icon-blue
icon-dark
icon-black
<%= image_tag 'icons/_____.svg', class: 'icon' %>Section
0.3.2.3
images.scss
Navigational Icons
Icons are shown here enlarged and darkened for detail.
Variants
- icon-today - Today
- icon-schedules - Schedules
- icon-curricula - Curriculum Browser
- icon-collections - Collections
- icon-standards - Building Blocks
- icon-admin - Admin
icon-today
icon-schedules
icon-curricula
icon-collections
icon-standards
icon-admin
0.3.2.4
images.scss
Icon Fonts
These are primarily useful from within React components, and should be used in preference to the SVG icons in that context.
See vendor/assets/icomoon.readme for instructions on adding new icons.
Variants
- i.icon-plus - Used as decoration for "Add New"
- i.icon-edit - Used for indicating "Edit" functionality
- i.icon-delete - Used for indicating "Delete" functionality
- i.icon-dots - Used for indicating additional details are available
- i.icon-download - Used for indicating "Download" functionality
- i.icon-google-drive - Used where the "Google Drive" logo is appropriate
- i.icon-public - Sharing permission; "Visible to Everyone"
- i.icon-group - Sharing permission; "Visible to a Group"
- i.icon-private - Sharing permission; "Visible to only me"
i.icon-plus
i.icon-edit
i.icon-delete
i.icon-dots
i.icon-download
i.icon-google-drive
i.icon-public
i.icon-group
i.icon-private