U1T App Style Guide
Guidelines
- U1T App uses Sass as a preprocessor for this project's CSS. This project uses node-sass via the command line using the following command in the
srcfolder:node-sass --watch static/scss/style.scss static/css/style.css
Logo
Logo: Logomark: SVG
Colors
- Background colors use a
-bgsuffix, likegreen-forest-bg.
Colors: Brand
Colors: Secondary
Colors: Pure Black, Grey, Pure White
Colors: Typography
Colors: States
Spacing
The default $spacing variable's value is 10 pixels.
$spacing-2 is twice the value of $spacing and so on.
Spacing: All Sides
Uses padding on all four sides to create spacing.
Spacing: Horizontal
Uses left and right padding to create spacing.
Spacing: Vertical
Uses top and bottom padding to create spacing.
Spacing: Left
Uses left padding to create spacing.
Spacing: Right
Uses right padding to create spacing.
Spacing: Top
Uses top padding to create spacing.
Spacing: Bottom
Uses bottom padding to create spacing.
Spacing: Vertical: Reduce spacing on small / mobile screens
Uses top and bottom padding to create spacing that reduces to 24px on mobile.
Spacing: Top: Reduce spacing on small / mobile screens
Uses top padding to create spacing that reduces to 24px on mobile.
Spacing: Bottom: Reduce spacing on small / mobile screens
Uses bottom padding to create spacing that reduces to 24px on mobile.
Spacing: Reset padding on all sides
Spacing: Reset margins on all sides
H2 Heading: Margins reset
Image / Item Horizontal Centering
Helper class for horizontal centering of image
Image, Video, Section: Full-width
Use the full-width class to make images, buttons, etc. full width
Media Queries
View an example of all media queries on the site.
Grid
Add a container that wraps a row, which wraps columns. Flex helpers are available to customize the layout.
A 12 column grid is provided with classes for each media query breakpoint. E.g. col-12, col-6-sm, col-4-mid and col-3-lg.
Grid: Containers
Container sizes are obtained from the media query variables. A full-width container can be used for full-bleed sections.
Grid: Rows & Columns: Default
Rows have negative margins to offset column padding.
Columns have a left and right padding that acts as gutters.
Rows and columns have default, large and small gutter options.
Rows: Flexbox containers
Flex containers can be initiated on a specific media query using classes like flex-sm, flex-mid and flex-lg
View an example of flex containers on different media queries.
Rows & Columns: Default Gutters
Rows & Columns: Large Gutters
Rows & Columns: Small Gutters
Rows & Columns: X-Small Gutters
Columns: Different sizes on different breakpoints
Columns: Column 2 automatically fills up remaining width
Use flexbox helper flex-1 on the appropriate column.
Columns: Column 2 is pushed to the right
Use flexbox helpers margin-left-auto or margin-right-auto on the appropriate column for pushing to the right and left respectively.
Columns: Columns: Horizontally centered
Use flexbox helper flex-justify-center on the row.
Columns: Columns: Horizontally aligned to right
Use flexbox helper flex-justify-flex-end on the row.
Columns: Vertically centered
Use flexbox helper flex-align-center on the row.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora cumque adipisci atque ab quam, non, maiores nostrum. Necessitatibus, sit quae magnam nesciunt totam culpa reiciendis amet molestiae libero natus iusto.
Columns: Vertically aligned to bottom
Use flexbox helper flex-align-end on the row.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora cumque adipisci atque ab quam, non, maiores nostrum. Necessitatibus, sit quae magnam nesciunt totam culpa reiciendis amet molestiae libero natus iusto.
Columns: Halves
Columns: Thirds
Typography
Typography: Font Families
Typography: Font Sizes
Use variables or classes for font sizes.
The base font size is in pixels and the rest use the px-to-percent function to output pixel values as percentages.
Typography: Font Weights
Typography: Text Utilities
Typography: HTML Headings: H1 - H6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Typography: Links
Link: Default
Link: Mimic default link style on divs, spans, etc.
Typography: Lists: Reset Styles
Use a mixin or class of list-reset to reset default list styles.
- Reset Unordered List Styles: Item 1
- Reset Unordered List Styles: Item 2
- Reset Unordered List Styles: Item 3
- Reset Ordered List Styles: Item 1
- Reset Ordered List Styles: Item 2
- Reset Ordered List Styles: Item 3
Icons
U1T App's uses icons from the Feather icon set, generated via the Icomoon app.
To update the icon set, upload the selection.json file on the Icomoon website. Add or delete icons as needed and download the new set of files and update them.
View the list of all icons. You can choose additional icons from this set as needed.
Icons:Examples
Forms
Forms: Labels
Forms: Inputs
Inputs: Default
Forms: Input: Search
Forms: Textareas
Textarea
Forms: Selects
Select
Forms: Radio Buttons
Radio Buttons
Forms: Checkboxes
Checkboxes
Forms: Toggle Switch using Checkbox
Forms: Notifications
Progress Bars
Progress Bar: Default
Progress Bar: Large
Card: List View
Cleaning Agent
Cleaning Agent
Cleaning Agent
Cleaning Agent
Cards: List Dot View
Cards: List Dot View: Simple
Cards: List Dot View: Orders
Card: Heading, Image, Description, Button, Coloured Background
Upgrade For A Greener Future
By using a smart jar for rice, you can save up to 15 kg of CO2 emissions each year, and you'll save $50 annually by reducing waste.
Get Smart JarCards: Solid Block
Cards: Solid Block with Button
Cards: Solid Block with Progress Bar
Rbox: jQuery Lightbox
jQuery Lightbox using Rbox plugin
Read documentation for images, galleries, HTML5 Video, Iframe Embeds, HTML Content, Inline Content, AJAX Content
Tooltips
Pure CSS tooltips using balloon.css plugin
Sliders & Carousels
U1T App uses the splide.js plugin to create sliders and carousels
To use the slider, include the splide js plugin and customize as needed.
Slider Carousel: Article
This is an example of an image slider carousel with heading, caption and pagination dots.
-
Short Headline Related to Image
Did you know the food industry is responsible for 26% of global greenhouse gas emissions? Learn how your choices can make a difference.
-
Short Headline Related to Image
Did you know the food industry is responsible for 26% of global greenhouse gas emissions? Learn how your choices can make a difference.
-
Short Headline Related to Image
Did you know the food industry is responsible for 26% of global greenhouse gas emissions? Learn how your choices can make a difference.
-
Short Headline Related to Image
Did you know the food industry is responsible for 26% of global greenhouse gas emissions? Learn how your choices can make a difference.
Slider: Solid Cards Block
This is an example of a slider carousel with solid coloured cards.
Slider: Single Image
This is an example of a single image slider with pagination dots.
Accordions & Collapsibles
Use Accordions to open one of multiple items at a time. Use Collapsibles to open multiple items at a time.
Use the data-attribute data-multiple="true" to open multiple items at a time and data-multiple="false" to open a single item at a time.
Accordion: Open multiple items at a time
We design, deliver, and host transformative educational programs for educators and students to help inspire an emerging generation of changemakers. We do this together with a global network of collaborators in education, sustainability, and food systems.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion: Open a single item at a time
We design, deliver, and host transformative educational programs for educators and students to help inspire an emerging generation of changemakers. We do this together with a global network of collaborators in education, sustainability, and food systems.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.