Primary buttons are used to indicate a primary action on the page. Use the class, .button.button--primary-teal or .button.button--primary-blue, to get a primary button on your page. These teal and blue primary buttons meet accessibility standards, so please use them going forward. The brand green ones below are supported, but are considered deprecated since they don't meet contrast ratio standards.
<a class="m-b-05-xs button button--primary-teal button--large-xs" href>Large</a>
+<a class="m-b-05-xs button button--primary-teal" href>Normal</a>
+<a class="m-b-05-xs button button--primary-teal button--small-xs" href>Small</a>
+<a class="m-b-05-xs button button--primary-teal button--xsmall-xs" href>X-Small</a>Primary buttons are used to indicate a primary action on the page. Use the class, .button.button--primary-blue, to get a primary button on your page. These blue primary buttons meet accessibility standards, so please use them going forward. The brand green ones below are supported, but are considered deprecated since they don't meet contrast ratio standards.
Inverse buttons are used when the background color a container is too dark for normal buttons to have enough contrast. Invert the style with the classes, .button--inverse. .button--inverse-primary. .button--inverse-disabled. .button--inverse-primary-disabled.
Inverse buttons are used when the background color a container is too dark for normal buttons to have enough contrast. Invert the style with the classes, .button--inverse, .button--inverse-primary, .button--inverse-primary-teal, .button--inverse-disabled, .button--inverse-primary-disabled.
<a class="m-b-05-xs button button--inverse" href>Inverse</a>
<a class="m-b-05-xs button button--inverse-primary" href>Inverse Primary</a>
+<a class="m-b-05-xs button button--inverse-primary-teal" href>Inverse Primary Teal</a>
<a class="m-b-05-xs button button--inverse-disabled" href>Inverse Disabled</a>
<a class="m-b-05-xs button button--inverse-primary-disabled" href>Inverse Primary Disabled</a>These accent colors are used in illustrations and throughout the UI. Each of the UI colors has utility classes you can use to apply the color to different parts of an element. Use the color class for any of these classes, just replace [color] with the name of the color you want.
| Class | +Property | + + +
|---|---|
.pop-bg-[color] |
+ background-color |
+
.pop-color-[color] |
+ color |
+
.pop-border-[color] |
+ border-color |
+
.pop-fill-[color] |
+ fill (Used for SVGs) |
+
.pop-stroke-[color] |
+ stroke (Used for SVGs) |
+
Flexbox is perfect for aligning items inside components. It typically isn't used for large scale layouts but for smaller parts of a page or component. All of the flex box utility classes can be used with our breakpoint suffixes.
+Flexbox is perfect for aligning items inside components. It typically isn't used for large scale layouts but for smaller parts of a page or component. All of the flex box utility classes can be used with our breakpoint suffixes. In some cases, adding an auto margin to a side is needed to align content. In that case, check out auto margins.
.flex-self-start-xs.flex-self-start-flush-xs.flex-self-end-xs.flex-self-end-flush-xs.flex-self-center-xsIn your project directory: bower install leap --save
.m-lr-1-xs margin left + right.m-tb-1-xs margin top + bottom.m-auto-xs horizontal center.m-t-auto-xs margin-top auto.m-b-auto-xs margin-bottom auto.m-l-auto-xs margin-left auto.m-r-auto-xs margin-right autoInitial feedback release
September 6, 2016
.text-color-white class.col-max had margin: 0 auto!important to grid classes.col-max and changed grid width to 1260px to match Treehouse!important to header font sizes.text-0-xs) for use in marketing hero units!important form .col-gutters styles.text-color-white class..col-max had margin: 0 auto.!important to grid classes..col-max and changed grid width to 1260px to match Treehouse.!important to header font sizes..text-0-xs) for use in marketing hero units.!important form .col-gutters styles.Secondary feedback release
September 8, 2016
!important to primary button class!important.col-33-n use 33.3% to round more evenly!important to primary button class.!important..col-33-n use 33.3% to round more evenly.Quick button update
September 13, 2016
Select height update
September 22, 2016
select form elements to match input heightselect form elements to match input height.Select height update for Safari
September 22, 2016
select form elements to match input height in Safariselect elements to 1select form elements to match input height in Safari.select elements to 1.Select height update for Firefox
September 22, 2016
select form elements to match input height in Firefixselect form elements to match input height in Firefox.Inline button style
September 28, 2016
.button--inline to the buttons to make button match from height when they live inline next to text inputs.button--inline to the buttons to make button match from height when they live inline next to text inputs.Form updates
October 31, 2016
select elements so they match text inputs.col-form class that can be chained next to .col-container to change padding within columns to 6pxpadding-right for firefox select inputsselect elements so they match text inputs..col-form class that can be chained next to .col-container to change padding within columns to 6px.padding-right for firefox select inputs.Radio updates
October 31, 2016
Adding VR Topic Color
February 22, 2017
Updating VR variable to full name
February 22, 2017
Adding APIs Topic Color
March 30, 2017
Adding Data Analysis Topic Color
April 12, 2017
Adding Security Topic Color
June 6, 2017
Adding Go Topic Color
June 22, 2017
Adding Quality Assurance Topic Color
August 21, 2017
Added package.json
September 21, 2017
Adding Machine Learning Topic Color
March 15, 2018
Adding Learing Resources Topic Color
May 16, 2018
Adding Topic Categories
July 30, 2018
0.11.0
+Refreshing Brand, Improving Accessibility, and Misc. Enhancements
+July 27, 2020
+Colors
+Typography
+.list-lined option for lists.Buttons
+.button--primary button background..button--primary-teal..button--secondary button from having a transparent background to a white background.Flex Box
+.flex-inline was incorrectly coded..flex-start-flush-#{$suffix}(align-self: start) and .flex-end-flush-#{$suffix} (align-self: end).Forms
+Layout
+m-#{$type}-auto-#{$suffix}.Grid Container
.custom-element
- border-color: $grid-width
+ width: $grid-width
$grid-width
@@ -117,7 +117,7 @@ Spacing
Used in our color utility classes.
+Used in our color utility classes.
Brand Colors
.custom-element
@@ -125,7 +125,11 @@ Colors
brand-color(green)
- brand-color(gray)
+ brand-color(green-dark)
+ brand-color(gray)
+ brand-color(blue-light)
+ brand-color(blue-medium)
+ brand-color(blue-dark)
Text Colors
@@ -153,6 +157,25 @@Pop Colors
+.custom-element
+ background-color: pop-color(golden)
+
+ pop-color(blue-pastel)
+ pop-color(blue)
+ pop-color(blue-dark)
+ pop-color(teal)
+ pop-color(green)
+ pop-color(golden)
+ pop-color(orange)
+ pop-color(red-orange)
+ pop-color(purple-pastel)
+ pop-color(purple)
+ pop-color(magenta)
+
UI Colors
.custom-element
diff --git a/typography.html b/typography.html
index 0487839..1048d15 100644
--- a/typography.html
+++ b/typography.html
@@ -13,19 +13,19 @@
Headers and Text Sizing
Headers are built using typical html elements h1 - h6. To give ourselves a bit more control, we've created utility classes for applying different sizes to the default elements so that we can control markup hierarchy while still applying the sizes we want visually (.text-0-xs, .text-1-xs, .text-2-xs, .text-3-xs, .text-4-xs, .text-5-xs, .text-6-xs). By default, headers have no margin/padding applied to them and are bold.
- h1, .text-0-xs 3rem, 48px
+ h1, .text-0-xs 3.75rem, 60px
Treehouse is an online school that teaches you code
- h1, .text-1-xs 2.25rem, 36px
+ h1, .text-1-xs 3rem, 48px
Treehouse is an online school that teaches you code
- h2, .text-2-xs 1.75rem, 28px
+ h2, .text-2-xs 2.25rem, 36px
Treehouse is an online school that teaches you code
- h3, .text-3-xs 1.25rem, 20px
+ h3, .text-3-xs 1.5rem, 24px
Treehouse is an online school that teaches you code
- h4, .text-4-xs 1.125rem, 18px
+ h4, .text-4-xs 1.25rem, 18px
Treehouse is an online school that teaches you code
h5, .text-5-xs 1rem, 16px
@@ -34,6 +34,9 @@ Headers and Text Sizing
h6, .text-6-xs 0.875rem, 14px
Treehouse is an online school that teaches you code
+ p 1rem, 16px
+ Treehouse is an online school that teaches you code
+
<h1 class="text-0-xs">Treehouse is an online school that teaches you code</h1>
<p class="text-0-xs">Treehouse is an online school that teaches you code</p>
@@ -48,7 +51,7 @@ Headers and Text Sizing
<h5>Treehouse is an online school that teaches you code</h5>
<p class="text-5-xs">Treehouse is an online school that teaches you code</p>
<h6>Treehouse is an online school that teaches you code</h6>
-<p class="text-6-xs">Treehouse is an online school that teaches you code</p>
+<p>Treehouse is an online school that teaches you code</p>
@@ -189,6 +192,16 @@ Lists
+
+ .list-lined
+
+ - List item 1
+ - List item 2
+ - List item 3
+ - List item 4
+
+
+
<ul>
<li>List item 1</li>
@@ -209,6 +222,13 @@ Lists
<li>List item 2 </li>
<li>List item 3</li>
<li>List item 4</li>
+</ul>
+
+<ul class="list-lined">
+<li>List item 1</li>
+<li>List item 2 </li>
+<li>List item 3</li>
+<li>List item 4</li>
</ul>