mirror of
https://github.com/primer/css.git
synced 2025-01-03 03:34:16 +03:00
add primer-utilities docs folder back
This commit is contained in:
broccolini
parent
c127d1e729
commit
06b823006d
57
modules/primer-utilities/docs/animations.md
Normal file
57
modules/primer-utilities/docs/animations.md
Normal file
@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Animations
|
||||
example_layout: toggle
|
||||
status: Stable
|
||||
---
|
||||
|
||||
Animations are reusable animation classes that you can use to emphasize an element. All of these animations will animate if you toggle their visibility using the "Toggle" button.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Fade In
|
||||
|
||||
The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
|
||||
|
||||
```html
|
||||
<span class="anim-fade-in"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
|
||||
```
|
||||
|
||||
## Fade Up
|
||||
|
||||
The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
|
||||
|
||||
```html
|
||||
<div class="anim-fade-up"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
|
||||
```
|
||||
|
||||
## Fade Down
|
||||
|
||||
The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
|
||||
|
||||
```html
|
||||
<div class="anim-fade-down"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</div>
|
||||
```
|
||||
|
||||
## Scale In
|
||||
|
||||
The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
|
||||
|
||||
```html
|
||||
<div class="anim-scale-in bg-gray-dark text-white p-2"><%= octicon("mark-github") %></div>
|
||||
```
|
||||
|
||||
## Grow X
|
||||
|
||||
The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
|
||||
|
||||
```html
|
||||
<div class="anim-grow-x py-2 bg-green"></div>
|
||||
```
|
||||
|
||||
## Pulse
|
||||
|
||||
The `.anim-pulse` class will pulse an element infinitely.
|
||||
|
||||
```html
|
||||
<%= octicon("mark-github", :class => "anim-pulse") %>
|
||||
```
|
||||
124
modules/primer-utilities/docs/borders.md
Normal file
124
modules/primer-utilities/docs/borders.md
Normal file
@ -0,0 +1,124 @@
|
||||
---
|
||||
title: Borders
|
||||
status: New release
|
||||
status_issue: https://github.com/github/design-systems/issues/72
|
||||
---
|
||||
|
||||
Utilities for borders, border radius, and box shadows.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Default border
|
||||
|
||||
The default border utility applies a solid, 1px border, with a default gray color.
|
||||
|
||||
```html
|
||||
<div class="border">
|
||||
.border
|
||||
</div>
|
||||
```
|
||||
|
||||
Borders can be applied to a specific edge or to the Y axis.
|
||||
|
||||
```html
|
||||
<div class="d-flex mb-3">
|
||||
<div class="border-left col-3">
|
||||
.border-left
|
||||
</div>
|
||||
<div class="border-top col-3">
|
||||
.border-top
|
||||
</div>
|
||||
<div class="border-bottom col-3">
|
||||
.border-bottom
|
||||
</div>
|
||||
<div class="border-right col-3">
|
||||
.border-right
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-y">
|
||||
.border-y
|
||||
</div>
|
||||
```
|
||||
|
||||
Remove borders from all sides or a single side with `.border-0`, `.border-top-0`, `.border-right-0`, `.border-bottom-0`, `.border-left-0`.
|
||||
|
||||
```html
|
||||
<div class="Box border-top-0">
|
||||
.border-top-0
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
|
||||
|
||||
```html
|
||||
<div class="border border-blue mb-2">
|
||||
.border-blue
|
||||
</div>
|
||||
<div class="border border-blue-light mb-2">
|
||||
.border-blue-light
|
||||
</div>
|
||||
<div class="border border-green mb-2">
|
||||
.border-green
|
||||
</div>
|
||||
<div class="border border-green-light mb-2">
|
||||
.border-green-light
|
||||
</div>
|
||||
<div class="border border-red mb-2">
|
||||
.border-red
|
||||
</div>
|
||||
<div class="border border-red-light mb-2">
|
||||
.border-red-light
|
||||
</div>
|
||||
<div class="border border-purple mb-2">
|
||||
.border-purple
|
||||
</div>
|
||||
<div class="border border-yellow mb-2">
|
||||
.border-yellow
|
||||
</div>
|
||||
<div class="border border-gray-light mb-2">
|
||||
.border-gray-light
|
||||
</div>
|
||||
<div class="border border-gray-dark mb-2">
|
||||
.border-gray-dark
|
||||
</div>
|
||||
```
|
||||
|
||||
### Borders with alpha transparency
|
||||
Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
|
||||
|
||||
```html
|
||||
<div class="border border-black-fade bg-blue-light p-2 mb-2">
|
||||
.border-black-fade .bg-blue-light
|
||||
</div>
|
||||
<div class="border border-black-fade bg-red-light p-2 mb-2">
|
||||
.border-black-fade .bg-red-light
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border style
|
||||
|
||||
Use `border-dashed` to give an element a dashed border.
|
||||
|
||||
```html
|
||||
<div class="border border-dashed p-2">
|
||||
.border-dashed
|
||||
</div>
|
||||
```
|
||||
|
||||
## Rounded corners
|
||||
|
||||
Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px.
|
||||
|
||||
```html
|
||||
<div class="Box rounded-0 mb-2">
|
||||
.rounded-0
|
||||
</div>
|
||||
<div class="border rounded-1 mb-2">
|
||||
.rounded-1
|
||||
</div>
|
||||
<div class="border rounded-2">
|
||||
.rounded-2
|
||||
</div>
|
||||
```
|
||||
107
modules/primer-utilities/docs/box-shadow.md
Normal file
107
modules/primer-utilities/docs/box-shadow.md
Normal file
@ -0,0 +1,107 @@
|
||||
---
|
||||
title: Box shadow
|
||||
status: New release
|
||||
status_issue: https://github.com/github/design-systems/issues/269
|
||||
---
|
||||
|
||||
Box shadows are used to make content appear elevated. They are typically applied to containers of content that users need to pay attention to or content that appears on top of (overlapping) other elements on the page (like a pop-over or modal).
|
||||
|
||||
{:toc}
|
||||
|
||||
## Default
|
||||
|
||||
Default shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
|
||||
|
||||
```html
|
||||
<div class="box-shadow p-3">
|
||||
.box-shadow
|
||||
</div>
|
||||
```
|
||||
|
||||
These types of shadows are typically applied to elements with borders, like [`Box`](/styleguide/css/styles/core/components/box).
|
||||
|
||||
```html
|
||||
<div class="col-5">
|
||||
<div class="Box box-shadow">
|
||||
<div class="Box-row">
|
||||
<h3 class="mb-0">Organization</h3>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<p class="mb-0 alt-text-small text-gray">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="Box-row">
|
||||
<button type="button" name="Create an organization" class="btn btn-primary btn-block">Create an organization</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Medium
|
||||
|
||||
Medium box shadows are more diffused and slightly larger than small box shadows.
|
||||
|
||||
```html
|
||||
<div class="box-shadow-medium p-3">
|
||||
.box-shadow-medium
|
||||
</div>
|
||||
```
|
||||
|
||||
Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable.
|
||||
|
||||
```html
|
||||
<div class="col-6">
|
||||
<a class="d-block box-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>
|
||||
<h3 class="text-gray-dark">Serverless architecture</h3>
|
||||
<p class="alt-text-small text-gray">
|
||||
Build powerful, event-driven, serverless architectures with these open-source libraries and frameworks.
|
||||
</p>
|
||||
<ul class="position-absolute bottom-0 pb-3 text-small text-gray list-style-none ">
|
||||
<li class="d-inline-block mr-1"><%= octicon "repo", :class => "mr-1" %>12 Repositories</li>
|
||||
<li class="d-inline-block"><%= octicon "code", :class => "mr-1" %>5 Languages</li>
|
||||
</ul>
|
||||
</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Large
|
||||
|
||||
Large box shadows are very diffused and used sparingly in the product UI.
|
||||
|
||||
```html
|
||||
<div class="box-shadow-large p-3">
|
||||
.box-shadow-large
|
||||
</div>
|
||||
```
|
||||
|
||||
These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
|
||||
|
||||
```html
|
||||
<div class="box-shadow-large rounded-2 overflow-hidden">
|
||||
<img src="<%= image_path "modules/site/org_example_nasa.png" %>" class="img-responsive" alt="NASA is on GitHub">
|
||||
</div>
|
||||
```
|
||||
|
||||
## Extra Large
|
||||
|
||||
Extra large box shadows are even more diffused.
|
||||
|
||||
```html
|
||||
<div class="box-shadow-extra-large p-3">
|
||||
.box-shadow-extra-large
|
||||
</div>
|
||||
```
|
||||
|
||||
These shadows are used for marketing content and content that appears on top of other page elements.
|
||||
|
||||
## Remove a box shadow
|
||||
|
||||
Additionally there is a `box-shadow-none` class that removes `box-shadow`:
|
||||
|
||||
```html
|
||||
<div class="box-shadow-large box-shadow-none p-3">
|
||||
.box-shadow-none
|
||||
</div>
|
||||
```
|
||||
232
modules/primer-utilities/docs/colors.md
Normal file
232
modules/primer-utilities/docs/colors.md
Normal file
@ -0,0 +1,232 @@
|
||||
---
|
||||
title: Colors
|
||||
status: New release
|
||||
status_issue: https://github.com/github/design-systems/issues/97
|
||||
---
|
||||
|
||||
Use color utilities to apply color to the background of elements, text, and borders.
|
||||
|
||||
* [Background colors](#background-colors)
|
||||
* [Text colors](#text-colors)
|
||||
* [Link colors](#link-colors)
|
||||
* [Border colors](#border-colors)
|
||||
|
||||
## Background colors
|
||||
|
||||
Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/styleguide/css/principles/accessibility).
|
||||
|
||||
### Gray
|
||||
|
||||
<div class="container-lg clearfix mb-4">
|
||||
<div class="col-3 float-left pr-4">
|
||||
<div class="h4">.bg-gray</div>
|
||||
<code>#f5f5f5, $bg-gray</code>
|
||||
<div class="mt-2 bg-gray" style="height: 60px;"></div>
|
||||
</div>
|
||||
<div class="col-9 float-left">
|
||||
<div class="container-lg clearfix">
|
||||
<div class="col-6 float-left">
|
||||
<div class="h4">.bg-gray-dark</div>
|
||||
<code>#333, $bg-gray-dark</code>
|
||||
<div class="mt-2 bg-gray-dark border-right-0" style="height: 60px;"></div>
|
||||
</div>
|
||||
<div class="col-6 float-left">
|
||||
<div class="h4">.bg-gray-light</div>
|
||||
<code>#fafafa, $bg-gray-light</code>
|
||||
<div class="mt-2 bg-gray-light" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Blue
|
||||
|
||||
<div class="container-lg clearfix mb-4">
|
||||
<div class="col-3 float-left pr-4">
|
||||
<div class="h4">.bg-blue</div>
|
||||
<code>#4078c0, $bg-blue</code>
|
||||
<div class="mt-2 bg-blue" style="height: 60px;"></div>
|
||||
</div>
|
||||
<div class="col-9 float-left">
|
||||
<div class="container-lg clearfix">
|
||||
<div class="h4">.bg-blue-light</div>
|
||||
<code>#f2f8fa, $bg-blue-light</code>
|
||||
<div class="mt-2 bg-blue-light" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Yellow
|
||||
|
||||
<div class="container-lg clearfix mb-4">
|
||||
<div class="col-3 float-left pr-4">
|
||||
<div class="h4">.bg-yellow</div>
|
||||
<code>#ffd36b, $bg-yellow</code>
|
||||
<div class="mt-2 bg-yellow" style="height: 60px;"></div>
|
||||
</div>
|
||||
<div class="col-9 float-left">
|
||||
<div class="container-lg clearfix">
|
||||
<div class="h4">.bg-yellow-light</div>
|
||||
<code>#fff9ea, $bg-yellow-light</code>
|
||||
<div class="mt-2 bg-yellow-light" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Red
|
||||
|
||||
<div class="container-lg clearfix mb-4">
|
||||
<div class="col-3 float-left pr-4">
|
||||
<div class="h4">.bg-red</div>
|
||||
<code>#bd2c00, $bg-red</code>
|
||||
<div class="mt-2 bg-red" style="height: 60px;"></div>
|
||||
</div>
|
||||
<div class="col-9 float-left">
|
||||
<div class="container-lg clearfix">
|
||||
<div class="h4">.bg-red-light</div>
|
||||
<code>#fcdede, $bg-red-light</code>
|
||||
<div class="mt-2 bg-red-light" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Green
|
||||
|
||||
<div class="container-lg clearfix mb-4">
|
||||
<div class="col-3 float-left pr-4">
|
||||
<div class="h4">.bg-green</div>
|
||||
<code>#6cc644, $bg-green</code>
|
||||
<div class="mt-2 bg-green" style="height: 60px;"></div>
|
||||
</div>
|
||||
<div class="col-9 float-left">
|
||||
<div class="container-lg clearfix">
|
||||
<div class="h4">.bg-green-light</div>
|
||||
<code>#eaffea, $bg-green-light</code>
|
||||
<div class="mt-2 bg-green-light" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
### Purple
|
||||
|
||||
<div class="container-lg clearfix mb-4">
|
||||
<div class="col-3 float-left pr-4">
|
||||
<div class="h4">.bg-purple</div>
|
||||
<code>#6e5494, $bg-purple</code>
|
||||
<div class="mt-2 bg-purple" style="height: 60px;"></div>
|
||||
</div>
|
||||
<div class="col-9 float-left">
|
||||
<div class="container-lg clearfix">
|
||||
<div class="h4">.bg-purple-light</div>
|
||||
<code>#f5f0ff, $bg-purple-light</code>
|
||||
<div class="mt-2 bg-purple-light" style="height: 60px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Text colors
|
||||
|
||||
Use text color utilities to set text or [octicons](/styleguide/css/styles/core/components/octicons) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](/styleguide/css/principles/accessibility).
|
||||
|
||||
These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **Any of the combinations with a warning icon must be used with caution**.
|
||||
|
||||
### Text on white background
|
||||
|
||||
```html
|
||||
<div class="text-blue mb-2">
|
||||
.text-blue on white
|
||||
</div>
|
||||
<div class="text-gray-dark mb-2">
|
||||
.text-gray-dark on white
|
||||
</div>
|
||||
<div class="text-gray mb-2">
|
||||
.text-gray on white
|
||||
</div>
|
||||
<div class="text-red mb-2">
|
||||
.text-red on white
|
||||
</div>
|
||||
<div class="text-orange mb-2">
|
||||
.text-orange on white
|
||||
</div>
|
||||
<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
|
||||
<div class="text-orange-light mb-2">
|
||||
.text-orange-light on white
|
||||
</div>
|
||||
<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
|
||||
<div class="text-green mb-2 ml-4">
|
||||
.text-green on white
|
||||
</div>
|
||||
<div class="text-purple mb-2">
|
||||
.text-purple on white
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text on colored backgrounds
|
||||
|
||||
```html
|
||||
<div class="text-white bg-blue mb-2">
|
||||
.text-white on .bg-blue
|
||||
</div>
|
||||
<div class="bg-blue-light mb-2">
|
||||
.text-gray-dark on .bg-blue-light
|
||||
</div>
|
||||
<div class="text-white bg-red mb-2">
|
||||
.text-white on .bg-red
|
||||
</div>
|
||||
<div class="text-red bg-red-light mb-2">
|
||||
.text-red on .bg-red-light
|
||||
</div>
|
||||
<div class="bg-green-light mb-2">
|
||||
.text-gray-dark on .bg-green-light
|
||||
</div>
|
||||
<div class="bg-yellow mb-2">
|
||||
.text-gray-dark on .bg-yellow
|
||||
</div>
|
||||
<div class="bg-yellow-light mb-2">
|
||||
.text-gray-dark on .bg-yellow-light
|
||||
</div>
|
||||
<div class="text-white bg-purple mb-2">
|
||||
.text-white on .bg-purple
|
||||
</div>
|
||||
<div class="text-white bg-gray-dark mb-2">
|
||||
.text-white on .bg-gray-dark
|
||||
</div>
|
||||
<div class="bg-gray">
|
||||
.text-gray-dark on .bg-gray
|
||||
</div>
|
||||
```
|
||||
|
||||
## Link colors
|
||||
|
||||
Base link styles turn links blue and apply an underline on hover. You can override the base link styles with text color utilities and the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
|
||||
|
||||
Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
|
||||
|
||||
```html
|
||||
<a class="link-gray" href="#url">link-gray</a>
|
||||
```
|
||||
|
||||
Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
|
||||
|
||||
```html
|
||||
<a class="link-gray-dark" href="#url">link-gray-dark</a>
|
||||
```
|
||||
|
||||
Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
|
||||
|
||||
```html
|
||||
<a class="muted-link" href="#url">muted-link</a>
|
||||
```
|
||||
|
||||
Use `link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
|
||||
|
||||
```html
|
||||
<a class="text-gray-dark no-underline" href="#url">
|
||||
A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
|
||||
</a>
|
||||
```
|
||||
|
||||
## Border colors
|
||||
|
||||
Border colors are documented on the [border utilities page](/styleguide/css/styles/core/utilities/borders#border-width-style-and-color-utilities).
|
||||
665
modules/primer-utilities/docs/flexbox.md
Normal file
665
modules/primer-utilities/docs/flexbox.md
Normal file
@ -0,0 +1,665 @@
|
||||
---
|
||||
title: Flexbox
|
||||
status: New release
|
||||
source: /app/assets/stylesheets/primer-core/utilities/lib/layout.scss
|
||||
status_issue: https://github.com/github/design-systems/issues/157
|
||||
---
|
||||
|
||||
Flex utilities can be used to apply `flexbox` behaviors to elements by using utility classes.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Required reading
|
||||
|
||||
Before using these utilities, **you should be familiar with CSS3 Flexible Box spec**. If you are not, check out MDN's guide:
|
||||
|
||||
:book: **[Using CSS Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)**
|
||||
|
||||
## Flex container
|
||||
|
||||
Use these classes to make an element lay out its content using the flexbox model. Each **direct** child of the flex container will become a flex item.
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.d-flex { display: flex; }
|
||||
.d-inline-flex { display: inline-flex; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.d-flex` | The element behaves like a block and lays out its content using the flexbox model. |
|
||||
| `.d-inline-flex` | The element behaves like an inline element and lays out its content using the flexbox model. |
|
||||
|
||||
#### Example using `.d-flex`
|
||||
|
||||
```html
|
||||
<!-- flex container -->
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light">flex item 1</div>
|
||||
<div class="p-5 border bg-gray-light">flex item 2</div>
|
||||
<div class="p-5 border bg-gray-light">flex item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Example using `.d-inline-flex`
|
||||
|
||||
```html
|
||||
<!-- inline-flex container -->
|
||||
<div class="border d-inline-flex">
|
||||
<div class="p-5 border bg-gray-light">flex item 1</div>
|
||||
<div class="p-5 border bg-gray-light">flex item 2</div>
|
||||
<div class="p-5 border bg-gray-light">flex item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flex direction
|
||||
|
||||
Use these classes to define the orientation of the main axis (`row` or `column`). By default, flex items will display in a row. Use `.flex-column` to change the direction of the main axis to vertical.
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.flex-row { flex-direction: row; }
|
||||
.flex-row-reverse { flex-direction: row-reverse; }
|
||||
.flex-column { flex-direction: column; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-row` | The main axis runs left to right (default). |
|
||||
| `.flex-row-reverse` | The main axis runs right to left. |
|
||||
| `.flex-column` | The main axis runs top to bottom. |
|
||||
|
||||
#### Example using `.flex-column`
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-column">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
<div class="p-5 border bg-gray-light">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Example using `.flex-row`
|
||||
|
||||
This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-column flex-md-row">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
<div class="p-5 border bg-gray-light">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Example using `.flex-row-reverse`
|
||||
|
||||
This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**.
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-column flex-md-row-reverse">
|
||||
<div class="p-5 border bg-gray-light">Item 1</div>
|
||||
<div class="p-5 border bg-gray-light">Item 2</div>
|
||||
<div class="p-5 border bg-gray-light">Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flex wrap
|
||||
|
||||
You can choose whether flex items are forced into a single line or wrapped onto multiple lines.
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.flex-nowrap { flex-wrap: nowrap; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-wrap` | Flex items will break onto multiple lines (default) |
|
||||
| `.flex-nowrap` | Flex items are laid out in a single line, even if they overflow |
|
||||
|
||||
#### `flex-wrap` example
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">3</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">4</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">5</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">6</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">7</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">8</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">9</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### `flex-nowrap` example
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">3</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">4</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">5</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">6</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">7</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">8</div>
|
||||
<div class="p-5 px-6 border bg-gray-light">9</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Justify content
|
||||
|
||||
Use these classes to distribute space between and around flex items along the **main axis** of the container.
|
||||
|
||||
#### CSS
|
||||
|
||||
```CSS
|
||||
.flex-justify-start { justify-content: flex-start; }
|
||||
.flex-justify-end { justify-content: flex-end; }
|
||||
.flex-justify-center { justify-content: center; }
|
||||
.flex-justify-between { justify-content: space-between; }
|
||||
.flex-justify-around { justify-content: space-around; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
| Class | Default behavior |
|
||||
| --- | --- |
|
||||
| `.flex-justify-start` | Justify all items to the left |
|
||||
| `.flex-justify-end` | Justify all items to the right |
|
||||
| `.flex-justify-center` | Justify items to the center of the container |
|
||||
| `.flex-justify-between` | Distribute items evenly. First item is on the start line, last item is on the end line. |
|
||||
| `.flex-justify-around` | Distribute items evenly with equal space around them |
|
||||
|
||||
#### flex-justify-start
|
||||
|
||||
Use `.flex-justify-start` to align items to the start line. By default this will be on the left side of the container. If you are using `.flex-column`, the end line will be at the top of the container.
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-justify-start">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-justify-end
|
||||
|
||||
Use `.flex-justify-end` to align items to the end line. By default this will be on the right side of the container. If you are using `.flex-column`, the end line will be at the bottom of the container.
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-justify-end">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-justify-center
|
||||
|
||||
Use `.flex-justify-center` to align items in the middle of the container.
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-justify-center">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-justify-between
|
||||
|
||||
Use `.flex-justify-between` to distribute items evenly in the container. The first items will be on the start line and the last item will be on the end line.
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-justify-between">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-justify-around
|
||||
|
||||
Use `.flex-justify-around` to distribute items evenly, with an equal amount of space around them. Visually the spaces won't look equal, since each item has the same unit of space around it. For example, the first item only has one unit of space between it and the start line, but it has two units of space between it and the next item.
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-justify-around">
|
||||
<div class="p-5 border bg-gray-light">1</div>
|
||||
<div class="p-5 border bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align items
|
||||
|
||||
Use these classes to align items on the **cross axis**.
|
||||
|
||||
The cross axis runs perpendicular to the main axis. By default the main axis runs horizontally, so your items will align vertically on the cross axis. If you use [flex-column](#flex-direction) to make the main axis run vertically, your items will be aligned horizontally.
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.flex-items-start { align-items: flex-start; }
|
||||
.flex-items-end { align-items: flex-end; }
|
||||
.flex-items-center { align-items: center; }
|
||||
.flex-items-baseline { align-items: baseline; }
|
||||
.flex-items-stretch { align-items: stretch; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
| Class | Behavior |
|
||||
| --- | --- |
|
||||
| `.flex-items-start` | Align items to the start of the cross axis |
|
||||
| `.flex-items-end` | Align items to the end of the cross axis |
|
||||
| `.flex-items-center` | Align items to the center of the cross axis |
|
||||
| `.flex-items-baseline` | Align items along their baselines |
|
||||
| `.flex-items-stretch` | Stretch items from start of cross axis to end of cross axis |
|
||||
|
||||
#### flex-items-start
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-items-end
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-items-center
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-items-baseline
|
||||
|
||||
With `.flex-items-baseline`, items will be aligned along their baselines even if they have different font sizes.
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light f3">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-items-stretch
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align content
|
||||
|
||||
When the main axis wraps, this creates multiple main axis lines and adds extra space in the cross axis. Use these classes to align the lines of the main axis on the cross axis.
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.flex-content-start { align-content: flex-start; }
|
||||
.flex-content-end { align-content: flex-end; }
|
||||
.flex-content-center { align-content: center; }
|
||||
.flex-content-between { align-content: space-between; }
|
||||
.flex-content-around { align-content: space-around; }
|
||||
.flex-content-stretch { align-content: stretch; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-content-start` | Align content to the start of the cross axis |
|
||||
| `.flex-content-end` | Align content to the end of the cross axis |
|
||||
| `.flex-content-center` | Align content to the center of the cross axis |
|
||||
| `.flex-content-between` | Distribute content evenly. First line is on the start of the cross axis, last line is on the end of the cross axis. |
|
||||
| `.flex-content-around` | Stretch items from the start of the cross axis to the end of the cross axis. |
|
||||
| `.flex-content-stretch` | Lines stretch to occupy available space. |
|
||||
|
||||
#### flex-content-start
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
<div class="p-5 border bg-gray-light">5</div>
|
||||
<div class="p-5 border bg-gray-light">6</div>
|
||||
<div class="p-5 border bg-gray-light">7</div>
|
||||
<div class="p-5 border bg-gray-light">8</div>
|
||||
<div class="p-5 border bg-gray-light">9</div>
|
||||
<div class="p-5 border bg-gray-light">10</div>
|
||||
<div class="p-5 border bg-gray-light">11</div>
|
||||
<div class="p-5 border bg-gray-light">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-content-end
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
<div class="p-5 border bg-gray-light">5</div>
|
||||
<div class="p-5 border bg-gray-light">6</div>
|
||||
<div class="p-5 border bg-gray-light">7</div>
|
||||
<div class="p-5 border bg-gray-light">8</div>
|
||||
<div class="p-5 border bg-gray-light">9</div>
|
||||
<div class="p-5 border bg-gray-light">10</div>
|
||||
<div class="p-5 border bg-gray-light">11</div>
|
||||
<div class="p-5 border bg-gray-light">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-content-center
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
<div class="p-5 border bg-gray-light">5</div>
|
||||
<div class="p-5 border bg-gray-light">6</div>
|
||||
<div class="p-5 border bg-gray-light">7</div>
|
||||
<div class="p-5 border bg-gray-light">8</div>
|
||||
<div class="p-5 border bg-gray-light">9</div>
|
||||
<div class="p-5 border bg-gray-light">10</div>
|
||||
<div class="p-5 border bg-gray-light">11</div>
|
||||
<div class="p-5 border bg-gray-light">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-content-between
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
<div class="p-5 border bg-gray-light">5</div>
|
||||
<div class="p-5 border bg-gray-light">6</div>
|
||||
<div class="p-5 border bg-gray-light">7</div>
|
||||
<div class="p-5 border bg-gray-light">8</div>
|
||||
<div class="p-5 border bg-gray-light">9</div>
|
||||
<div class="p-5 border bg-gray-light">10</div>
|
||||
<div class="p-5 border bg-gray-light">11</div>
|
||||
<div class="p-5 border bg-gray-light">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-content-around
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
<div class="p-5 border bg-gray-light">5</div>
|
||||
<div class="p-5 border bg-gray-light">6</div>
|
||||
<div class="p-5 border bg-gray-light">7</div>
|
||||
<div class="p-5 border bg-gray-light">8</div>
|
||||
<div class="p-5 border bg-gray-light">9</div>
|
||||
<div class="p-5 border bg-gray-light">10</div>
|
||||
<div class="p-5 border bg-gray-light">11</div>
|
||||
<div class="p-5 border bg-gray-light">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-content-stretch
|
||||
|
||||
```html
|
||||
<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 bg-gray-light">2</div>
|
||||
<div class="p-5 border bg-gray-light">3</div>
|
||||
<div class="p-5 border bg-gray-light">4</div>
|
||||
<div class="p-5 border bg-gray-light">5</div>
|
||||
<div class="p-5 border bg-gray-light">6</div>
|
||||
<div class="p-5 border bg-gray-light">7</div>
|
||||
<div class="p-5 border bg-gray-light">8</div>
|
||||
<div class="p-5 border bg-gray-light">9</div>
|
||||
<div class="p-5 border bg-gray-light">10</div>
|
||||
<div class="p-5 border bg-gray-light">11</div>
|
||||
<div class="p-5 border bg-gray-light">12</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flex
|
||||
|
||||
Use this class to specify the ability of a flex item to alter its dimensions to fill available space.
|
||||
|
||||
```CSS
|
||||
.flex-auto { flex: 1 1 auto; }
|
||||
```
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-auto` | Sets default values for `flex-grow` (1), `flex-shrink` (1) and `flex-basis` (auto) |
|
||||
|
||||
#### flex-auto
|
||||
|
||||
```html
|
||||
<div class="border d-flex">
|
||||
<div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
|
||||
<div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
|
||||
<div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align self
|
||||
|
||||
Use these classes to adjust the alignment of an individual flex item on the cross axis. This overrides any `align-items` property applied to the flex container.
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.flex-self-auto { align-self: auto; }
|
||||
.flex-self-start { align-self: flex-start; }
|
||||
.flex-self-end { align-self: flex-end; }
|
||||
.flex-self-center { align-self: center; }
|
||||
.flex-self-baseline { align-self: baseline; }
|
||||
.flex-self-stretch { align-self: stretch; }
|
||||
```
|
||||
|
||||
#### Classes
|
||||
|
||||
| Class | Description |
|
||||
| --- | --- |
|
||||
| `.flex-self-auto` | Inherit alignment from parent |
|
||||
| `.flex-self-start` | Align to the start of the cross axis |
|
||||
| `.flex-self-end` | Align to the end of the cross axis |
|
||||
| `.flex-self-center` | Align to center of cross axis |
|
||||
| `.flex-self-baseline` | Align baseline to the start of the cross axis |
|
||||
| `.flex-self-stretch` | Stretch item from start of cross axis to end of cross axis. |
|
||||
|
||||
#### flex-self-auto
|
||||
|
||||
```html
|
||||
<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 bg-gray-light"> </div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-self-start
|
||||
|
||||
```html
|
||||
<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 bg-gray-light"> </div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-self-end
|
||||
|
||||
```html
|
||||
<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 bg-gray-light"> </div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-self-center
|
||||
|
||||
```html
|
||||
<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 bg-gray-light"> </div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-self-baseline
|
||||
|
||||
```html
|
||||
<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 bg-gray-light f1">item</div>
|
||||
<div class="p-5 border bg-gray-light f00">item</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flex-self-stretch
|
||||
|
||||
```html
|
||||
<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 bg-gray-light"> </div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive flex utilities
|
||||
|
||||
All flexbox utilities can be adjust per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formulas:
|
||||
|
||||
- `d-[breakpoint]-[property]` for `display`
|
||||
- `flex-[breakpoint]-[property]-[behavior]` for various flex properties
|
||||
- `flex-[breakpoint]-item-equal` for equal width and equal height flex items
|
||||
|
||||
Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
#### Example classes
|
||||
|
||||
```css
|
||||
/* Example classes */
|
||||
|
||||
.d-sm-flex {}
|
||||
.d-md-inline-flex {}
|
||||
|
||||
.flex-lg-row {}
|
||||
.flex-xl-column {}
|
||||
|
||||
.flex-sm-wrap {}
|
||||
.flex-lg-nowrap {}
|
||||
|
||||
.flex-lg-self-start {}
|
||||
|
||||
.flex-md-item-equal {}
|
||||
```
|
||||
|
||||
#### Example usage
|
||||
|
||||
Mixing flex properties:
|
||||
|
||||
```html
|
||||
<div style="min-height: 150px;" class="border d-flex flex-items-start flex-md-items-center flex-justify-start flex-lg-justify-between">
|
||||
<div class="p-5 border bg-gray-light flex-md-self-stretch">.flex-self-stretch</div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
<div class="p-5 border bg-gray-light"> </div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Using the equal width, equal height utilities:
|
||||
|
||||
```html
|
||||
<div class="border d-flex">
|
||||
<div class="flex-md-item-equal p-3 border bg-gray-light">Stuff and things</div>
|
||||
<div class="flex-md-item-equal p-3 border bg-gray-light">More stuff<br> on multiple lines</div>
|
||||
<div class="flex-md-item-equal p-3 border bg-gray-light">Hi mom</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Example components
|
||||
|
||||
The flex utilities can be used to create a number of components. Here are some examples.
|
||||
|
||||
### Media object
|
||||
|
||||
You can use flex utilities to make a simple media object, like this:
|
||||
|
||||
```html
|
||||
<div class="border d-flex flex-items-center p-4">
|
||||
<div class="p-5 border bg-gray-light">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>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive media object
|
||||
|
||||
Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens.
|
||||
|
||||
```html
|
||||
<div class="border p-3 d-flex flex-column flex-md-row flex-md-items-center">
|
||||
<div class="pr-0 pr-md-3 mb-3 mb-md-0 d-flex flex-justify-center flex-md-justify-start">
|
||||
<img style="max-width:100px; max-height:100px;" src="/images/gravatars/gravatar-user-420.png" />
|
||||
</div>
|
||||
<div class="d-flex text-center text-md-left">
|
||||
<p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
|
||||
</div>
|
||||
<div class="ml-md-3 d-flex flex-justify-center">
|
||||
<%= octicon "mark-github", :height => '32' %>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Flexbox bugs
|
||||
|
||||
This section lists flexbox bugs that affect browsers we [currently support](.../styles#user-content-browser-support).
|
||||
|
||||
**1. Minimum content sizing of flex items not honored:** Some browsers don't respect flex item size. Instead of respecting the minimum content size, items shrink below their minimum size which can create some undesirable results, such as overflowing text. The workaround is to apply `flex-shrink: 0;` to the items using `d-flex`. This can be applied with the `flex-shrink-0` utility. For more information read [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored).
|
||||
290
modules/primer-utilities/docs/layout.md
Normal file
290
modules/primer-utilities/docs/layout.md
Normal file
@ -0,0 +1,290 @@
|
||||
---
|
||||
title: Layout
|
||||
status: Stable
|
||||
---
|
||||
|
||||
Change the document layout with display, float, alignment, and other utilities.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Display
|
||||
Adjust the display of an element with `.d-block`, `.d-none`, `.d-inline`, `.d-inline-block`, `.d-table`, `.d-table-cell` utilities.
|
||||
|
||||
```html
|
||||
<div class="d-inline border">
|
||||
.d-inline
|
||||
<div class="d-inline-block border">
|
||||
.d-inline-block
|
||||
</div>
|
||||
<span class="d-block border">.d-block</span>
|
||||
<div class="d-table border">
|
||||
<div class="d-table-cell border">
|
||||
.d-table-cell
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-table-cell border">
|
||||
.d-table-cell
|
||||
</div>
|
||||
<div class="d-none">
|
||||
.d-none
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
There are known issues with using `display:table` and wrapping long strings, particularly in Firefox. You may need to use `table-fixed` on elements with `d-table` and apply column widths to table cells, which you can do with our [column width styles](/styleguide/css/modules/grid#column-widths).
|
||||
|
||||
```html
|
||||
<div class="d-table table-fixed width-full">
|
||||
<div class="d-table-cell border">
|
||||
.d-table-cell
|
||||
</div>
|
||||
<div class="d-table-cell col-10 border">
|
||||
d-table-cell .col-10
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive display
|
||||
A selection of display utilities are able to be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). `.d-block`, `.d-none`, `.d-inline`, and `.d-inline-block` are available as responsive utilities using the following formula: `d-[breakpoint]-[property]`. For example: `d-md-inline-block`. Each responsive display utility is applied to the specified breakpoint and up.
|
||||
|
||||
In the following example, the `ul` element switches from `display: block` on mobile to `display: inline-block` at the `md` breakpoint, while the list items remain inline.
|
||||
|
||||
```html
|
||||
<h5 class="d-md-inline-block">.d-md-inline-block</h5>
|
||||
<ul class="d-md-inline-block border">
|
||||
<li class="d-inline border">.d-inline</li>
|
||||
<li class="d-inline border">.d-inline</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Responsive hide
|
||||
Hide utilities are able to be applied or changed per breakpoint using the following formula:<br /> `hide-[breakpoint]`, for example: `hide-sm`. Hide utilities act differently from other responsive styles and are applied to each **breakpoint-range only**.
|
||||
|
||||
| Shorthand | Range |
|
||||
| --- | --- |
|
||||
| -sm | 0—544px |
|
||||
| -md | 544px—768px |
|
||||
| -lg | 768px—1004px |
|
||||
| -xl | 1004px and above |
|
||||
|
||||
```html
|
||||
<div>
|
||||
<h3>Potato update</h3>
|
||||
<span class="hide-sm hide-md">Opened by <a href="#url">broccolini</a></span>
|
||||
<span class="d-md-none">Updated</span> 3 hours ago
|
||||
</div>
|
||||
```
|
||||
|
||||
### Text direction
|
||||
`.direction-ltr` or `.direction-rtl` can be used to change the text direction. This is especially helpful when paired with `.d-table`, `.d-table-cell`, and `.v-align-middle` to create equal height, vertically centered, alternating content.
|
||||
|
||||
## Visibility
|
||||
Adjust the visibility of an element with `.v-hidden` and `.v-visible`.
|
||||
|
||||
## Overflow
|
||||
Adjust element overflow with `.overflow-hidden`, `.overflow-scroll`, and `.overflow-auto`. `.overflow-hidden` can also be used to create a new [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) or clear floats.
|
||||
|
||||
## Floats
|
||||
Use `.float-left` and `.float-right` to set floats, and `.clearfix` to clear.
|
||||
```html
|
||||
<div class="clearfix border border-gray">
|
||||
<div class="float-left border border-gray">
|
||||
.float-left
|
||||
</div>
|
||||
<div class="float-right border border-gray">
|
||||
.float-right
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
### Responsive floats
|
||||
Float utilities can be applied or changed per [breakpoint](/styleguide/css/modules/grid#breakpoints). This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
|
||||
|
||||
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
|
||||
<div class="clearfix border border-gray">
|
||||
<div class="float-md-left border border-gray">
|
||||
.float-md-left
|
||||
</div>
|
||||
<div class="float-md-right border border-gray">
|
||||
.float-md-right
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Alignment
|
||||
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
|
||||
<div class="d-table border border-gray">
|
||||
<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-top">.v-align-top</div>
|
||||
<div class="d-table-cell v-align-middle">.v-align-middle</div>
|
||||
<div class="d-table-cell v-align-bottom">.v-align-bottom</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
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
|
||||
<div class="border border-gray">
|
||||
<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-bottom mr-1">.v-align-text-bottom</span>
|
||||
</h1>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Width and height
|
||||
|
||||
Use `.width-fit` to set max-width 100%.
|
||||
|
||||
```html
|
||||
<div class="one-fourth column">
|
||||
<img class="width-fit bg-gray" src="/images/gravatars/gravatar-user-420.png" alt="width fitted octocat" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.width-full` to set width to 100%.
|
||||
|
||||
```html
|
||||
<div class="d-table width-full">
|
||||
<div class="d-table-cell">
|
||||
<input class="form-control width-full" type="text" value="Full width form field" aria-label="Sample full width form field">
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.height-full` to set height to 100%.
|
||||
|
||||
```html
|
||||
<div class="d-table border border-gray">
|
||||
<div class="d-table-cell height-full v-align-middle pl-3">
|
||||
<%= octicon "three-bars" %>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
Bacon ipsum dolor amet meatball flank beef tail pig boudin ham hock chicken capicola. Shoulder ham spare ribs turducken pork tongue. Bresaola corned beef sausage jowl ribeye kielbasa tenderloin andouille leberkas tongue. Ribeye tri-tip tenderloin pig, chuck ground round chicken tongue corned beef biltong.
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Position
|
||||
Position utilities can be used to alter the default document flow. **Be careful when using positioning, it's often unnecessary and commonly misused.**
|
||||
|
||||
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._
|
||||
```html
|
||||
<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
|
||||
One
|
||||
</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;">
|
||||
Two
|
||||
</div>
|
||||
<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
|
||||
Three
|
||||
</div>
|
||||
<div class="d-inline-block float-left bg-blue text-white m-3" style="width:100px; height:100px;">
|
||||
Four
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.position-absolute` to take elements out of the normal document flow.
|
||||
|
||||
```html
|
||||
<div class="position-relative" style="height:116px;">
|
||||
<button type="button" class="btn btn-secondary mb-1">Button</button>
|
||||
<div class="position-absolute border border-gray p-2">
|
||||
<a href="#url" class="d-block p-1">Mashed potatoes</a>
|
||||
<a href="#url" class="d-block p-1">Fries</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.**
|
||||
|
||||
_Note: fixed positioning has been disabled here for demonstration only._
|
||||
|
||||
```html
|
||||
<div class="position-fixed bg-gray-light border-bottom border-gray p-3">
|
||||
.position-fixed
|
||||
</div>
|
||||
```
|
||||
|
||||
Use `top-0`, `right-0`, `bottom-0`, and `left-0` with `position-absolute`, `position-fixed`, or `position-relative` to further specify an elements position.
|
||||
|
||||
```html
|
||||
<div style="height: 64px;">
|
||||
<div class="border position-absolute top-0 left-0">
|
||||
.top-0 .left-0
|
||||
</div>
|
||||
<div class="border position-absolute top-0 right-0">
|
||||
.top-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 right-0">
|
||||
.bottom-0 .right-0
|
||||
</div>
|
||||
<div class="border position-absolute bottom-0 left-0">
|
||||
.bottom-0 .left-0
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
To fill an entire width or height, use opposing directions.
|
||||
|
||||
_Note: fixed positioning has been disabled here for demonstration only._
|
||||
|
||||
```html
|
||||
<div class="position-fixed left-0 right-0 p-3 bg-gray-dark text-white">
|
||||
.position-fixed .left-0 .right-0
|
||||
</div>
|
||||
```
|
||||
|
||||
### Screen reader only
|
||||
|
||||
Use `.sr-only` to position an element outside of the viewport for screen reader access only. **Even though the element can't be seen, make sure it still has a sensible tab order.**
|
||||
|
||||
```html
|
||||
<div class="js-details-container Details">
|
||||
<button type="button" class="btn">Tab once from this button, and press enter</button>
|
||||
<button type="button" class="sr-only js-details-target">
|
||||
Screen reader only button
|
||||
</button>
|
||||
<div class="Details-content--hidden">
|
||||
Button activated!
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## The media object
|
||||
|
||||
Create a media object with utilities.
|
||||
|
||||
```html
|
||||
<div class="clearfix p-3 border">
|
||||
<div class="float-left p-3 mr-3 bg-gray">
|
||||
Image
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p><b>Body</b> Bacon ipsum dolor amet shankle rump tenderloin pork chop meatball strip steak bresaola doner sirloin capicola biltong shank pig. Alcatra frankfurter ham hock, ribeye prosciutto hamburger kevin brisket chuck burgdoggen short loin.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Create a double-sided media object for a container with a flexible center.
|
||||
|
||||
```html
|
||||
<div class="clearfix p-3 border border-gray">
|
||||
<div class="float-left p-3 mr-3 bg-gray">
|
||||
Image
|
||||
</div>
|
||||
<div class="float-right p-3 ml-3 bg-gray">
|
||||
Image
|
||||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<p><b>Body</b> Bacon ipsum dolor amet shankle rump tenderloin pork chop meatball strip steak bresaola doner sirloin capicola biltong shank pig. Alcatra frankfurter ham hock, ribeye prosciutto hamburger kevin brisket chuck burgdoggen short loin.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
You can also create a media object with [flexbox utilities](./flexbox#media-object) instead of floats which can be useful for changing the vertical alignment.
|
||||
126
modules/primer-utilities/docs/margin.md
Normal file
126
modules/primer-utilities/docs/margin.md
Normal file
@ -0,0 +1,126 @@
|
||||
---
|
||||
title: Margin
|
||||
status: Stable
|
||||
---
|
||||
|
||||
Margin utilities are based on a global [spacing scale](/styleguide/css/styles/core/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that share the same properties, and allows to achieve many different page layouts using the same styles.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Naming convention
|
||||
|
||||
Since margin utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
|
||||
|
||||
|
||||
| Shorthand | Description |
|
||||
| --- | --- |
|
||||
| m | margin |
|
||||
| t | top |
|
||||
| r | right |
|
||||
| b | bottom |
|
||||
| l | left |
|
||||
| x | horizontal, left & right |
|
||||
| y | vertical, top & bottom |
|
||||
| 0 | 0 |
|
||||
| 1 | 4px |
|
||||
| 2 | 8px |
|
||||
| 3 | 16px |
|
||||
| 4 | 24px |
|
||||
| 5 | 32px |
|
||||
| 6 | 40px |
|
||||
|
||||
_**Note:** The blue in the examples represents the element, and the orange represents the margin_
|
||||
|
||||
## Uniform spacing
|
||||
|
||||
Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.
|
||||
|
||||
```html
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-0">.m-0</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-1">.m-1</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-2">.m-2</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-3">.m-3</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-4">.m-4</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-5">.m-5</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue m-6">.m-6</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Directional spacing
|
||||
|
||||
Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6.
|
||||
|
||||
```html
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue mt-3">.mt-3</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue mr-3">.mr-3</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue mb-3">.mb-3</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue ml-3">.ml-3</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue my-3">.my-3</div>
|
||||
</div>
|
||||
<div class="margin-orange d-inline-block">
|
||||
<div class="d-inline-block block-blue mx-3">.mx-3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Center elements
|
||||
|
||||
Use `mx-auto`to center block elements with a set width.
|
||||
|
||||
```html
|
||||
<div class="margin-orange">
|
||||
<div class="block-blue mx-auto text-center" style="width: 5rem;">.mx-auto</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Reset margins
|
||||
Reset margins built into typography elements or other components with `m-0`, `mt-0`, `mr-0`, `mb-0`, `ml-0`, `mx-0`, and `my-0`.
|
||||
|
||||
```html
|
||||
<p class="mb-0 block-blue">No bottom margin on this paragraph.</p>
|
||||
```
|
||||
|
||||
## Responsive margins
|
||||
|
||||
All margin utilities, except `mx-auto`, can be adjusted per [breakpoint](/styleguide/css/modules/grid#breakpoints) using the following formula: `m[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html
|
||||
<div class="d-inline-block margin-orange">
|
||||
<div class="mx-sm-2 mx-lg-4 d-inline-block block-blue">
|
||||
.mx-sm-2 .mx-lg-4
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Negative margins
|
||||
|
||||
You can add negative margins to the top, right, bottom, or left of an item by adding a negative margin utility. The formula for this is: `m[direction]-n[spacer]`. This also works responsively, with the following formula: `m[direction]-[breakpoint]-n[spacer]`.
|
||||
|
||||
```html
|
||||
<div class="d-inline-block margin-orange p-3">
|
||||
<div class="d-inline-block block-blue mt-n4 mr-lg-n4">
|
||||
.mt-n4 .mr-lg-n6
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
110
modules/primer-utilities/docs/padding.md
Normal file
110
modules/primer-utilities/docs/padding.md
Normal file
@ -0,0 +1,110 @@
|
||||
---
|
||||
title: Padding
|
||||
status: Stable
|
||||
---
|
||||
|
||||
Padding utilities are based on a global [spacing scale](/styleguide/css/styles/core/support/spacing) which helps keep horizontal and vertical spacing consistent. These utilities help us reduce the amount of custom CSS that could share the same properties, and allows to achieve many different page layouts using the same styles.
|
||||
|
||||
{:toc}
|
||||
|
||||
## Shorthand
|
||||
|
||||
Since padding utilities have many variations and will be used in many places, we use a shorthand naming convention to help keep class names succinct.
|
||||
|
||||
| Shorthand | Description |
|
||||
| --- | --- |
|
||||
| p | padding |
|
||||
| t | top |
|
||||
| r | right |
|
||||
| b | bottom |
|
||||
| l | left |
|
||||
| x | horizontal, left & right |
|
||||
| y | vertical, top & bottom |
|
||||
| 0 | 0 |
|
||||
| 1 | 4px |
|
||||
| 2 | 8px |
|
||||
| 3 | 16px |
|
||||
| 4 | 24px |
|
||||
| 5 | 32px |
|
||||
| 6 | 40px |
|
||||
|
||||
_**Note:** The blue in the examples below represents the element, and the green represents the padding._
|
||||
|
||||
## Uniform spacing
|
||||
|
||||
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
|
||||
<div class="padding-green d-inline-block p-0">
|
||||
<div class="d-inline-block block-blue">.p-0</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block p-1">
|
||||
<div class="d-inline-block block-blue">.p-1</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block p-2">
|
||||
<div class="d-inline-block block-blue">.p-2</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block p-3">
|
||||
<div class="d-inline-block block-blue">.p-3</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block p-4">
|
||||
<div class="d-inline-block block-blue">.p-4</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block p-5">
|
||||
<div class="d-inline-block block-blue">.p-5</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block p-6">
|
||||
<div class="d-inline-block block-blue">.p-6</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Directional spacing
|
||||
|
||||
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
|
||||
<div class="padding-green d-inline-block pt-3">
|
||||
<div class="d-inline-block block-blue">.pt-3</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block pr-3">
|
||||
<div class="d-inline-block block-blue">.pr-3</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block pb-3">
|
||||
<div class="d-inline-block block-blue">.pb-3</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block pl-3">
|
||||
<div class="d-inline-block block-blue">.pl-3</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block py-3">
|
||||
<div class="d-inline-block block-blue">.py-3</div>
|
||||
</div>
|
||||
<div class="padding-green d-inline-block px-3">
|
||||
<div class="d-inline-block block-blue">.px-3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive padding
|
||||
|
||||
All padding utilities can be adjusted per [breakpoint](/styleguide/css/styles/core/support/breakpoints) using the following formula: <br /> `p-[direction]-[breakpoint]-[spacer]`. Each responsive style is applied to the specified breakpoint and up.
|
||||
|
||||
```html
|
||||
<div class="px-sm-2 px-lg-4 d-inline-block padding-green">
|
||||
<div class="d-inline-block block-blue">
|
||||
.px-sm-2 .px-lg-4
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive container padding
|
||||
|
||||
`.p-responsive` is a padding class that adds padding on the left and right sides of an element. On small screens, it gives the element padding of `$spacer-3`, on mid-sized screens it gives the element padding of `$spacer-6`, and on large screens, it gives the element padding of `$spacer-3`.
|
||||
|
||||
It is intended to be used with [container styles](/styleguide/css/styles/core/objects/grid#containers)
|
||||
|
||||
```html
|
||||
<div class="container-lg p-responsive">
|
||||
<div class="border">
|
||||
.container-lg .p-responsive
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
138
modules/primer-utilities/docs/typography.md
Normal file
138
modules/primer-utilities/docs/typography.md
Normal file
@ -0,0 +1,138 @@
|
||||
---
|
||||
title: Typography
|
||||
status: Stable
|
||||
---
|
||||
|
||||
Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/styleguide/css/styles/core/support/typography#typography-variables) that you can use in components or custom CSS.
|
||||
|
||||
{:toc}
|
||||
|
||||
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/styleguide/css/styles/core/support/breakpoints) to be larger on desktop.
|
||||
|
||||
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 00 | 40px | 48px | 60 | 72 |
|
||||
| 0 | 32px | 40px | 50 | 60 |
|
||||
| 1 | 26px | 32px | 40 | 48 |
|
||||
| 2 | 22px | 24px | 30 | 36 |
|
||||
| 3 | 18px | 20px | 25 | 30 |
|
||||
| 4 | 16px | 16px | 20 | 24 |
|
||||
| 5 | 14px | 14px | 17.5 | 21 |
|
||||
| 6 | 12px | 12px | 15 | 18 |
|
||||
|
||||
|
||||
## Heading utilities
|
||||
|
||||
Use `.h1` – `.h6` to change an elements font size and weight to match our heading styles.
|
||||
|
||||
```html
|
||||
<p class="h1">Pizza 1</p>
|
||||
<p class="h2">Pizza 2</p>
|
||||
<p class="h3">Pizza 3</p>
|
||||
<p class="h4">Pizza 4</p>
|
||||
<p class="h5">Pizza 5</p>
|
||||
<p class="h6">Pizza 6</p>
|
||||
```
|
||||
|
||||
These are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.
|
||||
|
||||
```html
|
||||
<h2 class="h1">Looks like a heading 1, semantically a heading 2</h2>
|
||||
```
|
||||
|
||||
## Type scale utilities
|
||||
|
||||
Use `.f1` – `.f6` to change an elements font size while keeping inline with our type scale.
|
||||
|
||||
```html
|
||||
<p class="f1">Focaccia</p>
|
||||
<p class="f2">Focaccia</p>
|
||||
<p class="f3">Focaccia</p>
|
||||
<p class="f4">Focaccia</p>
|
||||
<p class="f5">Focaccia</p>
|
||||
<p class="f6">Focaccia</p>
|
||||
```
|
||||
|
||||
Lighter font-weight utilities are available in a limited range. Lighter font-weights reduce the legibility of text, particularly at small font sizes, so the scale only goes down to `f3` at 20px. The larger sizes`f0` and `f00` allow for lighter and larger type that is in keeping with our marketing styles.
|
||||
|
||||
```html
|
||||
<h1 class="f00-light">Potato chips</h1>
|
||||
<h1 class="f0-light">Potato chips</h1>
|
||||
<h1 class="f1-light">Potato chips</h1>
|
||||
<h1 class="f2-light">Potato chips</h1>
|
||||
<h1 class="f3-light">Potato chips</h1>
|
||||
```
|
||||
|
||||
## Line height styles
|
||||
Change the line height density with these utilities.
|
||||
|
||||
```html
|
||||
<p class="lh-default">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
<p class="lh-condensed">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
<p class="lh-condensed-ultra">
|
||||
Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
|
||||
</p>
|
||||
```
|
||||
|
||||
## Typographic styles
|
||||
Change the font weight, styles, and alignment with these utilities.
|
||||
|
||||
```html
|
||||
<p class="text-normal">Normal</p>
|
||||
<p class="text-italic">Italic</p>
|
||||
<p class="text-bold">Bold</p>
|
||||
<p class="text-uppercase">Uppercase</p>
|
||||
<p class="no-wrap">No wrap</p>
|
||||
<p class="ws-normal">Normal whitespace</p>
|
||||
<p class="wb-break-all">Line break long lines</p>
|
||||
<p class="no-underline">No underline</p>
|
||||
<p class="text-emphasized">Emphasized</p>
|
||||
<p class="text-small">Small</p>
|
||||
<p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
|
||||
```
|
||||
|
||||
## Text alignment
|
||||
|
||||
Use text alignment utilities to left align, center, or right align text.
|
||||
|
||||
```html
|
||||
<p class="text-left">Left align</p>
|
||||
<p class="text-center">Center</p>
|
||||
<p class="text-right">Right align</p>
|
||||
```
|
||||
## Responsive text alignment
|
||||
|
||||
Use the following formula to make a text alignment utility responsive: `.text-[breakpoint]-[alignment]`
|
||||
|
||||
```html
|
||||
<p class="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
|
||||
```
|
||||
|
||||
## List styles
|
||||
|
||||
Remove bullets from an unordered list or numbers from an ordered list by applying `.list-style-none` to the `<ul>`.
|
||||
|
||||
```html
|
||||
<ul class="list-style-none">
|
||||
<li>First list item</li>
|
||||
<li>Second list item</li>
|
||||
<li>Third list item</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Text Shadows
|
||||
|
||||
Text shadows can be used to help readability and to add some depth on colored backgrounds.
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user