primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-29 14:14:26 +03:00
Code Issues Projects Releases Wiki Activity

Update colors in docs (#1496)

Browse Source 
* Update padding colors

* Replace more bg colors

* Migrate more colors to v1
This commit is contained in:
simurai 2021-07-13 16:43:11 +09:00 committed by GitHub
parent 009de47667
commit 6ce18838e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 363 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/content/components/avatars.md
View File

@ -210,16 +210,16 @@ Use `AvatarStack--right` to right-align the avatar stack. Remember to switch the
<a class="CircleBadge CircleBadge--small float-left mr-2" href="#small"> <a class="CircleBadge CircleBadge--small float-left mr-2" href="#small">
<img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt=""> <img src="https://github.com/travis-ci.png" class="CircleBadge-icon" alt="">
</a> </a>
<a class="CircleBadge CircleBadge--small bg-yellow" href="#small"> <a class="CircleBadge CircleBadge--small color-bg-warning-inverse" href="#small">
<!-- <%= octicon "zap", class: "CircleBadge-icon text-white" %> --> <!-- <%= octicon "zap", class: "CircleBadge-icon color-text-primary" %> -->
<svg class="CircleBadge-icon text-white octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg> <svg class="CircleBadge-icon color-text-primary octicon octicon-zap" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 7H6l3-7-9 9h4l-3 7 9-9z"></path></svg>
</a> </a>
``` ```
### Medium ### Medium
```html live ```html live
<div class="CircleBadge CircleBadge--medium bg-gray-dark"> <div class="CircleBadge CircleBadge--medium color-bg-tertiary">
<img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" /> <img src="https://github.com/travis-ci.png" alt="Travis CI" class="CircleBadge-icon" />
</div> </div>
``` ```

8
docs/content/components/box.md
View File

@ -472,7 +472,7 @@ A similar approach can be used for buttons with multiple lines of text within a
<div class="Box-row d-flex flex-items-center"> <div class="Box-row d-flex flex-items-center">
<div class="flex-auto"> <div class="flex-auto">
<strong>Row title</strong> <strong>Row title</strong>
<div class="text-small text-gray-light"> <div class="text-small color-text-tertiary">
Description Description
</div> </div>
</div> </div>
@ -481,7 +481,7 @@ A similar approach can be used for buttons with multiple lines of text within a
<div class="Box-row d-flex flex-items-center"> <div class="Box-row d-flex flex-items-center">
<div class="flex-auto"> <div class="flex-auto">
<strong>Row title</strong> <strong>Row title</strong>
<div class="text-small text-gray-light"> <div class="text-small color-text-tertiary">
Description Description
</div> </div>
</div> </div>
@ -490,7 +490,7 @@ A similar approach can be used for buttons with multiple lines of text within a
<div class="Box-row d-flex flex-items-center"> <div class="Box-row d-flex flex-items-center">
<div class="flex-auto"> <div class="flex-auto">
<strong>Row title</strong> <strong>Row title</strong>
<div class="text-small text-gray-light"> <div class="text-small color-text-tertiary">
Description Description
</div> </div>
</div> </div>
@ -510,7 +510,7 @@ Using flexbox along with form, button, and link styles, you can create more comp
Check it Check it
</label> </label>
</form> </form>
<button class="btn-link select-menu-button muted-link"> <button class="btn-link select-menu-button Link--muted">
Select menu Select menu
</button> </button>
</div> </div>

2
docs/content/components/dropdown.md
View File

@ -37,7 +37,7 @@ Using a button customized with additional utilities:
```html live ```html live
<div style="margin-bottom: 100px"> <div style="margin-bottom: 100px">
<details class="dropdown details-reset details-overlay d-inline-block"> <details class="dropdown details-reset details-overlay d-inline-block">
<summary class="text-gray p-2 d-inline" aria-haspopup="true"> <summary class="color-text-secondary p-2 d-inline" aria-haspopup="true">
Dropdown Dropdown
<div class="dropdown-caret"></div> <div class="dropdown-caret"></div>
</summary> </summary>

2
docs/content/components/forms.md
View File

@ -369,7 +369,7 @@ Content that is hidden by default should only be done so if it is non-essential
<span class="form-checkbox-details text-normal"> <span class="form-checkbox-details text-normal">
<span class="d-block mb-1">Available hours per week</span> <span class="d-block mb-1">Available hours per week</span>
<input type="text" name="" class="form-control input-contrast" size="3" /> <input type="text" name="" class="form-control input-contrast" size="3" />
<span class="text-small text-gray pl-2">hours per week</span> <span class="text-small color-text-secondary pl-2">hours per week</span>
</span> </span>
</label> </label>
</div> </div>

16
docs/content/components/labels.md
View File

@ -81,7 +81,7 @@ Issue labels are used for adding labels to issues and pull requests. They also c
<span class="IssueLabel color-bg-info-inverse color-text-white mr-1">Primer</span> <span class="IssueLabel color-bg-info-inverse color-text-white mr-1">Primer</span>
<span class="IssueLabel color-bg-danger-inverse color-text-white mr-1">bug 🐛</span> <span class="IssueLabel color-bg-danger-inverse color-text-white mr-1">bug 🐛</span>
<span class="IssueLabel color-bg-success-inverse color-text-white mr-1">help wanted</span> <span class="IssueLabel color-bg-success-inverse color-text-white mr-1">help wanted</span>
<span class="IssueLabel color-bg-warning-inverse color-text-gray-dark mr-1">🚂 deploy: train</span> <span class="IssueLabel color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
``` ```
If an issue label needs to be bigger, add the `.IssueLabel--big` modifier. If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
@ -90,7 +90,7 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
<span class="IssueLabel IssueLabel--big color-bg-info-inverse color-text-white mr-1">Primer</span> <span class="IssueLabel IssueLabel--big color-bg-info-inverse color-text-white mr-1">Primer</span>
<span class="IssueLabel IssueLabel--big color-bg-danger-inverse color-text-white mr-1">bug 🐛</span> <span class="IssueLabel IssueLabel--big color-bg-danger-inverse color-text-white mr-1">bug 🐛</span>
<span class="IssueLabel IssueLabel--big color-bg-success-inverse color-text-white mr-1">help wanted</span> <span class="IssueLabel IssueLabel--big color-bg-success-inverse color-text-white mr-1">help wanted</span>
<span class="IssueLabel IssueLabel--big color-bg-warning-inverse color-text-gray-dark mr-1">🚂 deploy: train</span> <span class="IssueLabel IssueLabel--big color-bg-warning-inverse color-text-primary mr-1">🚂 deploy: train</span>
``` ```
## States ## States
@ -180,9 +180,9 @@ You can also have icons and emoji in counters. Or use utilities for counters wit
10 10
</span> </span>
<span class="Counter mr-1">👍 2</span> <span class="Counter mr-1">👍 2</span>
<span class="Counter mr-1 bg-green text-white">22</span> <span class="Counter mr-1 color-bg-success-inverse color-text-white">22</span>
<span class="Counter mr-1 bg-red text-white">22</span> <span class="Counter mr-1 color-bg-danger-inverse color-text-white">22</span>
<span class="Counter mr-1 bg-purple text-white">22</span> <span class="Counter mr-1 color-bg-info-inverse color-text-white">22</span>
``` ```
## Diffstat ## Diffstat
@ -196,12 +196,12 @@ Diffstats show how many deletions or additions a diff has. It's typically a row
</span> </span>
``` ```
Use the `text-green` and `text-red` utilities to add additional information about the size of the diff. Use the `color-text-success` and `color-text-danger` utilities to add additional information about the size of the diff.
```html live ```html live
<span class="diffstat"> <span class="diffstat">
<span class="text-green">+7</span> <span class="color-text-success">+7</span>
<span class="text-red">−2</span> <span class="color-text-danger">−2</span>
<span class="tooltipped tooltipped-e" aria-label="9 lines changed"> <span class="tooltipped tooltipped-e" aria-label="9 lines changed">
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span> <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
</span> </span>

2
docs/content/components/loaders.md
View File

@ -21,6 +21,6 @@ It can also be used in combination with other components.
```html live ```html live
<h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2> <h2><span>Loading</span><span class="AnimatedEllipsis"></span></h2>
<span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br> <span class="branch-name mt-2"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<span class="Label bg-blue mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br> <span class="Label mt-3"><span>Loading</span><span class="AnimatedEllipsis"></span></span><br>
<button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button> <button class="btn mt-3" aria-disabled="true"><span>Loading</span><span class="AnimatedEllipsis"></span></button>
``` ```

8
docs/content/components/navigation.md
View File

@ -256,7 +256,7 @@ Different kind of content can be added inside a Side Nav item. Use utility class
</svg> </svg>
</a> </a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url"> <a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a label <span class="Label bg-blue">label</span> With a label <span class="Label">label</span>
</a> </a>
<a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url"> <a class="SideNav-item d-flex flex-items-center flex-justify-between" href="#url">
With a counter <span class="Counter ml-1">16</span> With a counter <span class="Counter ml-1">16</span>
@ -271,8 +271,8 @@ Different kind of content can be added inside a Side Nav item. Use utility class
The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone. The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
```html live ```html live
<aside class="bg-gray-light border p-3" style="max-width: 360px"> <aside class="color-bg-secondary border p-3" style="max-width: 360px">
<h5 class="text-gray mb-2 pb-1 border-bottom">Menu</h5> <h5 class="color-text-secondary mb-2 pb-1 border-bottom">Menu</h5>
<nav class="SideNav"> <nav class="SideNav">
<a class="SideNav-subItem" href="#url">Account</a> <a class="SideNav-subItem" href="#url">Account</a>
<a class="SideNav-subItem" href="#url" aria-current="page">Profile</a> <a class="SideNav-subItem" href="#url" aria-current="page">Profile</a>
@ -296,7 +296,7 @@ Or also appear nested, as a sub navigation. Use margin/padding utility classes t
<svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg> <svg class="octicon octicon-octoface SideNav-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"> <path fill-rule="evenodd" d="M14.7 5.34c.13-.32.55-1.59-.13-3.31 0 0-1.05-.33-3.44 1.3-1-.28-2.07-.32-3.13-.32s-2.13.04-3.13.32c-2.39-1.64-3.44-1.3-3.44-1.3-.68 1.72-.26 2.99-.13 3.31C.49 6.21 0 7.33 0 8.69 0 13.84 3.33 15 7.98 15S16 13.84 16 8.69c0-1.36-.49-2.48-1.3-3.35zM8 14.02c-3.3 0-5.98-.15-5.98-3.35 0-.76.38-1.48 1.02-2.07 1.07-.98 2.9-.46 4.96-.46 2.07 0 3.88-.52 4.96.46.65.59 1.02 1.3 1.02 2.07 0 3.19-2.68 3.35-5.98 3.35zM5.49 9.01c-.66 0-1.2.8-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.54-1.78-1.2-1.78zm5.02 0c-.66 0-1.2.79-1.2 1.78s.54 1.79 1.2 1.79c.66 0 1.2-.8 1.2-1.79s-.53-1.78-1.2-1.78z" /> </svg>
<span>Profile</span> <span>Profile</span>
</a> </a>
<nav class="SideNav bg-white border-top py-3" style="padding-left: 44px"> <nav class="SideNav color-bg-primary border-top py-3" style="padding-left: 44px">
<a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a> <a class="SideNav-subItem" href="#url" aria-current="page">Sub item 1</a>
<a class="SideNav-subItem" href="#url">Sub item 2</a> <a class="SideNav-subItem" href="#url">Sub item 2</a>
<a class="SideNav-subItem" href="#url">Sub item 3</a> <a class="SideNav-subItem" href="#url">Sub item 3</a>

2
docs/content/components/progress.md
View File

@ -39,7 +39,7 @@ Small progress bars are shorter than the default.
For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style: For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:
```html live ```html live
<span class="text-small text-gray mr-2">4 of 16</span> <span class="text-small color-text-secondary mr-2">4 of 16</span>
<span class="Progress d-inline-flex" style="width: 160px"> <span class="Progress d-inline-flex" style="width: 160px">
<span class="Progress-item color-bg-success-inverse" style="width: 25%"></span> <span class="Progress-item color-bg-success-inverse" style="width: 25%"></span>
</span> </span>

8
docs/content/components/select-menu.md
View File

@ -214,9 +214,9 @@ The list of items is arguably the most important subcomponent within the menu. B
<path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" /> <path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z" />
</svg> </svg>
</button> </button>
<button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label bg-blue">label</span></button> <button class="SelectMenu-item d-block" role="menuitem">With a <span class="Label">label</span></button>
<button class="SelectMenu-item" role="menuitem"> <button class="SelectMenu-item" role="menuitem">
With a counter <span class="Counter bg-gray-2 ml-1">16</span> With a counter <span class="Counter ml-1">16</span>
</button> </button>
<button class="SelectMenu-item d-block" role="menuitem"> <button class="SelectMenu-item d-block" role="menuitem">
<h5>With a heading</h5> <h5>With a heading</h5>
@ -457,7 +457,7 @@ A `SelectMenu-message` can be used to show different kind of messages to a user.
</button> </button>
</header> </header>
<div class="SelectMenu-list"> <div class="SelectMenu-list">
<div class="SelectMenu-message bg-red-0 text-red">Message goes here</div> <div class="SelectMenu-message color-bg-danger color-text-danger">Message goes here</div>
<button class="SelectMenu-item" role="menuitem">Item 1</button> <button class="SelectMenu-item" role="menuitem">Item 1</button>
<button class="SelectMenu-item" role="menuitem">Item 2</button> <button class="SelectMenu-item" role="menuitem">Item 2</button>
<button class="SelectMenu-item" role="menuitem">Item 3</button> <button class="SelectMenu-item" role="menuitem">Item 3</button>
@ -567,7 +567,7 @@ Sometimes a select menu needs to communicate a "blank slate" where there's no co
/> />
</svg> </svg>
<h4 class="my-2">No repositories</h4> <h4 class="my-2">No repositories</h4>
<p class="mb-3 text-gray">We didn’t find any matching repositories that you can commit to.</p> <p class="mb-3 color-text-secondary">We didn’t find any matching repositories that you can commit to.</p>
<button type="button" class="btn btn-sm btn-primary">Create a repository</button> <button type="button" class="btn btn-sm btn-primary">Create a repository</button>
</div> </div>
</div> </div>

35
docs/content/components/timeline.md
View File

@ -17,9 +17,9 @@ The `TimelineItem` component is used to display items on a vertical timeline, co
</div> </div>
<div class="TimelineItem-body"> <div class="TimelineItem-body">
<a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one <a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
<a href="#" class="text-bold link-gray-dark">hot potato</a> <a href="#" class="text-bold Link--primary">hot potato</a>
<a href="#" class="link-gray">Just now</a> <a href="#" class="Link--secondary">Just now</a>
</div> </div>
</div> </div>
``` ```
@ -49,7 +49,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
```html live ```html live
<!-- Colorful TimelineItem Badge --> <!-- Colorful TimelineItem Badge -->
<div class="TimelineItem"> <div class="TimelineItem">
<div class="TimelineItem-badge bg-red text-white"> <div class="TimelineItem-badge color-bg-danger-inverse color-text-white">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
</svg> </svg>
@ -59,7 +59,7 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
</div> </div>
</div> </div>
<div class="TimelineItem"> <div class="TimelineItem">
<div class="TimelineItem-badge bg-green text-white"> <div class="TimelineItem-badge color-bg-success-inverse color-text-white">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
</svg> </svg>
@ -68,8 +68,9 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
Green background when opened or passed events occur Green background when opened or passed events occur
</div> </div>
</div> </div>
<div class="TimelineItem"> <!-- TODO: Replace bg-purple in V2
<div class="TimelineItem-badge bg-purple text-white"> <div class="TimelineItem">
<div class="TimelineItem-badge bg-purple color-text-white">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
</svg> </svg>
@ -77,9 +78,9 @@ To have color variants, use the [color utilities](/utilities/colors) on the badg
<div class="TimelineItem-body"> <div class="TimelineItem-body">
Purple background used when pull requests are merged Purple background used when pull requests are merged
</div> </div>
</div> </div> -->
<div class="TimelineItem"> <div class="TimelineItem">
<div class="TimelineItem-badge bg-blue text-white"> <div class="TimelineItem-badge color-bg-info-inverse color-text-white">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
</svg> </svg>
@ -135,9 +136,9 @@ Sometimes you want to give ownership to an event by displaying an [Avatar]() of
</div> </div>
<div class="TimelineItem-body"> <div class="TimelineItem-body">
<a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one <a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
<a href="#" class="text-bold link-gray-dark">hot potato</a> <a href="#" class="text-bold Link--primary">hot potato</a>
<a href="#" class="link-gray">Just now</a> <a href="#" class="Link--secondary">Just now</a>
</div> </div>
</div> </div>
</div> </div>
@ -149,7 +150,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
```html live ```html live
<div class="TimelineItem"> <div class="TimelineItem">
<div class="TimelineItem-badge bg-red text-white"> <div class="TimelineItem-badge color-bg-danger-inverse color-text-white">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
</svg> </svg>
@ -160,7 +161,7 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
</div> </div>
<div class="TimelineItem-break ml-0"></div> <div class="TimelineItem-break ml-0"></div>
<div class="TimelineItem"> <div class="TimelineItem">
<div class="TimelineItem-badge bg-green text-white"> <div class="TimelineItem-badge color-bg-success-inverse color-text-white">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon"> <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" class="octicon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 0 00.35.31c.264.178.683.37 1.285.37.602 0 1.02-.192 1.285-.371a1.82 1.82 0 00.35-.31l.007-.008a.75.75 0 011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.005-.006-.002-.003v-.002h-.001l.613-.432-.614.43a.75.75 0 01.183-1.044z"></path>
</svg> </svg>
@ -181,9 +182,9 @@ To create a visual break in the timeline, use `TimelineItem-break`. This adds a
</a> </a>
<div class="TimelineItem-body"> <div class="TimelineItem-body">
<a href="#" class="text-bold link-gray-dark mr-1">Monalisa</a> created one <a href="#" class="text-bold Link--primary mr-1">Monalisa</a> created one
<a href="#" class="text-bold link-gray-dark">hot potato</a> <a href="#" class="text-bold Link--primary">hot potato</a>
<a href="#1" class="link-gray">Just now</a> <a href="#1" class="Link--secondary">Just now</a>
</div> </div>
</div> </div>
``` ```

22
docs/content/objects/grid.md
View File

@ -90,7 +90,7 @@ Column widths can be used with any other block or inline-block elements to add p
```html live ```html live
<div> <div>
<div class="col-4 float-right p-2 border text-red"> <div class="col-4 float-right p-2 border color-text-danger">
<!-- <%= octicon "heart" %> --> <!-- <%= octicon "heart" %> -->
<svg class="octicon octicon-heart" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"></path></svg> <svg class="octicon octicon-heart" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 2c-.97 0-1.69.42-2.2 1-.51.58-.78.92-.8 1-.02-.08-.28-.42-.8-1-.52-.58-1.17-1-2.2-1-1.632.086-2.954 1.333-3 3 0 .52.09 1.52.67 2.67C1.25 8.82 3.01 10.61 6 13c2.98-2.39 4.77-4.17 5.34-5.33C11.91 6.51 12 5.5 12 5c-.047-1.69-1.342-2.913-3-3z"></path></svg>
<span>Don't go bacon my heart.<span> <span>Don't go bacon my heart.<span>
@ -136,24 +136,24 @@ Use padding utilities to create gutters for more customized layouts.
```html live title="Gutters with padding" ```html live title="Gutters with padding"
<div class="container-lg clearfix"> <div class="container-lg clearfix">
<div class="col-3 float-left pr-2 mb-3"> <div class="col-3 float-left pr-2 mb-3">
<div class="border bg-gray-light">.pr-2</div> <div class="border color-bg-warning">.pr-2</div>
</div> </div>
<div class="col-3 float-left px-2 mb-3"> <div class="col-3 float-left px-2 mb-3">
<div class="border bg-gray-light">.px-2</div> <div class="border color-bg-warning">.px-2</div>
</div> </div>
<div class="col-3 float-left px-2 mb-3"> <div class="col-3 float-left px-2 mb-3">
<div class="border bg-gray-light">.px-2</div> <div class="border color-bg-warning">.px-2</div>
</div> </div>
<div class="col-3 float-left pl-2 mb-3"> <div class="col-3 float-left pl-2 mb-3">
<div class="border bg-gray-light">.pl-2</div> <div class="border color-bg-warning">.pl-2</div>
</div> </div>
</div> </div>
<div class="container-lg clearfix"> <div class="container-lg clearfix">
<div class="col-3 float-left pr-2"> <div class="col-3 float-left pr-2">
<div class="border bg-gray-light">.pr-2</div> <div class="border color-bg-warning">.pr-2</div>
</div> </div>
<div class="col-9 float-left pl-2"> <div class="col-9 float-left pl-2">
<div class="border bg-gray-light">.pl-2</div> <div class="border color-bg-warning">.pl-2</div>
</div> </div>
</div> </div>
``` ```
@ -258,8 +258,8 @@ You can also create an alternative [media object](/utilities/layout#the-media-ob
</div> </div>
<div class="col-10 d-table-cell v-align-middle pl-4"> <div class="col-10 d-table-cell v-align-middle pl-4">
<h1 class="text-normal lh-condensed">GitHub</h1> <h1 class="text-normal lh-condensed">GitHub</h1>
<p class="h4 text-gray text-normal mb-2">How people build software.</p> <p class="h4 color-text-secondary text-normal mb-2">How people build software.</p>
<a class="text-gray text-small" href="#url">https://github.com/about</a> <a class="color-text-secondary text-small" href="#url">https://github.com/about</a>
</div> </div>
</div> </div>
``` ```
@ -297,8 +297,8 @@ This can be useful for keeping columns the same height, justifying content and v
</div> </div>
<div class="col-12 col-md-10 d-flex flex-column flex-justify-center flex-items-center flex-md-items-start pl-md-4"> <div class="col-12 col-md-10 d-flex flex-column flex-justify-center flex-items-center flex-md-items-start pl-md-4">
<h1 class="text-normal lh-condensed">GitHub</h1> <h1 class="text-normal lh-condensed">GitHub</h1>
<p class="h4 text-gray text-normal mb-2">How people build software.</p> <p class="h4 color-text-secondary text-normal mb-2">How people build software.</p>
<a class="text-gray text-small" href="#url">https://github.com/about</a> <a class="color-text-secondary text-small" href="#url">https://github.com/about</a>
</div> </div>
</div> </div>
``` ```

8
docs/content/stickersheet/index.md
View File

@ -27,8 +27,8 @@ path: stickersheet/
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span> <span class="mr-2 IssueLabel color-bg-info-inverse color-text-white">IssueLabel</span>
<span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span> <span class="mr-2 IssueLabel IssueLabel--big color-bg-info-inverse color-text-white">IssueLabel</span>
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
@ -126,8 +126,8 @@ path: stickersheet/
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="mr-2 IssueLabel bg-pink text-white">IssueLabel</span> <span class="mr-2 IssueLabel color-bg-info-inverse color-text-white">IssueLabel</span>
<span class="mr-2 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span> <span class="mr-2 IssueLabel IssueLabel--big color-bg-info-inverse color-text-white">IssueLabel</span>
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->

14
docs/content/stickersheet/labels.md
View File

@ -44,14 +44,14 @@ The base <span class="Label Label--inline"> label </span> component styles the t
<hr class="my-4"><!-- Divider ------------------------ --> <hr class="my-4"><!-- Divider ------------------------ -->
<span class="IssueLabel bg-blue text-white mr-2">Primer</span> <span class="IssueLabel color-bg-info-inverse color-text-white mr-2">Primer</span>
<span class="IssueLabel mr-2" style="background-color: #e5bffc;"> <span class="IssueLabel mr-2" style="background-color: #e5bffc;">
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a> <a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
</span> </span>
<div class="my-3"></div><!-- Spacer ------------------------ --> <div class="my-3"></div><!-- Spacer ------------------------ -->
<span class="IssueLabel IssueLabel--big bg-blue text-white mr-2">Primer</span> <span class="IssueLabel IssueLabel--big color-bg-info-inverse color-text-white mr-2">Primer</span>
<span class="IssueLabel IssueLabel--big mr-2" style="background-color: #e5bffc;"> <span class="IssueLabel IssueLabel--big mr-2" style="background-color: #e5bffc;">
<a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a> <a class="" href="/primer/css/labels/%F0%9F%90%BB%20Next" style="color: #000000;"><g-emoji class="g-emoji" alias="bear" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f43b.png">🐻</g-emoji> Next</a>
</span> </span>
@ -112,9 +112,9 @@ The base <span class="Label Label--inline"> label </span> component styles the t
10 10
</span> </span>
<span class="Counter mr-1">👍 2</span> <span class="Counter mr-1">👍 2</span>
<span class="Counter mr-1 bg-green text-white">22</span> <span class="Counter mr-1 color-bg-danger-inverse color-text-white">22</span>
<span class="Counter mr-1 bg-red text-white">22</span> <span class="Counter mr-1 color-bg-success-inverse color-text-white">22</span>
<span class="Counter mr-1 bg-purple text-white">22</span> <span class="Counter mr-1 color-bg-info-inverse color-text-white">22</span>
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
@ -140,8 +140,8 @@ The base <span class="Label Label--inline"> label </span> component styles the t
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="diffstat"> <span class="diffstat">
<span class="text-green">+7</span> <span class="color-text-success">+7</span>
<span class="text-red">−2</span> <span class="color-text-danger">−2</span>
<span class="tooltipped tooltipped-e" aria-label="9 lines changed"> <span class="tooltipped tooltipped-e" aria-label="9 lines changed">
<span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span> <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
</span> </span>

20
docs/content/stickersheet/sizes.md
View File

@ -7,7 +7,7 @@ path: stickersheet/sizes
```html live ```html live
<span class="d-inline-block col-1 text-gray-light">16px</span> <span class="d-inline-block col-1 color-text-tertiary">16px</span>
<img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" /> <img class="mr-3 avatar avatar-1" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<!-- <%= octicon "comment" %> --> <!-- <%= octicon "comment" %> -->
<svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg> <svg class="octicon octicon-comment" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 2.5C2.6837 2.5 2.62011 2.52634 2.57322 2.57322C2.52634 2.62011 2.5 2.6837 2.5 2.75V10.25C2.5 10.388 2.612 10.5 2.75 10.5H4.75C4.94891 10.5 5.13968 10.579 5.28033 10.7197C5.42098 10.8603 5.5 11.0511 5.5 11.25V13.44L8.22 10.72C8.36052 10.5793 8.55115 10.5002 8.75 10.5H13.25C13.3163 10.5 13.3799 10.4737 13.4268 10.4268C13.4737 10.3799 13.5 10.3163 13.5 10.25V2.75C13.5 2.6837 13.4737 2.62011 13.4268 2.57322C13.3799 2.52634 13.3163 2.5 13.25 2.5H2.75ZM1 2.75C1 1.784 1.784 1 2.75 1H13.25C14.216 1 15 1.784 15 2.75V10.25C15 10.7141 14.8156 11.1592 14.4874 11.4874C14.1592 11.8156 13.7141 12 13.25 12H9.06L6.487 14.573C6.28324 14.7767 6.02367 14.9153 5.74111 14.9715C5.45854 15.0277 5.16567 14.9988 4.8995 14.8886C4.63333 14.7784 4.40581 14.5917 4.24571 14.3522C4.08561 14.1127 4.0001 13.8311 4 13.543V12H2.75C2.28587 12 1.84075 11.8156 1.51256 11.4874C1.18437 11.1592 1 10.7141 1 10.25V2.75Z"></path></svg>
@ -15,25 +15,25 @@ path: stickersheet/sizes
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 text-gray-light">20px</span> <span class="d-inline-block col-1 color-text-tertiary">20px</span>
<img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" /> <img class="mr-3 avatar avatar-2" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<span class="mr-3 Label">Label</span> <span class="mr-3 Label">Label</span>
<span class="mr-3 IssueLabel bg-pink text-white">IssueLabel</span> <span class="mr-3 IssueLabel color-bg-info-inverse color-text-white">IssueLabel</span>
<span class="mr-3 Counter">1.5K</span> <span class="mr-3 Counter">1.5K</span>
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 text-gray-light">24px</span> <span class="d-inline-block col-1 color-text-tertiary">24px</span>
<img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" /> <img class="mr-3 avatar avatar-3" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<span class="mr-3 Label Label--large">Label</span> <span class="mr-3 Label Label--large">Label</span>
<span class="mr-3 IssueLabel IssueLabel--big bg-purple text-white">IssueLabel</span> <span class="mr-3 IssueLabel IssueLabel--big color-bg-info-inverse color-text-white">IssueLabel</span>
<span class="mr-3 State State--small">State</span> <span class="mr-3 State State--small">State</span>
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 text-gray-light">28px</span> <span class="d-inline-block col-1 color-text-tertiary">28px</span>
<img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" /> <img class="mr-3 avatar avatar-4" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<button class="mr-3 btn btn-sm" type="button">Button</button> <button class="mr-3 btn btn-sm" type="button">Button</button>
<input class="mr-3 form-control input-sm" type="text" placeholder="Input" /> <input class="mr-3 form-control input-sm" type="text" placeholder="Input" />
@ -41,7 +41,7 @@ path: stickersheet/sizes
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 text-gray-light">32px</span> <span class="d-inline-block col-1 color-text-tertiary">32px</span>
<img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" /> <img class="mr-3 avatar avatar-5" src="https://avatars.githubusercontent.com/jonrohan?s=64" />
<button class="mr-3 btn" type="button">Button</button> <button class="mr-3 btn" type="button">Button</button>
<input class="mr-3 form-control" type="text" placeholder="Input" /> <input class="mr-3 form-control" type="text" placeholder="Input" />
@ -54,7 +54,7 @@ path: stickersheet/sizes
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 text-gray-light">40px</span> <span class="d-inline-block col-1 color-text-tertiary">40px</span>
<img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" /> <img class="mr-3 avatar avatar-6" src="https://avatars.githubusercontent.com/jonrohan?s=80" />
<div class="mr-3 tabnav d-inline-block v-align-middle mb-0"> <div class="mr-3 tabnav d-inline-block v-align-middle mb-0">
<nav class="tabnav-tabs"> <nav class="tabnav-tabs">
@ -67,7 +67,7 @@ path: stickersheet/sizes
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 text-gray-light">48px</span> <span class="d-inline-block col-1 color-text-tertiary">48px</span>
<img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" /> <img class="mr-3 avatar avatar-7" src="https://avatars.githubusercontent.com/jonrohan?s=96" />
<nav class="mr-3 UnderlineNav d-inline-block v-align-middle"> <nav class="mr-3 UnderlineNav d-inline-block v-align-middle">
<div class="UnderlineNav-body"> <div class="UnderlineNav-body">
@ -80,7 +80,7 @@ path: stickersheet/sizes
<div class="my-4"></div><!-- Spacer ------------------------ --> <div class="my-4"></div><!-- Spacer ------------------------ -->
<span class="d-inline-block col-1 text-gray-light">64px</span> <span class="d-inline-block col-1 color-text-tertiary">64px</span>
<img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" /> <img class="mr-3 avatar avatar-8" src="https://avatars.githubusercontent.com/jonrohan?s=128" />
<div class="mr-3 Header d-inline-block v-align-middle"> <div class="mr-3 Header d-inline-block v-align-middle">
<div class="Header-item"> <div class="Header-item">

4
docs/content/utilities/animations.md
View File

@ -64,7 +64,7 @@ The `.anim-fade-down` class is used to slide an element down hiding it. You shou
The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly. The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
```html live ```html live
<div class="anim-scale-in bg-gray-dark text-white p-2"> <div class="anim-scale-in color-bg-info-inverse color-text-white p-2">
<!-- <%= octicon("mark-github", :height => 32) %> --> <!-- <%= octicon("mark-github", :height => 32) %> -->
<svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> <svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
</div> </div>
@ -75,7 +75,7 @@ The `.anim-scale-in` class will scale the element in. This is useful on menus wh
The `.anim-grow-x` class will grow an element width from 0-:100: real quick. The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
```html live ```html live
<div class="anim-grow-x py-2 bg-green"></div> <div class="anim-grow-x py-2 color-bg-success-inverse"></div>
``` ```
## Pulse ## Pulse

10
docs/content/utilities/box-shadow.md
View File

@ -32,7 +32,7 @@ These types of shadows are typically applied to elements with borders, such as t
<h3 class="m-0">Organization</h3> <h3 class="m-0">Organization</h3>
</div> </div>
<div class="Box-row"> <div class="Box-row">
<p class="mb-0 text-gray"> <p class="mb-0 color-text-secondary">
Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled Taxidermy live-edge mixtape, keytar tumeric locavore meh selvage deep v letterpress vexillologist lo-fi tousled
church-key thundercats. Brooklyn bicycle rights tousled, marfa actually. church-key thundercats. Brooklyn bicycle rights tousled, marfa actually.
</p> </p>
@ -61,12 +61,12 @@ Medium box shadows are typically used on editorialized content that needs to app
```html live ```html live
<div class="col-6"> <div class="col-6">
<a class="d-block color-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#"> <a class="d-block color-shadow-medium px-3 pt-4 pb-6 position-relative rounded-1 overflow-hidden no-underline" href="#">
<div class="bg-blue position-absolute top-0 left-0 py-1 width-full"></div> <div class="position-absolute top-0 left-0 py-1 width-full"></div>
<h3 class="text-gray-dark">Serverless architecture</h3> <h3 class="color-text-primary">Serverless architecture</h3>
<p class="text-gray"> <p class="color-text-secondary">
Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks. Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
</p> </p>
<ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none "> <ul class="position-absolute bottom-0 pb-3 text-small color-text-secondary list-style-none ">
<li class="d-inline-block mr-1"> <li class="d-inline-block mr-1">
<!-- <%= octicon "repo", :class => "mr-1" %> --> <!-- <%= octicon "repo", :class => "mr-1" %> -->
<svg class="octicon octicon-repo mr-1" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg> <svg class="octicon octicon-repo mr-1" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>

390
docs/content/utilities/flexbox.md
View File

@ -40,9 +40,9 @@ Use these classes to make an element lay out its content using the flexbox model
```html live ```html live
<!-- flex container --> <!-- flex container -->
<div class="border d-flex"> <div class="border d-flex">
<div class="p-5 border bg-gray-light">flex item 1</div> <div class="p-5 border color-bg-secondary">flex item 1</div>
<div class="p-5 border bg-gray-light">flex item 2</div> <div class="p-5 border color-bg-secondary">flex item 2</div>
<div class="p-5 border bg-gray-light">flex item 3</div> <div class="p-5 border color-bg-secondary">flex item 3</div>
</div> </div>
``` ```
@ -51,9 +51,9 @@ Use these classes to make an element lay out its content using the flexbox model
```html live ```html live
<!-- inline-flex container --> <!-- inline-flex container -->
<div class="border d-inline-flex"> <div class="border d-inline-flex">
<div class="p-5 border bg-gray-light">flex item 1</div> <div class="p-5 border color-bg-secondary">flex item 1</div>
<div class="p-5 border bg-gray-light">flex item 2</div> <div class="p-5 border color-bg-secondary">flex item 2</div>
<div class="p-5 border bg-gray-light">flex item 3</div> <div class="p-5 border color-bg-secondary">flex item 3</div>
</div> </div>
``` ```
@ -83,9 +83,9 @@ Use these classes to define the orientation of the main axis (`row` or `column`)
```html live ```html live
<div class="border d-flex flex-column"> <div class="border d-flex flex-column">
<div class="p-5 border bg-gray-light">Item 1</div> <div class="p-5 border color-bg-secondary">Item 1</div>
<div class="p-5 border bg-gray-light">Item 2</div> <div class="p-5 border color-bg-secondary">Item 2</div>
<div class="p-5 border bg-gray-light">Item 3</div> <div class="p-5 border color-bg-secondary">Item 3</div>
</div> </div>
``` ```
@ -95,9 +95,9 @@ This example uses the responsive variant `.flex-sm-column-reverse` to override `
```html live ```html live
<div class="border d-flex flex-column flex-sm-column-reverse"> <div class="border d-flex flex-column flex-sm-column-reverse">
<div class="p-5 border bg-gray-light">Item 1</div> <div class="p-5 border color-bg-secondary">Item 1</div>
<div class="p-5 border bg-gray-light">Item 2</div> <div class="p-5 border color-bg-secondary">Item 2</div>
<div class="p-5 border bg-gray-light">Item 3</div> <div class="p-5 border color-bg-secondary">Item 3</div>
</div> </div>
``` ```
@ -107,9 +107,9 @@ This example uses the responsive variant `.flex-sm-row` to override `.flex-colum
```html live ```html live
<div class="border d-flex flex-column flex-sm-row"> <div class="border d-flex flex-column flex-sm-row">
<div class="p-5 border bg-gray-light">Item 1</div> <div class="p-5 border color-bg-secondary">Item 1</div>
<div class="p-5 border bg-gray-light">Item 2</div> <div class="p-5 border color-bg-secondary">Item 2</div>
<div class="p-5 border bg-gray-light">Item 3</div> <div class="p-5 border color-bg-secondary">Item 3</div>
</div> </div>
``` ```
@ -119,9 +119,9 @@ This example uses the responsive variant `.flex-sm-row-reverse` to override `.fl
```html live ```html live
<div class="border d-flex flex-column flex-sm-row-reverse"> <div class="border d-flex flex-column flex-sm-row-reverse">
<div class="p-5 border bg-gray-light">Item 1</div> <div class="p-5 border color-bg-secondary">Item 1</div>
<div class="p-5 border bg-gray-light">Item 2</div> <div class="p-5 border color-bg-secondary">Item 2</div>
<div class="p-5 border bg-gray-light">Item 3</div> <div class="p-5 border color-bg-secondary">Item 3</div>
</div> </div>
``` ```
@ -149,15 +149,15 @@ You can choose whether flex items are forced into a single line or wrapped onto
```html live ```html live
<div class="border d-flex flex-wrap"> <div class="border d-flex flex-wrap">
<div class="p-5 px-6 border bg-gray-light">1</div> <div class="p-5 px-6 border color-bg-secondary">1</div>
<div class="p-5 px-6 border bg-gray-light">2</div> <div class="p-5 px-6 border color-bg-secondary">2</div>
<div class="p-5 px-6 border bg-gray-light">3</div> <div class="p-5 px-6 border color-bg-secondary">3</div>
<div class="p-5 px-6 border bg-gray-light">4</div> <div class="p-5 px-6 border color-bg-secondary">4</div>
<div class="p-5 px-6 border bg-gray-light">5</div> <div class="p-5 px-6 border color-bg-secondary">5</div>
<div class="p-5 px-6 border bg-gray-light">6</div> <div class="p-5 px-6 border color-bg-secondary">6</div>
<div class="p-5 px-6 border bg-gray-light">7</div> <div class="p-5 px-6 border color-bg-secondary">7</div>
<div class="p-5 px-6 border bg-gray-light">8</div> <div class="p-5 px-6 border color-bg-secondary">8</div>
<div class="p-5 px-6 border bg-gray-light">9</div> <div class="p-5 px-6 border color-bg-secondary">9</div>
</div> </div>
``` ```
@ -165,15 +165,15 @@ You can choose whether flex items are forced into a single line or wrapped onto
```html live ```html live
<div class="border d-flex flex-nowrap"> <div class="border d-flex flex-nowrap">
<div class="p-5 px-6 border bg-gray-light">1</div> <div class="p-5 px-6 border color-bg-secondary">1</div>
<div class="p-5 px-6 border bg-gray-light">2</div> <div class="p-5 px-6 border color-bg-secondary">2</div>
<div class="p-5 px-6 border bg-gray-light">3</div> <div class="p-5 px-6 border color-bg-secondary">3</div>
<div class="p-5 px-6 border bg-gray-light">4</div> <div class="p-5 px-6 border color-bg-secondary">4</div>
<div class="p-5 px-6 border bg-gray-light">5</div> <div class="p-5 px-6 border color-bg-secondary">5</div>
<div class="p-5 px-6 border bg-gray-light">6</div> <div class="p-5 px-6 border color-bg-secondary">6</div>
<div class="p-5 px-6 border bg-gray-light">7</div> <div class="p-5 px-6 border color-bg-secondary">7</div>
<div class="p-5 px-6 border bg-gray-light">8</div> <div class="p-5 px-6 border color-bg-secondary">8</div>
<div class="p-5 px-6 border bg-gray-light">9</div> <div class="p-5 px-6 border color-bg-secondary">9</div>
</div> </div>
``` ```
@ -181,15 +181,15 @@ You can choose whether flex items are forced into a single line or wrapped onto
```html live ```html live
<div class="border d-flex flex-wrap-reverse"> <div class="border d-flex flex-wrap-reverse">
<div class="p-5 px-6 border bg-gray-light">1</div> <div class="p-5 px-6 border color-bg-secondary">1</div>
<div class="p-5 px-6 border bg-gray-light">2</div> <div class="p-5 px-6 border color-bg-secondary">2</div>
<div class="p-5 px-6 border bg-gray-light">3</div> <div class="p-5 px-6 border color-bg-secondary">3</div>
<div class="p-5 px-6 border bg-gray-light">4</div> <div class="p-5 px-6 border color-bg-secondary">4</div>
<div class="p-5 px-6 border bg-gray-light">5</div> <div class="p-5 px-6 border color-bg-secondary">5</div>
<div class="p-5 px-6 border bg-gray-light">6</div> <div class="p-5 px-6 border color-bg-secondary">6</div>
<div class="p-5 px-6 border bg-gray-light">7</div> <div class="p-5 px-6 border color-bg-secondary">7</div>
<div class="p-5 px-6 border bg-gray-light">8</div> <div class="p-5 px-6 border color-bg-secondary">8</div>
<div class="p-5 px-6 border bg-gray-light">9</div> <div class="p-5 px-6 border color-bg-secondary">9</div>
</div> </div>
``` ```
@ -223,9 +223,9 @@ Use `.flex-justify-start` to align items to the start line. By default this will
```html live ```html live
<div class="border d-flex flex-justify-start"> <div class="border d-flex flex-justify-start">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
</div> </div>
``` ```
@ -235,9 +235,9 @@ Use `.flex-justify-end` to align items to the end line. By default this will be
```html live ```html live
<div class="border d-flex flex-justify-end"> <div class="border d-flex flex-justify-end">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
</div> </div>
``` ```
@ -247,9 +247,9 @@ Use `.flex-justify-center` to align items in the middle of the container.
```html live ```html live
<div class="border d-flex flex-justify-center"> <div class="border d-flex flex-justify-center">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
</div> </div>
``` ```
@ -259,9 +259,9 @@ Use `.flex-justify-between` to distribute items evenly in the container. The fir
```html live ```html live
<div class="border d-flex flex-justify-between"> <div class="border d-flex flex-justify-between">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
</div> </div>
``` ```
@ -271,9 +271,9 @@ Use `.flex-justify-around` to distribute items evenly, with an equal amount of s
```html live ```html live
<div class="border d-flex flex-justify-around"> <div class="border d-flex flex-justify-around">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
</div> </div>
``` ```
@ -307,10 +307,10 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-start"> <div style="min-height: 150px;" class="border d-flex flex-items-start">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
</div> </div>
``` ```
@ -318,10 +318,10 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-end"> <div style="min-height: 150px;" class="border d-flex flex-items-end">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
</div> </div>
``` ```
@ -329,10 +329,10 @@ The cross axis runs perpendicular to the main axis. By default the main axis run
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-center"> <div style="min-height: 150px;" class="border d-flex flex-items-center">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
</div> </div>
``` ```
@ -342,10 +342,10 @@ With `.flex-items-baseline`, items will be aligned along their baselines even if
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-baseline"> <div style="min-height: 150px;" class="border d-flex flex-items-baseline">
<div class="p-5 border bg-gray-light f1">1</div> <div class="p-5 border color-bg-secondary f1">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light f3">3</div> <div class="p-5 border color-bg-secondary f3">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
</div> </div>
``` ```
@ -353,10 +353,10 @@ With `.flex-items-baseline`, items will be aligned along their baselines even if
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-stretch"> <div style="min-height: 150px;" class="border d-flex flex-items-stretch">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
</div> </div>
``` ```
@ -390,18 +390,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
```html live ```html live
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-start"> <div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-start">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
<div class="p-5 border bg-gray-light">5</div> <div class="p-5 border color-bg-secondary">5</div>
<div class="p-5 border bg-gray-light">6</div> <div class="p-5 border color-bg-secondary">6</div>
<div class="p-5 border bg-gray-light">7</div> <div class="p-5 border color-bg-secondary">7</div>
<div class="p-5 border bg-gray-light">8</div> <div class="p-5 border color-bg-secondary">8</div>
<div class="p-5 border bg-gray-light">9</div> <div class="p-5 border color-bg-secondary">9</div>
<div class="p-5 border bg-gray-light">10</div> <div class="p-5 border color-bg-secondary">10</div>
<div class="p-5 border bg-gray-light">11</div> <div class="p-5 border color-bg-secondary">11</div>
<div class="p-5 border bg-gray-light">12</div> <div class="p-5 border color-bg-secondary">12</div>
</div> </div>
``` ```
@ -409,18 +409,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
```html live ```html live
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-end"> <div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-end">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
<div class="p-5 border bg-gray-light">5</div> <div class="p-5 border color-bg-secondary">5</div>
<div class="p-5 border bg-gray-light">6</div> <div class="p-5 border color-bg-secondary">6</div>
<div class="p-5 border bg-gray-light">7</div> <div class="p-5 border color-bg-secondary">7</div>
<div class="p-5 border bg-gray-light">8</div> <div class="p-5 border color-bg-secondary">8</div>
<div class="p-5 border bg-gray-light">9</div> <div class="p-5 border color-bg-secondary">9</div>
<div class="p-5 border bg-gray-light">10</div> <div class="p-5 border color-bg-secondary">10</div>
<div class="p-5 border bg-gray-light">11</div> <div class="p-5 border color-bg-secondary">11</div>
<div class="p-5 border bg-gray-light">12</div> <div class="p-5 border color-bg-secondary">12</div>
</div> </div>
``` ```
@ -428,18 +428,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
```html live ```html live
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-center"> <div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-center">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
<div class="p-5 border bg-gray-light">5</div> <div class="p-5 border color-bg-secondary">5</div>
<div class="p-5 border bg-gray-light">6</div> <div class="p-5 border color-bg-secondary">6</div>
<div class="p-5 border bg-gray-light">7</div> <div class="p-5 border color-bg-secondary">7</div>
<div class="p-5 border bg-gray-light">8</div> <div class="p-5 border color-bg-secondary">8</div>
<div class="p-5 border bg-gray-light">9</div> <div class="p-5 border color-bg-secondary">9</div>
<div class="p-5 border bg-gray-light">10</div> <div class="p-5 border color-bg-secondary">10</div>
<div class="p-5 border bg-gray-light">11</div> <div class="p-5 border color-bg-secondary">11</div>
<div class="p-5 border bg-gray-light">12</div> <div class="p-5 border color-bg-secondary">12</div>
</div> </div>
``` ```
@ -447,18 +447,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
```html live ```html live
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-between"> <div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-between">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
<div class="p-5 border bg-gray-light">5</div> <div class="p-5 border color-bg-secondary">5</div>
<div class="p-5 border bg-gray-light">6</div> <div class="p-5 border color-bg-secondary">6</div>
<div class="p-5 border bg-gray-light">7</div> <div class="p-5 border color-bg-secondary">7</div>
<div class="p-5 border bg-gray-light">8</div> <div class="p-5 border color-bg-secondary">8</div>
<div class="p-5 border bg-gray-light">9</div> <div class="p-5 border color-bg-secondary">9</div>
<div class="p-5 border bg-gray-light">10</div> <div class="p-5 border color-bg-secondary">10</div>
<div class="p-5 border bg-gray-light">11</div> <div class="p-5 border color-bg-secondary">11</div>
<div class="p-5 border bg-gray-light">12</div> <div class="p-5 border color-bg-secondary">12</div>
</div> </div>
``` ```
@ -466,18 +466,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
```html live ```html live
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-around"> <div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-around">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
<div class="p-5 border bg-gray-light">5</div> <div class="p-5 border color-bg-secondary">5</div>
<div class="p-5 border bg-gray-light">6</div> <div class="p-5 border color-bg-secondary">6</div>
<div class="p-5 border bg-gray-light">7</div> <div class="p-5 border color-bg-secondary">7</div>
<div class="p-5 border bg-gray-light">8</div> <div class="p-5 border color-bg-secondary">8</div>
<div class="p-5 border bg-gray-light">9</div> <div class="p-5 border color-bg-secondary">9</div>
<div class="p-5 border bg-gray-light">10</div> <div class="p-5 border color-bg-secondary">10</div>
<div class="p-5 border bg-gray-light">11</div> <div class="p-5 border color-bg-secondary">11</div>
<div class="p-5 border bg-gray-light">12</div> <div class="p-5 border color-bg-secondary">12</div>
</div> </div>
``` ```
@ -485,18 +485,18 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s
```html live ```html live
<div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-stretch"> <div style="min-height: 300px;" class="border d-flex flex-wrap flex-content-stretch">
<div class="p-5 border bg-gray-light">1</div> <div class="p-5 border color-bg-secondary">1</div>
<div class="p-5 border bg-gray-light">2</div> <div class="p-5 border color-bg-secondary">2</div>
<div class="p-5 border bg-gray-light">3</div> <div class="p-5 border color-bg-secondary">3</div>
<div class="p-5 border bg-gray-light">4</div> <div class="p-5 border color-bg-secondary">4</div>
<div class="p-5 border bg-gray-light">5</div> <div class="p-5 border color-bg-secondary">5</div>
<div class="p-5 border bg-gray-light">6</div> <div class="p-5 border color-bg-secondary">6</div>
<div class="p-5 border bg-gray-light">7</div> <div class="p-5 border color-bg-secondary">7</div>
<div class="p-5 border bg-gray-light">8</div> <div class="p-5 border color-bg-secondary">8</div>
<div class="p-5 border bg-gray-light">9</div> <div class="p-5 border color-bg-secondary">9</div>
<div class="p-5 border bg-gray-light">10</div> <div class="p-5 border color-bg-secondary">10</div>
<div class="p-5 border bg-gray-light">11</div> <div class="p-5 border color-bg-secondary">11</div>
<div class="p-5 border bg-gray-light">12</div> <div class="p-5 border color-bg-secondary">12</div>
</div> </div>
``` ```
@ -524,9 +524,9 @@ Adding `.flex-1` makes the item grow in size to take up all the space that is av
```html live ```html live
<div class="border d-flex"> <div class="border d-flex">
<div class="p-5 border bg-gray-light">flex item</div> <div class="p-5 border color-bg-secondary">flex item</div>
<div class="p-5 border bg-gray-light flex-1">.flex-1</div> <div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
<div class="p-5 border bg-gray-light">flex item</div> <div class="p-5 border color-bg-secondary">flex item</div>
</div> </div>
``` ```
@ -534,9 +534,9 @@ Adding `.flex-1` to all flex items results in each item having the same size.
```html live ```html live
<div class="border d-flex"> <div class="border d-flex">
<div class="p-5 border bg-gray-light flex-1">.flex-1</div> <div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
<div class="p-5 border bg-gray-light flex-1">.flex-1</div> <div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
<div class="p-5 border bg-gray-light flex-1">.flex-1</div> <div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
</div> </div>
``` ```
@ -546,9 +546,9 @@ Using `.flex-auto` fills the available space but also takes the size of the cont
```html live ```html live
<div class="border d-flex"> <div class="border d-flex">
<div class="p-5 border bg-gray-light flex-1">.flex-1</div> <div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
<div class="p-5 border bg-gray-light flex-auto">.flex-auto with a bit more text</div> <div class="p-5 border color-bg-secondary flex-auto">.flex-auto with a bit more text</div>
<div class="p-5 border bg-gray-light flex-1">.flex-1</div> <div class="p-5 border color-bg-secondary flex-1">.flex-1</div>
</div> </div>
``` ```
@ -558,9 +558,9 @@ Add `.flex-grow-0` to prevent an item from growing. This can be useful when used
```html live ```html live
<div class="border d-flex"> <div class="border d-flex">
<div class="p-5 border bg-gray-light">flex item</div> <div class="p-5 border color-bg-secondary">flex item</div>
<div class="p-5 border bg-gray-light flex-auto flex-sm-grow-0">.flex-auto .flex-sm-grow-0</div> <div class="p-5 border color-bg-secondary flex-auto flex-sm-grow-0">.flex-auto .flex-sm-grow-0</div>
<div class="p-5 border bg-gray-light">flex item</div> <div class="p-5 border color-bg-secondary">flex item</div>
</div> </div>
``` ```
@ -570,9 +570,9 @@ Add `.flex-shrink-0` to prevent an item from shrinking. Note that for example te
```html live ```html live
<div class="p-2 border d-flex" style="max-width: 340px"> <div class="p-2 border d-flex" style="max-width: 340px">
<div class="p-5 border bg-gray-light">flex item</div> <div class="p-5 border color-bg-secondary">flex item</div>
<div class="p-5 border bg-gray-light flex-shrink-0">.flex-shrink-0</div> <div class="p-5 border color-bg-secondary flex-shrink-0">.flex-shrink-0</div>
<div class="p-5 border bg-gray-light">flex item</div> <div class="p-5 border color-bg-secondary">flex item</div>
</div> </div>
``` ```
@ -606,9 +606,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
```html live ```html live
<div style="min-height: 150px;" class="border d-flex"> <div style="min-height: 150px;" class="border d-flex">
<div class="p-5 border bg-gray-light flex-self-auto">.flex-self-auto</div> <div class="p-5 border color-bg-secondary flex-self-auto">.flex-self-auto</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
</div> </div>
``` ```
@ -616,9 +616,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
```html live ```html live
<div style="min-height: 150px;" class="border d-flex"> <div style="min-height: 150px;" class="border d-flex">
<div class="p-5 border bg-gray-light flex-self-start">.flex-self-start</div> <div class="p-5 border color-bg-secondary flex-self-start">.flex-self-start</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
</div> </div>
``` ```
@ -626,9 +626,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
```html live ```html live
<div style="min-height: 150px;" class="border d-flex"> <div style="min-height: 150px;" class="border d-flex">
<div class="p-5 border bg-gray-light flex-self-end">.flex-self-end</div> <div class="p-5 border color-bg-secondary flex-self-end">.flex-self-end</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
</div> </div>
``` ```
@ -636,9 +636,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
```html live ```html live
<div style="min-height: 150px;" class="border d-flex"> <div style="min-height: 150px;" class="border d-flex">
<div class="p-5 border bg-gray-light flex-self-center">.flex-self-center</div> <div class="p-5 border color-bg-secondary flex-self-center">.flex-self-center</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
</div> </div>
``` ```
@ -646,9 +646,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-end"> <div style="min-height: 150px;" class="border d-flex flex-items-end">
<div class="p-5 border bg-gray-light flex-self-baseline f4">.flex-self-baseline</div> <div class="p-5 border color-bg-secondary flex-self-baseline f4">.flex-self-baseline</div>
<div class="p-5 border bg-gray-light f1">item</div> <div class="p-5 border color-bg-secondary f1">item</div>
<div class="p-5 border bg-gray-light f00">item</div> <div class="p-5 border color-bg-secondary f00">item</div>
</div> </div>
``` ```
@ -656,9 +656,9 @@ Use these classes to adjust the alignment of an individual flex item on the cros
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-start"> <div style="min-height: 150px;" class="border d-flex flex-items-start">
<div class="p-5 border bg-gray-light flex-self-stretch">.flex-self-stretch</div> <div class="p-5 border color-bg-secondary flex-self-stretch">.flex-self-stretch</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
</div> </div>
``` ```
@ -687,9 +687,9 @@ Use these classes to change the order of flex items. Keep in mind that it won't
```html live ```html live
<div class="border d-flex"> <div class="border d-flex">
<div class="p-5 border bg-gray-light flex-order-2">1. .flex-order-2</div> <div class="p-5 border color-bg-secondary flex-order-2">1. .flex-order-2</div>
<div class="p-5 border bg-gray-light">2.</div> <div class="p-5 border color-bg-secondary">2.</div>
<div class="p-5 border bg-gray-light flex-order-1">3. .flex-order-1</div> <div class="p-5 border color-bg-secondary flex-order-1">3. .flex-order-1</div>
</div> </div>
``` ```
@ -699,9 +699,9 @@ Resize window to see the effect.
```html live ```html live
<div class="border d-flex"> <div class="border d-flex">
<div class="p-5 border bg-gray-light flex-order-1 flex-sm-order-none">1. .flex-order-1 .flex-sm-order-none</div> <div class="p-5 border color-bg-secondary flex-order-1 flex-sm-order-none">1. .flex-order-1 .flex-sm-order-none</div>
<div class="p-5 border bg-gray-light">2.</div> <div class="p-5 border color-bg-secondary">2.</div>
<div class="p-5 border bg-gray-light">3.</div> <div class="p-5 border color-bg-secondary">3.</div>
</div> </div>
``` ```
@ -737,9 +737,9 @@ Mixing flex properties:
```html live ```html live
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-sm-items-center flex-justify-start flex-lg-justify-between"> <div style="min-height: 150px;" class="border d-flex flex-items-start flex-sm-items-center flex-justify-start flex-lg-justify-between">
<div class="p-5 border bg-gray-light flex-sm-self-stretch">.flex-self-stretch</div> <div class="p-5 border color-bg-secondary flex-sm-self-stretch">.flex-self-stretch</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
<div class="p-5 border bg-gray-light">&nbsp;</div> <div class="p-5 border color-bg-secondary">&nbsp;</div>
</div> </div>
``` ```
@ -753,7 +753,7 @@ You can use flex utilities to make a simple media object, like this:
```html live ```html live
<div class="border d-flex flex-items-center p-4"> <div class="border d-flex flex-items-center p-4">
<div class="p-5 border bg-gray-light">image</div> <div class="p-5 border color-bg-secondary">image</div>
<p class="pl-4 m-0"><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p> <p class="pl-4 m-0"><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
</div> </div>
``` ```

64
docs/content/utilities/layout.md
View File

@ -123,11 +123,11 @@ Overflow utilities can be applied or changed per [breakpoint](/objects/grid#brea
## Floats ## Floats
Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear. Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
```html live ```html live
<div class="clearfix border border-gray"> <div class="clearfix border">
<div class="float-left border border-gray"> <div class="float-left border">
.float-left .float-left
</div> </div>
<div class="float-right border border-gray"> <div class="float-right border">
.float-right .float-right
</div> </div>
</div> </div>
@ -138,11 +138,11 @@ Float utilities can be applied or changed per [breakpoint](/objects/grid#breakpo
Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear. Each responsive float utility is applied to the specified breakpoint and up, using the following formula: `float-[breakpoint]-[property]`. For example: `float-md-left`. Remember to use `.clearfix` to clear.
```html live ```html live
<div class="clearfix border border-gray"> <div class="clearfix border">
<div class="float-md-left border border-gray"> <div class="float-md-left border">
.float-md-left .float-md-left
</div> </div>
<div class="float-md-right border border-gray"> <div class="float-md-right border">
.float-md-right .float-md-right
</div> </div>
</div> </div>
@ -152,7 +152,7 @@ Each responsive float utility is applied to the specified breakpoint and up, usi
Adjust the alignment of an element with `.v-align-baseline`, `.v-align-top`, `.v-align-middle` or `.v-align-bottom`. The vertical-align property only applies to inline or table-cell boxes. Adjust the alignment of an element with `.v-align-baseline`, `.v-align-top`, `.v-align-middle` or `.v-align-bottom`. The vertical-align property only applies to inline or table-cell boxes.
```html live ```html live
<div class="d-table border border-gray"> <div class="d-table border">
<div class="d-table-cell"><h1>Potatoes</h1></div> <div class="d-table-cell"><h1>Potatoes</h1></div>
<div class="d-table-cell v-align-baseline">.v-align-baseline</div> <div class="d-table-cell v-align-baseline">.v-align-baseline</div>
<div class="d-table-cell v-align-top">.v-align-top</div> <div class="d-table-cell v-align-top">.v-align-top</div>
@ -164,7 +164,7 @@ Adjust the alignment of an element with `.v-align-baseline`, `.v-align-top`, `.v
Use `v-align-text-top` or `v-align-text-bottom` to adjust the alignment of an element with the top or bottom of the parent element's font. Use `v-align-text-top` or `v-align-text-bottom` to adjust the alignment of an element with the top or bottom of the parent element's font.
```html live ```html live
<div class="border border-gray"> <div class="border">
<h1 class="mr-1">Potatoes <h1 class="mr-1">Potatoes
<span class="f4 v-align-text-top mr-1">.v-align-text-top</span> <span class="f4 v-align-text-top mr-1">.v-align-text-top</span>
<span class="f4 v-align-text-bottom mr-1">.v-align-text-bottom</span> <span class="f4 v-align-text-bottom mr-1">.v-align-text-bottom</span>
@ -178,7 +178,7 @@ Use `.width-fit` to set max-width 100%.
```html live ```html live
<div class="one-fourth column"> <div class="one-fourth column">
<img class="width-fit bg-gray" src="https://github.com/github.png" alt="width fitted octocat" /> <img class="width-fit color-bg-secondary" src="https://github.com/github.png" alt="width fitted octocat" />
</div> </div>
``` ```
@ -215,7 +215,7 @@ Use `.height-fit` to set max-height 100%.
Use `.height-full` to set height to 100%. Use `.height-full` to set height to 100%.
```html live ```html live
<div class="d-table border border-gray"> <div class="d-table border">
<div class="d-table-cell height-full v-align-middle pl-3"> <div class="d-table-cell height-full v-align-middle pl-3">
<!-- <%= octicon "three-bars" %> --> <!-- <%= octicon "three-bars" %> -->
<svg class="octicon octicon-three-bars" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"></path></svg> <svg class="octicon octicon-three-bars" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"></path></svg>
@ -257,16 +257,16 @@ Use `.position-relative` to create a new stacking context.
_Note how the other elements are displayed as if "Two" were in its normal position and taking up space._ _Note how the other elements are displayed as if "Two" were in its normal position and taking up space._
```html live ```html live
<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;"> <div class="d-inline-block float-left color-bg-info-inverse color-text-white m-3" style="width:100px; height:100px;">
One One
</div> </div>
<div class="d-inline-block float-left position-relative bg-blue text-white m-3" style="width:100px; height:100px; top:12px; left:12px;"> <div class="d-inline-block float-left position-relative color-bg-info-inverse color-text-white m-3" style="width:100px; height:100px; top:12px; left:12px;">
Two Two
</div> </div>
<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;"> <div class="d-inline-block float-left color-bg-info-inverse color-text-white m-3" style="width:100px; height:100px;">
Three Three
</div> </div>
<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;"> <div class="d-inline-block float-left color-bg-info-inverse color-text-white m-3" style="width:100px; height:100px;">
Four Four
</div> </div>
``` ```
@ -278,7 +278,7 @@ Use `.position-absolute` to take elements out of the normal document flow.
```html live ```html live
<div class="position-relative" style="height:116px;"> <div class="position-relative" style="height:116px;">
<button type="button" class="btn mb-1">Button</button> <button type="button" class="btn mb-1">Button</button>
<div class="position-absolute border border-gray p-2"> <div class="position-absolute border p-2">
<a href="#url" class="d-block p-1">Mashed potatoes</a> <a href="#url" class="d-block p-1">Mashed potatoes</a>
<a href="#url" class="d-block p-1">Fries</a> <a href="#url" class="d-block p-1">Fries</a>
</div> </div>
@ -293,7 +293,7 @@ _Note: This example is shown in an `<iframe>` and therefore will not be position
```html live ```html live
<div style="height: 64px;"> <div style="height: 64px;">
<div class="position-fixed right-0 bottom-0 bg-gray-light border p-2"> <div class="position-fixed right-0 bottom-0 color-bg-secondary border p-2">
.position-fixed .position-fixed
</div> </div>
</div> </div>
@ -304,7 +304,7 @@ To fill an entire width or height, use opposing directions.
_Note: fixed positioning has been disabled here for demonstration only._ _Note: fixed positioning has been disabled here for demonstration only._
```html live ```html live
<div class="position-fixed left-0 right-0 p-3 bg-gray-dark text-white"> <div class="position-fixed left-0 right-0 p-3 color-bg-info-inverse color-text-white">
.position-fixed .left-0 .right-0 .position-fixed .left-0 .right-0
</div> </div>
``` ```
@ -323,14 +323,14 @@ Combine `.position-sticky` with `.top-0` to keep an element stuck to the top.
```html live ```html live
<section class="mb-3"> <section class="mb-3">
<header class="border position-sticky top-0 bg-gray p-3" style="z-index: 1;">Sticky header 1</header> <header class="border position-sticky top-0 color-bg-secondary p-3" style="z-index: 1;">Sticky header 1</header>
<main class="border border-top-0 p-3"> <main class="border border-top-0 p-3">
<p>Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p> <p>Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p>
</main> </main>
</section> </section>
<section class="mb-3"> <section class="mb-3">
<header class="border position-sticky top-0 bg-gray p-3">Sticky header 2</header> <header class="border position-sticky top-0 color-bg-secondary p-3">Sticky header 2</header>
<main class="border border-top-0 p-3"> <main class="border border-top-0 p-3">
<p>As Cicero would put it, “Um, not so fast.”</p> <p>As Cicero would put it, “Um, not so fast.”</p>
@ -339,7 +339,7 @@ Combine `.position-sticky` with `.top-0` to keep an element stuck to the top.
</section> </section>
<section class="mb-3"> <section class="mb-3">
<header class="border position-sticky top-0 bg-gray p-3">Sticky header 3</header> <header class="border position-sticky top-0 color-bg-secondary p-3">Sticky header 3</header>
<main class="border border-top-0 p-3"> <main class="border border-top-0 p-3">
<p>Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p> <p>Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p>
</main> </main>
@ -358,7 +358,7 @@ Combine `.position-sticky` with `.bottom-0` to keep an element stuck to the bott
<h3>Title</h3> <h3>Title</h3>
<p>Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p> <p>Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing,” Before & After magazine answered a curious reader, “Its ‘words’ loosely approximate the frequency with which letters occur in English, which is why at a glance it looks pretty real.”</p>
</main> </main>
<footer class="border position-sticky bottom-0 bg-gray p-3">Sticky footer 1</footer> <footer class="border position-sticky bottom-0 color-bg-secondary p-3">Sticky footer 1</footer>
</section> </section>
<section class="mb-3"> <section class="mb-3">
@ -366,7 +366,7 @@ Combine `.position-sticky` with `.bottom-0` to keep an element stuck to the bott
<h3>Title</h3> <h3>Title</h3>
<p>Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p> <p>Richard McClintock, a Latin scholar from Hampden-Sydney College, is credited with discovering the source behind the ubiquitous filler text. In seeing a sample of lorem ipsum, his interest was piqued by consectetur—a genuine, albeit rare, Latin word. Consulting a Latin dictionary led McClintock to a passage from De Finibus Bonorum et Malorum (“On the Extremes of Good and Evil”), a first-century B.C. text from the Roman philosopher Cicero.</p>
</main> </main>
<footer class="border position-sticky bottom-0 bg-gray p-3">Sticky footer 2</footer> <footer class="border position-sticky bottom-0 color-bg-secondary p-3">Sticky footer 2</footer>
</section> </section>
<style>.frame-example { max-width: 300px; height: 300px; }</style> <style>.frame-example { max-width: 300px; height: 300px; }</style>
@ -379,25 +379,25 @@ Combine `.position-sticky` with `.left-0` or `.right-0` to keep elements stuck t
```html live ```html live
<div class="d-flex border overflow-x-auto"> <div class="d-flex border overflow-x-auto">
<section class="d-flex"> <section class="d-flex">
<span class="border position-sticky left-0 bg-gray p-4">A</span> <span class="border position-sticky left-0 color-bg-secondary p-4">A</span>
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span> <span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
</section> </section>
<section class="d-flex"> <section class="d-flex">
<span class="border position-sticky left-0 bg-gray p-4">B</span> <span class="border position-sticky left-0 color-bg-secondary p-4">B</span>
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span> <span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
</section> </section>
<section class="d-flex"> <section class="d-flex">
<span class="border position-sticky left-0 bg-gray p-4">C</span> <span class="border position-sticky left-0 color-bg-secondary p-4">C</span>
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span> <span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
</section> </section>
<section class="d-flex"> <section class="d-flex">
<span class="border position-sticky left-0 bg-gray p-4">D</span> <span class="border position-sticky left-0 color-bg-secondary p-4">D</span>
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span> <span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
</section> </section>
<section class="d-flex"> <section class="d-flex">
<span class="border position-sticky left-0 bg-gray p-4">E</span> <span class="border position-sticky left-0 color-bg-secondary p-4">E</span>
<span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span> <span class="border p-4">1</span><span class="border p-4">2</span><span class="border p-4">3</span><span class="border p-4">4</span><span class="border p-4">5</span><span class="border p-4">6</span><span class="border p-4">7</span><span class="border p-4">8</span><span class="border p-4">9</span>
<span class="border position-sticky right-0 bg-gray p-4">...</span> <span class="border position-sticky right-0 color-bg-secondary p-4">...</span>
</section> </section>
</div> </div>
``` ```
@ -436,7 +436,7 @@ Create a media object with utilities.
```html live ```html live
<div class="clearfix p-3 border"> <div class="clearfix p-3 border">
<div class="float-left p-3 mr-3 bg-gray"> <div class="float-left p-3 mr-3 color-bg-secondary">
Image Image
</div> </div>
<div class="overflow-hidden"> <div class="overflow-hidden">
@ -447,11 +447,11 @@ Create a media object with utilities.
Create a double-sided media object for a container with a flexible center. Create a double-sided media object for a container with a flexible center.
```html live ```html live
<div class="clearfix p-3 border border-gray"> <div class="clearfix p-3 border">
<div class="float-left p-3 mr-3 bg-gray"> <div class="float-left p-3 mr-3 color-bg-secondary">
Image Image
</div> </div>
<div class="float-right p-3 ml-3 bg-gray"> <div class="float-right p-3 ml-3 color-bg-secondary">
Image Image
</div> </div>
<div class="overflow-hidden"> <div class="overflow-hidden">

44
docs/content/utilities/margin.md
View File

@ -43,13 +43,13 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
```html live ```html live
<div class="d-flex flex-items-baseline flex-justify-around"> <div class="d-flex flex-items-baseline flex-justify-around">
<div class="bg-yellow"><div class="m-0 p-1 color-bg-secondary">.m-0</div></div> <div class="color-bg-warning"><div class="m-0 p-1 color-bg-secondary">.m-0</div></div>
<div class="bg-yellow"><div class="m-1 p-1 color-bg-secondary">.m-1</div></div> <div class="color-bg-warning"><div class="m-1 p-1 color-bg-secondary">.m-1</div></div>
<div class="bg-yellow"><div class="m-2 p-1 color-bg-secondary">.m-2</div></div> <div class="color-bg-warning"><div class="m-2 p-1 color-bg-secondary">.m-2</div></div>
<div class="bg-yellow"><div class="m-3 p-1 color-bg-secondary">.m-3</div></div> <div class="color-bg-warning"><div class="m-3 p-1 color-bg-secondary">.m-3</div></div>
<div class="bg-yellow"><div class="m-4 p-1 color-bg-secondary">.m-4</div></div> <div class="color-bg-warning"><div class="m-4 p-1 color-bg-secondary">.m-4</div></div>
<div class="bg-yellow"><div class="m-5 p-1 color-bg-secondary">.m-5</div></div> <div class="color-bg-warning"><div class="m-5 p-1 color-bg-secondary">.m-5</div></div>
<div class="bg-yellow"><div class="m-6 p-1 color-bg-secondary">.m-6</div></div> <div class="color-bg-warning"><div class="m-6 p-1 color-bg-secondary">.m-6</div></div>
</div> </div>
``` ```
@ -59,12 +59,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
```html live ```html live
<div class="d-flex flex-items-baseline flex-justify-around"> <div class="d-flex flex-items-baseline flex-justify-around">
<div class="bg-yellow"><div class="mt-3 p-1 color-bg-secondary">.mt-3</div></div> <div class="color-bg-warning"><div class="mt-3 p-1 color-bg-secondary">.mt-3</div></div>
<div class="bg-yellow"><div class="mr-3 p-1 color-bg-secondary">.mr-3</div></div> <div class="color-bg-warning"><div class="mr-3 p-1 color-bg-secondary">.mr-3</div></div>
<div class="bg-yellow"><div class="mb-3 p-1 color-bg-secondary">.mb-3</div></div> <div class="color-bg-warning"><div class="mb-3 p-1 color-bg-secondary">.mb-3</div></div>
<div class="bg-yellow"><div class="ml-3 p-1 color-bg-secondary">.ml-3</div></div> <div class="color-bg-warning"><div class="ml-3 p-1 color-bg-secondary">.ml-3</div></div>
<div class="bg-yellow"><div class="mx-3 p-1 color-bg-secondary">.mx-3</div></div> <div class="color-bg-warning"><div class="mx-3 p-1 color-bg-secondary">.mx-3</div></div>
<div class="bg-yellow"><div class="my-3 p-1 color-bg-secondary">.my-3</div></div> <div class="color-bg-warning"><div class="my-3 p-1 color-bg-secondary">.my-3</div></div>
</div> </div>
``` ```
@ -73,12 +73,12 @@ Use directional utilities to apply margin to an individual side, or the X and Y
The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported. The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis (`mt`, `mb` and `my`) and its responsive variants are supported.
```html live ```html live
<div class="bg-yellow d-inline-block"><div class="mt-7 p-1 color-bg-secondary">.mb-7</div></div> <div class="color-bg-warning d-inline-block"><div class="mt-7 p-1 color-bg-secondary">.mb-7</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-8 p-1 color-bg-secondary">.mb-8</div></div> <div class="color-bg-warning d-inline-block"><div class="mt-8 p-1 color-bg-secondary">.mb-8</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-9 p-1 color-bg-secondary">.mb-9</div></div> <div class="color-bg-warning d-inline-block"><div class="mt-9 p-1 color-bg-secondary">.mb-9</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-10 p-1 color-bg-secondary">.mb-10</div></div> <div class="color-bg-warning d-inline-block"><div class="mt-10 p-1 color-bg-secondary">.mb-10</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-11 p-1 color-bg-secondary">.mb-11</div></div> <div class="color-bg-warning d-inline-block"><div class="mt-11 p-1 color-bg-secondary">.mb-11</div></div>
<div class="bg-yellow d-inline-block"><div class="mt-12 p-1 color-bg-secondary">.mb-12</div></div> <div class="color-bg-warning d-inline-block"><div class="mt-12 p-1 color-bg-secondary">.mb-12</div></div>
``` ```
## Center elements ## Center elements
@ -86,7 +86,7 @@ The extended scale starts from spacer `7` up to `12`. **Note**: Only the y-axis
Use `mx-auto`to center block elements with a set width. Use `mx-auto`to center block elements with a set width.
```html live ```html live
<div class="bg-yellow"> <div class="color-bg-warning">
<div class="mx-auto color-bg-secondary text-center" style="max-width: 500px;">.mx-auto</div> <div class="mx-auto color-bg-secondary text-center" style="max-width: 500px;">.mx-auto</div>
</div> </div>
``` ```
@ -119,7 +119,7 @@ You can add negative margins to the top, right, bottom, or left of an item by ad
```html live ```html live
<div class="d-flex flex-justify-center"> <div class="d-flex flex-justify-center">
<div class="color-bg-warning"> <div class="color-bg-warning">
<div class="m-3 ml-n4 ml-md-n6 border-left border-red color-bg-secondary p-2"> <div class="m-3 ml-n4 ml-md-n6 border-left color-border-danger color-bg-secondary p-2">
.m-3 .ml-n4 .ml-md-n6 .m-3 .ml-n4 .ml-md-n6
</div> </div>
</div> </div>
@ -133,7 +133,7 @@ You can use the extended spacing scale for `top` and `bottom` margins, ranging f
```html live ```html live
<div class="d-flex flex-justify-center"> <div class="d-flex flex-justify-center">
<div class="py-6 px-3 color-bg-warning"> <div class="py-6 px-3 color-bg-warning">
<div class="mt-n8 border-left border-red color-bg-tertiary p-2"> <div class="mt-n8 border-left color-border-danger color-bg-tertiary p-2">
.mt-n8 .mt-n8
</div> </div>
</div> </div>

8
docs/content/utilities/marketing-layout.md
View File

@ -20,10 +20,10 @@ Use these with `.position-absolute` to position decorative assets and shapes on
In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.** In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.**
```html live ```html live
<div class="position-relative p-6 bg-gray"> <div class="position-relative p-6 color-bg-secondary">
<div class="border bg-white position-absolute top-2">.top-2</div> <div class="border color-bg-primary position-absolute top-2">.top-2</div>
<div class="border bg-white position-absolute position-lg-static right-md-4">.right-md-4</div> <div class="border color-bg-primary position-absolute position-lg-static right-md-4">.right-md-4</div>
<div class="border bg-white position-lg-absolute left-lg-1">.left-lg-1</div> <div class="border color-bg-primary position-lg-absolute left-lg-1">.left-lg-1</div>
</div> </div>
``` ```

46
docs/content/utilities/padding.md
View File

@ -44,13 +44,13 @@ _**Note:** The blue in the examples below represents the element, and the green
Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6. Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6.
```html live ```html live
<div class="p-0 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-0</div></div> <div class="p-0 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-0</div></div>
<div class="p-1 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-1</div></div> <div class="p-1 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-1</div></div>
<div class="p-2 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-2</div></div> <div class="p-2 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-2</div></div>
<div class="p-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-3</div></div> <div class="p-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-3</div></div>
<div class="p-4 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-4</div></div> <div class="p-4 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-4</div></div>
<div class="p-5 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-5</div></div> <div class="p-5 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-5</div></div>
<div class="p-6 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.p-6</div></div> <div class="p-6 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.p-6</div></div>
``` ```
## Directional padding ## Directional padding
@ -58,12 +58,12 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6. Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6.
```html live ```html live
<div class="pt-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-3</div></div> <div class="pt-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-3</div></div>
<div class="pr-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pr-3</div></div> <div class="pr-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pr-3</div></div>
<div class="pb-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pb-3</div></div> <div class="pb-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pb-3</div></div>
<div class="pl-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.pl-3</div></div> <div class="pl-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pl-3</div></div>
<div class="py-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.py-3</div></div> <div class="py-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.py-3</div></div>
<div class="px-3 mr-3 bg-yellow d-inline-block"><div class="bg-gray p-1">.px-3</div></div> <div class="px-3 mr-3 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.px-3</div></div>
``` ```
## Extended directional padding ## Extended directional padding
@ -71,12 +71,12 @@ Use directional utilities to apply padding to an individual side, or the X and Y
The extended directional padding scale starts from spacer `7` and goes up to `12`. All directions and their responsive variants are supported, except for `px`. The extended directional padding scale starts from spacer `7` and goes up to `12`. All directions and their responsive variants are supported, except for `px`.
```html live ```html live
<div class="pt-7 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-7</div></div> <div class="pt-7 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-7</div></div>
<div class="pt-8 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-8</div></div> <div class="pt-8 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-8</div></div>
<div class="pt-9 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-9</div></div> <div class="pt-9 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-9</div></div>
<div class="pt-10 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-10</div></div> <div class="pt-10 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-10</div></div>
<div class="pt-11 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-11</div></div> <div class="pt-11 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-11</div></div>
<div class="pt-12 mr-1 bg-yellow d-inline-block"><div class="bg-gray p-1">.pt-12</div></div> <div class="pt-12 mr-1 color-bg-warning d-inline-block"><div class="color-bg-secondary p-1">.pt-12</div></div>
``` ```
@ -85,8 +85,8 @@ The extended directional padding scale starts from spacer `7` and goes up to `12
All padding utilities can be adjusted per [breakpoint](/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up. All padding utilities can be adjusted per [breakpoint](/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
```html live ```html live
<div class="px-sm-2 px-md-4 bg-yellow d-inline-block"> <div class="px-sm-2 px-md-4 color-bg-warning d-inline-block">
<div class="bg-gray p-1">.px-sm-2 .px-md-4</div> <div class="color-bg-tertiary p-1">.px-sm-2 .px-md-4</div>
</div> </div>
``` ```
@ -101,8 +101,8 @@ All padding utilities can be adjusted per [breakpoint](/support/breakpoints) usi
It's the equvilent of adding the `.px-3 .px-sm-6 .px-lg-3` utility classes. It's the equvilent of adding the `.px-3 .px-sm-6 .px-lg-3` utility classes.
```html live ```html live
<div class="p-responsive bg-yellow"> <div class="p-responsive color-bg-warning">
<div class="bg-gray p-1">.p-responsive</div> <div class="color-bg-tertiary p-1">.p-responsive</div>
</div> </div>
``` ```

17
docs/content/utilities/typography.md
View File

@ -115,8 +115,8 @@ There are two utilities for adjusting how lines and words of text break when the
2. `wb-break-all` sets `word-break: break-all`, which will force a word to break regardless of whether it's shorter than the line length. See [MDN's `word-break` docs](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values) for more info. 2. `wb-break-all` sets `word-break: break-all`, which will force a word to break regardless of whether it's shorter than the line length. See [MDN's `word-break` docs](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values) for more info.
```html live ```html live
<p class="break-word p-2 bg-gray col-3 border-right">.break-word will only break long words that exceed the line length, such as supercalifragilisticexpialidocious. Long words like "exceedingly" will simply break to the next line.</p> <p class="break-word p-2 color-bg-secondary col-3 border-right">.break-word will only break long words that exceed the line length, such as supercalifragilisticexpialidocious. Long words like "exceedingly" will simply break to the next line.</p>
<p class="wb-break-all p-2 bg-gray col-3 border-right">.wb-break-all will break any word that meets the end its line, and should be used sparingly. As you can see here, it's not particularly nice to read text that breaks in weird places.</p> <p class="wb-break-all p-2 color-bg-secondary col-3 border-right">.wb-break-all will break any word that meets the end its line, and should be used sparingly. As you can see here, it's not particularly nice to read text that breaks in weird places.</p>
``` ```
@ -148,16 +148,3 @@ Remove bullets from an unordered list or numbers from an ordered list by applyin
<li>Third list item</li> <li>Third list item</li>
</ul> </ul>
``` ```
## Text shadows
Text shadows can be used to help readability and to add some depth on colored backgrounds.
```html live
<div class="bg-gray-dark p-5">
<h3 class="text-white text-shadow-dark">.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
</div>
<div class="bg-gray p-5">
<h3 class="text-shadow-light">.text-shadow-light creates an embossed effect for dark text</h3>
</div>
```