- {{site.title}} -

- A free visual guide to CSS -

- Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples. -

+ {{site.title}} +

+ {% include carbon.html %} +

+ {{site.subtitle}} +

+ Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples. +

+ +

- +

+ +

- - +

{% include modals/share.html %} {% include google-fonts.html %} diff --git a/sass/base.sass b/sass/base.sass index 472f89e9..3d727369 100644 --- a/sass/base.sass +++ b/sass/base.sass @@ -57,7 +57,14 @@ html background: $primary color: $primary-invert +.container + margin-left: auto + margin-right: auto + max-width: 700px + +desktop html font-size: 18px padding-left: $menu-width + &.is-index + padding-left: 0 diff --git a/sass/footer.sass b/sass/footer.sass index 22be725c..0c1c1c4f 100644 --- a/sass/footer.sass +++ b/sass/footer.sass @@ -43,7 +43,7 @@ .footer-share-label margin-right: 0.25rem -.footer-share-button +.share-button align-items: center display: flex height: 2rem @@ -52,7 +52,7 @@ width: 2rem &:before +overlay - background: $background + background: rgba(black, 0.14) border-radius: 5px content: "" display: block diff --git a/sass/header.sass b/sass/header.sass index 0ebaaef6..50dfe758 100644 --- a/sass/header.sass +++ b/sass/header.sass @@ -1,77 +1,79 @@ -$gradient-start: lighten(adjust-hue($primary, -10deg), 10%) -$gradient-end: lighten(adjust-hue($primary, 10deg), 5%) -$gradient-top: linear-gradient(135deg, $gradient-start 20%, transparent 20%, transparent 80%, $gradient-end 80%) -$gradient-bottom: linear-gradient($primary, lighten($primary, 5%)) - .header - align-items: center - background: $plum - color: $plum-dark - display: flex - justify-content: flex-start - padding: 3rem 2rem - position: relative - text-align: left - -$height: 96px -$width: 486px + background-color: $background .header-figure - background-image: url("../images/css-reference-title.png") - background-position: center center - background-repeat: no-repeat - background-size: $width $height - display: inline-block - height: $height - overflow: hidden - text-indent: -290486px - vertical-align: top - width: $width - @media (max-width: 600px) - background-size: ($width / 2) ($height / 2) - height: $height / 2 - width: $width / 2 + display: flex + img:first-child + height: 128px + width: 128px + +.header-carbon + background-color: white + border-radius: 5px + box-shadow: 0 0 1rem rgba(#000, 0.2) + display: flex + flex-shrink: 0 + width: 240px + #huggingFace .header-title - color: $plum-invert - font-size: 1.4rem - font-weight: $weight-bold - margin-top: 2rem - text-shadow: 0 2px 4px rgba(#000, 0.1) + color: $text-strong + font-size: 1.2rem + font-weight: bold + line-height: 1.2 + margin-bottom: 0.5rem .header-subtitle - color: $plum-light - max-width: 40em + line-height: 1.6rem a - border-bottom: 1px solid rgba($plum-light, 0.2) - color: $plum-light - &:hover - border-bottom-color: $plum-light - color: $plum-light - strong - color: $plum-light + color: inherit + strong:first-child + color: $primary -.back +.header-share align-items: center - background: $link - color: $link-invert display: flex - font-size: 0.8rem - justify-content: flex-start - padding: 1rem 1.2rem - strong - color: inherit - margin-left: 1em - &:hover - background: $alpha - color: $plum - .icon:before, - .icon:after - background: $plum + justify-content: center + .share-button + height: 48px + width: 48px + svg + height: 24px + width: 24px + ++mobile + .header + padding: 30px + .header-figure + align-items: center + flex-direction: column + justify-content: center + margin-bottom: 30px + img:last-child + height: 40px + .header-carbon + justify-content: center + margin: 0 auto 2rem + .header-subtitle + margin-top: 10px +desktop .header + padding: 60px 60px 30px + .header-figure + align-items: center justify-content: center - min-height: 400px - padding: 4rem - text-align: center + margin-bottom: 30px + img:last-child + height: 80px + margin-left: 20px + .header-carbon + margin-left: 1rem + margin-right: 2rem + .header-content + align-items: center + display: flex + .header-text + margin-right: 2rem + .header-share + justify-content: flex-start diff --git a/sass/index.sass b/sass/index.sass new file mode 100644 index 00000000..c6c5281e --- /dev/null +++ b/sass/index.sass @@ -0,0 +1,24 @@ +.index-collections + display: flex + flex-wrap: wrap + line-height: 1.2 + a, + strong + border-radius: 2px + padding: 3px 6px + a + &:hover + background: $primary + color: $primary-invert + ++mobile + .index-collections + padding: 1rem 1rem 0 + ++desktop + .index-collections + border-bottom: 1px solid $border + justify-content: center + padding: 1rem + strong + padding-left: 0 diff --git a/sass/menu.sass b/sass/menu.sass index cd74997b..2aced94b 100644 --- a/sass/menu.sass +++ b/sass/menu.sass @@ -151,14 +151,15 @@ .menu-hello background: #fff - min-height: 218px + #huggingFace + background: #fff #huggingFace - background: #fff color: $text-strong display: none font-size: 16px line-height: 1.4 + min-height: 218px padding: 1.5rem padding-bottom: 1rem img @@ -170,6 +171,7 @@ position: relative &:before background: hsl(171, 100%, 81%) + background: $primary bottom: 0 content: "" height: 2px @@ -201,7 +203,8 @@ color: $text-light padding: 0.5rem 1rem 1rem &:hover - background: $background + .carbon-wrap a:last-child + text-decoration: underline #placeholder display: block @@ -279,7 +282,10 @@ display: flex flex-grow: 1 flex-shrink: 1 + .menu-search input + font-size: 0.8rem .menu-list .menu-link + font-size: 0.8rem padding: 0.25rem 1rem .menu-hello background: #fff diff --git a/sass/tooltip.sass b/sass/tooltip.sass index ad8c0b11..64afc077 100644 --- a/sass/tooltip.sass +++ b/sass/tooltip.sass @@ -1,7 +1,9 @@ [data-tooltip] + cursor: pointer position: relative -[data-tooltip]:before +[data-tooltip]:before, +[data-tooltip-after]:after background-color: $text-strong border-radius: 2px bottom: 100% @@ -9,6 +11,7 @@ content: attr(data-tooltip) font-family: $family-primary font-size: 0.6rem + font-weight: 400 left: 50% line-height: 1.2 opacity: 0 @@ -22,7 +25,11 @@ visibility: hidden white-space: nowrap -[data-tooltip]:hover:before +[data-tooltip-after]:after + content: attr(data-tooltip-after) + +[data-tooltip]:hover:before, +[data-tooltip-after]:hover:after opacity: 1 transform: translateX(-50%) translateY(-4px) visibility: visible From 2cc7d32bb97fd39bbc8d09cc0d5aaf267c8da6cb Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 18 Feb 2017 10:42:23 +0000 Subject: [PATCH 2/4] Add finder --- _includes/collections/animations-list.html | 2 +- _includes/collections/backgrounds-list.html | 2 +- _includes/collections/backgrounds.html | 2 +- _includes/collections/box-model-list.html | 2 +- _includes/collections/box-model.html | 2 +- _includes/collections/flexbox-list.html | 2 +- _includes/collections/positioning-list.html | 2 +- _includes/collections/transitions-list.html | 2 +- _includes/collections/typography-list.html | 2 +- _includes/collections/typography.html | 2 +- _includes/components/finder.html | 133 ++++++++++ _includes/lists/finder-list.html | 1 + _includes/lists/menu-list.html | 2 +- css/website.css | 114 ++++++++- css/website.sass | 1 + index.html | 1 + javascript/main.js | 269 ++++++++++---------- property/background-attachment/index.html | 1 + property/box-shadow/index.html | 1 + property/box-sizing/index.html | 1 + property/color/index.html | 1 + property/opacity/index.html | 1 + property/text-overflow/index.html | 1 + property/word-break/index.html | 1 + sass/finder.sass | 94 +++++++ sass/header.sass | 1 + sass/menu.sass | 16 +- sass/variables.sass | 4 +- 28 files changed, 498 insertions(+), 165 deletions(-) create mode 100644 _includes/components/finder.html create mode 100644 _includes/lists/finder-list.html create mode 100644 sass/finder.sass diff --git a/_includes/collections/animations-list.html b/_includes/collections/animations-list.html index ca1abde5..dab5e5f4 100644 --- a/_includes/collections/animations-list.html +++ b/_includes/collections/animations-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/collections/backgrounds-list.html b/_includes/collections/backgrounds-list.html index 23625889..080123dd 100644 --- a/_includes/collections/backgrounds-list.html +++ b/_includes/collections/backgrounds-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/collections/backgrounds.html b/_includes/collections/backgrounds.html index 2b32491e..76dc8ed3 100644 --- a/_includes/collections/backgrounds.html +++ b/_includes/collections/backgrounds.html @@ -1 +1 @@ -

#background-attachment

Defines how the background image will behave when scrolling the page.

default background-attachment: scroll;

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

background-attachment: fixed;

The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.

#background-clip

Defines how far the background should extend within the element.

default background-clip: border-box;

The background extends completely throughout the element, even under the border.

background-clip: padding-box;

The background only extends to the edge of the border: it includes the padding but not the border.

background-clip: content-box;

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

#background-color

Defines the color of the element's background.

default background-color: transparent;

By default, the background color is transparent, basically meaning that there is no background color.

background-color: red;

You can use one of the 140+ color names.

background-color: #05ffb0;

You can use hexadecimal color codes.

background-color: rgb(50, 115, 220);

You can use rgb() color codes:

the first value is for red
the second value is for green
the third value is for blue

Each of them can have a value between 0 and 255.

background-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

the first 3 values are for rgb
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

background-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

the first value is for hue and can go from 0 to 359
the second value is for saturation and go from 0% to 100%
the third value is for luminosity and go from 0% to 100%

background-color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

the first 3 values are for hsl
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

#background-image

Defines an image as the background of the element.

default background-image: none;

Removes any background image.

background-image: url(/images/jt.png);

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

background-image: linear-gradient(red, blue);

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

background-image: linear-gradient(45deg, red, blue);

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

background-image: radial-gradient(green, purple);

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at the edges.

background-image: radial-gradient(circle, green, purple);

You can specify the shape of the radial gradient: circle or ellipse (default).

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

You can specify color stops using percentage values.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

You can specify where the gradient should end:

closest-side
closest-corner
farthest-side
farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

Like with the background-position, you can specify the position of the gradient.

#background-origin

Defines the origin of the background image.

default background-origin: padding-box;

The background image starts at the edge of the border: within padding but not the border.

background-origin: border-box;

The background image starts under the border.

background-origin: content-box;

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

#background-position

Defines the position of the background image.

default background-position: 0% 0%;

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

background-position: bottom right;

You can use a combination of position keywords: center, top, bottom, left and right.

background-position: center center;

The background image will be positioned in the center of the element.

#background-repeat

Defines how the background image repeats itself across the element's background, starting from the background position.

default background-repeat: repeat;

The background image will repeat itself both horizontally and vertically.

background-repeat: repeat-x;

The background image will only repeat itself horizontally.

background-repeat: repeat-y;

The background image will only repeat itself vertically.

background-repeat: no-repeat;

The background image will only appear once.

#background-size

Defines the size of the background image.

default background-size: auto auto;

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

background-size: 120px 80px;

You can specify a size in pixels:

the first value is the horizontal size
the second is the vertical size

background-size: 100% 50%;

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

background-size: contain;

The keyword contain will resize the background image to make sure it remains fully visible.

background-size: cover;

The keyword cover will resize the background image to make sure the element is fully covered.

#background

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.

\ No newline at end of file +

#background-attachment

Defines how the background image will behave when scrolling the page.

default background-attachment: scroll;

The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.

background-attachment: fixed;

#background-clip

Defines how far the background should extend within the element.

default background-clip: border-box;

The background extends completely throughout the element, even under the border.

background-clip: padding-box;

The background only extends to the edge of the border: it includes the padding but not the border.

background-clip: content-box;

The background only extends to the edge of the content: it doesn't include the padding, nor the border.

#background-color

Defines the color of the element's background.

default background-color: transparent;

By default, the background color is transparent, basically meaning that there is no background color.

background-color: red;

You can use one of the 140+ color names.

background-color: #05ffb0;

You can use hexadecimal color codes.

background-color: rgb(50, 115, 220);

You can use rgb() color codes:

the first value is for red
the second value is for green
the third value is for blue

Each of them can have a value between 0 and 255.

background-color: rgba(50, 115, 220, 0.3);

You can use rgba() color codes:

the first 3 values are for rgb
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

background-color: hsl(14, 100%, 53%);

You can use hsl() color codes:

the first value is for hue and can go from 0 to 359
the second value is for saturation and go from 0% to 100%
the third value is for luminosity and go from 0% to 100%

background-color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

the first 3 values are for hsl
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

#background-image

Defines an image as the background of the element.

default background-image: none;

Removes any background image.

background-image: url(/images/jt.png);

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).

background-image: linear-gradient(red, blue);

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

background-image: linear-gradient(45deg, red, blue);

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

background-image: radial-gradient(green, purple);

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at the edges.

background-image: radial-gradient(circle, green, purple);

You can specify the shape of the radial gradient: circle or ellipse (default).

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

You can specify color stops using percentage values.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

You can specify where the gradient should end:

closest-side
closest-corner
farthest-side
farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

Like with the background-position, you can specify the position of the gradient.

#background-origin

Defines the origin of the background image.

default background-origin: padding-box;

The background image starts at the edge of the border: within padding but not the border.

background-origin: border-box;

The background image starts under the border.

background-origin: content-box;

The background image only starts at the edge of the content: it doesn't include the padding, nor the border.

#background-position

Defines the position of the background image.

default background-position: 0% 0%;

The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.

background-position: bottom right;

You can use a combination of position keywords: center, top, bottom, left and right.

background-position: center center;

The background image will be positioned in the center of the element.

#background-repeat

Defines how the background image repeats itself across the element's background, starting from the background position.

default background-repeat: repeat;

The background image will repeat itself both horizontally and vertically.

background-repeat: repeat-x;

The background image will only repeat itself horizontally.

background-repeat: repeat-y;

The background image will only repeat itself vertically.

background-repeat: no-repeat;

The background image will only appear once.

#background-size

Defines the size of the background image.

default background-size: auto auto;

The background image will retain its original size.

For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.

background-size: 120px 80px;

You can specify a size in pixels:

the first value is the horizontal size
the second is the vertical size

background-size: 100% 50%;

You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.

background-size: contain;

The keyword contain will resize the background image to make sure it remains fully visible.

background-size: cover;

The keyword cover will resize the background image to make sure the element is fully covered.

#background

Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.

\ No newline at end of file diff --git a/_includes/collections/box-model-list.html b/_includes/collections/box-model-list.html index 38b9b512..4aa84ce0 100644 --- a/_includes/collections/box-model-list.html +++ b/_includes/collections/box-model-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/collections/box-model.html b/_includes/collections/box-model.html index 32c9f42e..a0897500 100644 --- a/_includes/collections/box-model.html +++ b/_includes/collections/box-model.html @@ -1 +1 @@ -

#border-bottom-width

Like border-width, but for the bottom border only.

default border-bottom-width: 0;

Removes the bottom border.

border-bottom-width: 4px;

You can use pixel values.

#border-left-width

Like border-width, but for the left border only.

default border-left-width: 0;

Removes the left border.

border-left-width: 4px;

You can use pixel values.

#border-right-width

Like border-width, but for the right border only.

default border-right-width: 0;

Removes the right border.

border-right-width: 4px;

You can use pixel values.

#border-top-width

Like border-width, but for the top border only.

default border-top-width: 0;

Removes the top border.

border-top-width: 4px;

You can use pixel values.

#border-width

Defines the width of the element's borders.

border-width: 1px;

Defines the width of all borders to 1px.

border-width: 2px 0;

Defines the top and bottom borders to 2px, the left and right to 0.

#box-sizing

Defines how the width and height of the element are calculated: whether they include the padding and borders or not.

default box-sizing: content-box;

The width and height of the element only apply to the content of the element.

For example, this element has

border-width: 12px
padding: 30px
width: 200px

The full width is 24px + 60px + 200px = 284px.

The content has the defined width. The box accomodates for those dimensions.

box-sizing: border-box;

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

For example, this element has

border-width: 12px
padding: 30px
width: 200px

The full width is 200px, no matter what.

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 60px - 24px = 116px.

#height

Defines the height of the element.

default height: auto;

The element will automatically adjust its height to allow its content to be displayed correctly.

height: 100px;

You can use numeric values like pixels, (r)em, percentages...

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

#line-height

Defines the height of a single line of text.

default line-height: normal;

Reverts to the default value of the browser.

recommended line-height: 1.6;

You can use unitless values: the line height will be relative to the font size.

line-height: 30px;

You can use pixel values.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font size.

#margin-bottom

Defines the space outside the element, on the bottom side.

default margin-bottom: 0;

Removes any margin at the bottom.

margin-bottom: 30px;

You can use pixel values.

margin-bottom: 2em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-bottom: 10%;

You can use percentage values.
The percentage is based on the width of the container.

#margin-left

Defines the space outside the element, on the left side.

default margin-left: 0;

Removes any margin on the left.

margin-left: 50px;

You can use pixel values.

margin-left: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-left: 30%;

You can use percentage values.
The percentage is based on the width of the container.

margin-left: auto;

The auto keyword will give the left side a share of the remaining space.

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

#margin-right

Defines the space outside the element, on the right side.

default margin-right: 0;

Removes any margin on the right.

margin-right: 50px;

You can use pixel values.

margin-right: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-right: 30%;

You can use percentage values.
The percentage is based on the width of the container.

margin-right: auto;

The auto keyword will give the right side a share of the remaining space.

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

#margin-top

Defines the space outside the element, on the top side.

default margin-top: 0;

Removes any margin at the top.

margin-top: 30px;

You can use pixel values.

margin-top: 2em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-top: 10%;

You can use percentage values.
The percentage is based on the width of the container.

#margin

Shorthand property for margin-top margin-right margin-bottom and margin-left.

default margin: 0;

Removes all margins.

margin: 30px;

When using 1 value, the margin is set for all 4 sides.

margin: 30px 60px;

When using 2 values:

the first value is for top/bottom
the second value is for right/left

To remember the order think about the values you haven't defined.

If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.

margin: 30px 60px 45px;

When using 3 values:

the first value is for top
the second value is for right/left
the third value is for bottom

To remember the order think about the values you haven't defined.

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

margin: 30px 60px 45px 85px;

When using 4 values:

the first value is for top
the second value is for right
the third value is for bottom
the fourth value is for left

To remember the order, start at the top and go clockwise.

#max-height

Defines the maximum height the element can be.

default max-height: none;

The element has no limit in terms of height.

max-height: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum height is larger than the element's actual height, the max height has no effect.

max-height: 100px;

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

#max-width

Defines the maximum width the element can be.

default max-width: none;

The element has no limit in terms of width.

max-width: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum width is larger than the element's actual width, the max width has no effect.

max-width: 150px;

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

#min-height

Defines the minimum height of the element.

default min-height: 0;

The element has no minimum height.

min-height: 200px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum height is larger than the element's actual height, the min height will be applied.

min-height: 5px;

If the minimum height is smaller than the element's actual height, the min height has no effect.

#min-width

Defines the minimum width of the element.

default min-width: 0;

The element has no minimum width.

min-width: 300px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum width is larger than the element's actual width, the min width will be applied.

min-width: 5px;

If the minimum width is smaller than the element's actual width, the min width has no effect.

#padding-bottom

Defines the space inside the element, on the bottom side.

default padding-bottom: 0;

Removes any padding on the bottom.

padding-bottom: 50px;

You can use pixel values.

padding-bottom: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-bottom: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-left

Defines the space inside the element, on the left side.

default padding-left: 0;

Removes any padding on the left.

padding-left: 50px;

You can use pixel values.

padding-left: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-left: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-right

Defines the space inside the element, on the right side.

default padding-right: 0;

Removes any padding on the right.

padding-right: 50px;

You can use pixel values.

padding-right: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-right: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-top

Defines the space inside the element, on the top side.

default padding-top: 0;

Removes any padding on the top.

padding-top: 50px;

You can use pixel values.

padding-top: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-top: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding

Shorthand property for padding-top padding-right padding-bottom and padding-left.

default padding: 0;

Removes all paddings.

padding: 30px;

When using 1 value, the padding is set for all 4 sides.

padding: 30px 60px;

When using 2 values:

the first value is for top/bottom
the second value is for right/left

To remember the order think about the values you haven't defined.

padding: 30px 60px 45px;

When using 3 values:

the first value is for top
the second value is for right/left
the third value is for bottom

To remember the order think about the values you haven't defined.

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

padding: 30px 60px 45px 85px;

When using 4 values:

the first value is for top
the second value is for right
the third value is for bottom
the fourth value is for left

To remember the order, start at the top and go clockwise.

#width

Defines the width of the element.

default width: auto;

The element will automatically adjust its width to allow its content to be displayed correctly.

width: 240px;

You can use numeric values like pixels, (r)em, percentages...

width: 50%;

If you use percentages, the value is relative to the container's width.

\ No newline at end of file +

#border-bottom-width

Like border-width, but for the bottom border only.

default border-bottom-width: 0;

Removes the bottom border.

border-bottom-width: 4px;

You can use pixel values.

#border-left-width

Like border-width, but for the left border only.

default border-left-width: 0;

Removes the left border.

border-left-width: 4px;

You can use pixel values.

#border-right-width

Like border-width, but for the right border only.

default border-right-width: 0;

Removes the right border.

border-right-width: 4px;

You can use pixel values.

#border-top-width

Like border-width, but for the top border only.

default border-top-width: 0;

Removes the top border.

border-top-width: 4px;

You can use pixel values.

#border-width

Defines the width of the element's borders.

border-width: 1px;

Defines the width of all borders to 1px.

border-width: 2px 0;

Defines the top and bottom borders to 2px, the left and right to 0.

#box-sizing

Defines how the width and height of the element are calculated: whether they include the padding and borders or not.

default box-sizing: content-box;

The width and height of the element only apply to the content of the element.

For example, this element has

border-width: 12px
padding: 30px
width: 200px

The full width is 24px + 60px + 200px = 284px.

The content has the defined width. The box accomodates for those dimensions.

box-sizing: border-box;

The width and height of the element apply to all parts of the element: the content, the padding and the borders.

For example, this element has

border-width: 12px
padding: 30px
width: 200px

The full width is 200px, no matter what.

The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 60px - 24px = 116px.

#height

Defines the height of the element.

default height: auto;

The element will automatically adjust its height to allow its content to be displayed correctly.

height: 100px;

You can use numeric values like pixels, (r)em, percentages...

If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

#line-height

Defines the height of a single line of text.

default line-height: normal;

Reverts to the default value of the browser.

recommended line-height: 1.6;

You can use unitless values: the line height will be relative to the font size.

line-height: 30px;

You can use pixel values.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font size.

#margin-bottom

Defines the space outside the element, on the bottom side.

default margin-bottom: 0;

Removes any margin at the bottom.

margin-bottom: 30px;

You can use pixel values.

margin-bottom: 2em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-bottom: 10%;

You can use percentage values.
The percentage is based on the width of the container.

#margin-left

Defines the space outside the element, on the left side.

default margin-left: 0;

Removes any margin on the left.

margin-left: 50px;

You can use pixel values.

margin-left: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-left: 30%;

You can use percentage values.
The percentage is based on the width of the container.

margin-left: auto;

The auto keyword will give the left side a share of the remaining space.

When combined with margin-right: auto, it will center the element, if a fixed width is defined.

#margin-right

Defines the space outside the element, on the right side.

default margin-right: 0;

Removes any margin on the right.

margin-right: 50px;

You can use pixel values.

margin-right: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-right: 30%;

You can use percentage values.
The percentage is based on the width of the container.

margin-right: auto;

The auto keyword will give the right side a share of the remaining space.

When combined with margin-left: auto, it will center the element, if a fixed width is defined.

#margin-top

Defines the space outside the element, on the top side.

default margin-top: 0;

Removes any margin at the top.

margin-top: 30px;

You can use pixel values.

margin-top: 2em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

margin-top: 10%;

You can use percentage values.
The percentage is based on the width of the container.

#margin

Shorthand property for margin-top margin-right margin-bottom and margin-left.

default margin: 0;

Removes all margins.

margin: 30px;

When using 1 value, the margin is set for all 4 sides.

margin: 30px 60px;

When using 2 values:

the first value is for top/bottom
the second value is for right/left

To remember the order think about the values you haven't defined.

margin: 30px 60px 45px;

When using 3 values:

the first value is for top
the second value is for right/left
the third value is for bottom

To remember the order think about the values you haven't defined.

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

margin: 30px 60px 45px 85px;

When using 4 values:

the first value is for top
the second value is for right
the third value is for bottom
the fourth value is for left

To remember the order, start at the top and go clockwise.

#max-height

Defines the maximum height the element can be.

default max-height: none;

The element has no limit in terms of height.

max-height: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum height is larger than the element's actual height, the max height has no effect.

max-height: 100px;

If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.

#max-width

Defines the maximum width the element can be.

default max-width: none;

The element has no limit in terms of width.

max-width: 2000px;

You can use numeric values like pixels, (r)em, percentages...

If the maximum width is larger than the element's actual width, the max width has no effect.

max-width: 150px;

If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.

#min-height

Defines the minimum height of the element.

default min-height: 0;

The element has no minimum height.

min-height: 200px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum height is larger than the element's actual height, the min height will be applied.

min-height: 5px;

If the minimum height is smaller than the element's actual height, the min height has no effect.

#min-width

Defines the minimum width of the element.

default min-width: 0;

The element has no minimum width.

min-width: 300px;

You can use numeric values like pixels, (r)em, percentages...

If the minimum width is larger than the element's actual width, the min width will be applied.

min-width: 5px;

If the minimum width is smaller than the element's actual width, the min width has no effect.

#padding-bottom

Defines the space inside the element, on the bottom side.

default padding-bottom: 0;

Removes any padding on the bottom.

padding-bottom: 50px;

You can use pixel values.

padding-bottom: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-bottom: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-left

Defines the space inside the element, on the left side.

default padding-left: 0;

Removes any padding on the left.

padding-left: 50px;

You can use pixel values.

padding-left: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-left: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-right

Defines the space inside the element, on the right side.

default padding-right: 0;

Removes any padding on the right.

padding-right: 50px;

You can use pixel values.

padding-right: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-right: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding-top

Defines the space inside the element, on the top side.

default padding-top: 0;

Removes any padding on the top.

padding-top: 50px;

You can use pixel values.

padding-top: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size
rem: relative to <html> the root element's font size

padding-top: 30%;

You can use percentage values.
The percentage is based on the width of the element.

#padding

Shorthand property for padding-top padding-right padding-bottom and padding-left.

default padding: 0;

Removes all paddings.

padding: 30px;

When using 1 value, the padding is set for all 4 sides.

padding: 30px 60px;

When using 2 values:

the first value is for top/bottom
the second value is for right/left

To remember the order think about the values you haven't defined.

padding: 30px 60px 45px;

When using 3 values:

the first value is for top
the second value is for right/left
the third value is for bottom

To remember the order think about the values you haven't defined.

If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.

padding: 30px 60px 45px 85px;

When using 4 values:

the first value is for top
the second value is for right
the third value is for bottom
the fourth value is for left

To remember the order, start at the top and go clockwise.

#width

Defines the width of the element.

default width: auto;

The element will automatically adjust its width to allow its content to be displayed correctly.

width: 240px;

You can use numeric values like pixels, (r)em, percentages...

width: 50%;

If you use percentages, the value is relative to the container's width.

\ No newline at end of file diff --git a/_includes/collections/flexbox-list.html b/_includes/collections/flexbox-list.html index 90af8b79..dcca2e8b 100644 --- a/_includes/collections/flexbox-list.html +++ b/_includes/collections/flexbox-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/collections/positioning-list.html b/_includes/collections/positioning-list.html index 2e147cf4..c0f95f81 100644 --- a/_includes/collections/positioning-list.html +++ b/_includes/collections/positioning-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/collections/transitions-list.html b/_includes/collections/transitions-list.html index 40658f03..c91ee087 100644 --- a/_includes/collections/transitions-list.html +++ b/_includes/collections/transitions-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/collections/typography-list.html b/_includes/collections/typography-list.html index 7c98e8cd..9a406e69 100644 --- a/_includes/collections/typography-list.html +++ b/_includes/collections/typography-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/collections/typography.html b/_includes/collections/typography.html index 7d48a249..0cec815b 100644 --- a/_includes/collections/typography.html +++ b/_includes/collections/typography.html @@ -1 +1 @@ -

#color

Defines the color of the text.

color: transparent;

Applies a transparent color to the text. The text will still take up the space it should.

color: red;

You can use one of the 140+ color names.

color: #05ffb0;

You can use hexadecimal color codes.

color: rgb(50, 115, 220);

You can use rgb() color codes:

the first value is for red
the second value is for green
the third value is for blue

Each of them can have a value between 0 and 255.

color: rgba(0, 0, 0, 0.5);

You can use rgba() color codes:

the first 3 values are for rgb
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

color: hsl(14, 100%, 53%);

You can use hsl() color codes:

the first value is for hue and can go from 0 to 359
the second value is for saturation and go from 0% to 100%
the third value is for luminosity and go from 0% to 100%

color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

the first 3 values are for hsl
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

#font-family

font-family: "Source Sans Pro", "Arial", sans-serif;

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user's computer and in any @font-face resource.

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

font-family: serif;

The browser will use a serif font family: all characters have stroke endings.

font-family: sans-serif;

The browser will use a sans-serif font family: no character has stroke endings.

font-family: monospace;

The browser will use a monospace font family: all characters have the same width.

font-family: cursive;

The browser will use a cursive font family.

font-family: fantasy;

The browser will use a fantasy font family.

#font-size

Defines the size of the text.

default font-size: medium;

The text will use the browser's default medium size.

font-size: 20px;

You can use pixel values.

font-size: 1.2em;

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

font-size: 1.2rem;

You can use rem values.

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

font-size: 90%;

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

font-size: smaller;

You can use relative keywords. The value is relative to the parent.

The following are available:

larger
smaller

font-size: x-large;

You can use absolute keywords. The value is relative to the root element <html>.

The following are available:

xx-small
x-small
small
medium
large
x-large
xx-large

#font-style

Defines how much the text is slanted.

default font-style: normal;

The text is not slanted.

font-style: italic;

Use the italic version of the font: the letters are slightly slanted.

font-style: oblique;

Use the oblique version of the font: the letters are more slanted than italic.

#font-variant

Defines which glyph to use for each letter.

default font-variant: normal;

Each letter uses its normal glyph.

font-variant: small-caps;

Each letter uses its small capitalized version.

#font-weight

Defines the weight of the text.

default font-weight: normal;

The text is in normal weight.

font-weight: bold;

The text becomes bold.

font-weight: 600;

You can use numeric values. They all correspond to a particular named weight:

100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

font-weight: lighter;

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

#font

Shorthand property for font-style font-variant font-weight font-size line-height and font-family.

#letter-spacing

Defines the spacing between the characters of a block of text.

default letter-spacing: normal;

The spacing between the characters is normal.

letter-spacing: 2px;

You can use pixel values.

letter-spacing: 0.1em;

You can use em values: this allows the spacing to remain relative to the font-size.

#line-height

Defines the height of a single line of text.

default line-height: normal;

Reverts to the default value of the browser.

recommended line-height: 1.6;

You can use unitless values: the line height will be relative to the font size.

line-height: 30px;

You can use pixel values.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font size.

#text-align

Defines how the text content of the element is horizontally aligned.

text-align: left;

The text content is aligned to the left.

text-align: right;

The text content is aligned to the right.

text-align: center;

The text content is centered.

text-align: justify;

The text content is justified.

#text-decoration

Defines how the text content of the element is decorated.

default text-decoration: none;

Removes any text decoration.

text-decoration: underline;

Underlines the text content.

#text-indent

Defines the indentation of the element's first line of text.

default text-indent: 0;

The text is not indented.

text-indent: 40px;

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.

text-indent: -2em;

You can also use negative values.

#text-overflow

Defines how the hidden text content behaves if it's overflowing.

default text-overflow: clip;

The text content is clipped and not accessible.

text-overflow: ellipsis;

The overflowing content is replaced by an ellipsis: …

#text-shadow

Defines the shadow of the text content.

default text-shadow: none;

The text content has no shadow.

text-shadow: 2px 6px;

You need at least two values:

the first is the horizontal offset
the second is the vertical offset

The shadow color will be inherited from the text color.

text-shadow: 2px 6px red;

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...

text-shadow: 2px 4px 10px red;

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.

#text-transform

Defines how the text content should be transformed.

default text-transform: none;

Removes any text transformation: the text will appear the same as in the HTML code.

text-transform: capitalize;

Turns the first letter of each word into a capital letter.

text-transform: uppercase;

Turns all letters into capital letters.

text-transform: lowercase;

Turns all letters into lowercase letters.

#white-space

Defines how the element's white space is handled.

default white-space: normal;

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

white-space: nowrap;

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

white-space: pre;

The white space is exactly preserved.

Sequences of spaces are preserved
Lines break only on new lines and

white-space: pre-wrap;

The white space is mostly preserved.

Sequences of spaces are preserved
Lines break on new lines,  , but also when reaching the end of the element

white-space: pre-line;

Only new lines are preserved.

Sequences of spaces are combined into one
Lines break on new lines,  , but also when reaching the end of the element

#word-break

Defines how words should break when reaching the end of a line.

default word-break: normal;

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

word-break: break-all;

Words with no space will break as soon as they reach the end of a line.

#word-spacing

Defines the spacing between words of a block of text.

default word-spacing: normal;

The spacing between the characters is normal.

word-spacing: 5px;

You can use pixel values.

word-spacing: 2em;

You can use em values: this allows the spacing to remain relative to the font-size.

\ No newline at end of file +

#color

Defines the color of the text.

color: transparent;

Applies a transparent color to the text. The text will still take up the space it should.

color: red;

You can use one of the 140+ color names.

color: #05ffb0;

You can use hexadecimal color codes.

color: rgb(50, 115, 220);

You can use rgb() color codes:

the first value is for red
the second value is for green
the third value is for blue

Each of them can have a value between 0 and 255.

color: rgba(0, 0, 0, 0.5);

You can use rgba() color codes:

the first 3 values are for rgb
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

color: hsl(14, 100%, 53%);

You can use hsl() color codes:

the first value is for hue and can go from 0 to 359
the second value is for saturation and go from 0% to 100%
the third value is for luminosity and go from 0% to 100%

color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

the first 3 values are for hsl
the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

#font-family

font-family: "Source Sans Pro", "Arial", sans-serif;

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user's computer and in any @font-face resource.

font-family: serif;

The browser will use a serif font family: all characters have stroke endings.

font-family: sans-serif;

The browser will use a sans-serif font family: no character has stroke endings.

font-family: monospace;

The browser will use a monospace font family: all characters have the same width.

font-family: cursive;

The browser will use a cursive font family.

font-family: fantasy;

The browser will use a fantasy font family.

#font-size

Defines the size of the text.

default font-size: medium;

The text will use the browser's default medium size.

font-size: 20px;

You can use pixel values.

font-size: 1.2em;

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

font-size: 1.2rem;

You can use rem values.

font-size: 90%;

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

font-size: smaller;

You can use relative keywords. The value is relative to the parent.

The following are available:

larger
smaller

font-size: x-large;

You can use absolute keywords. The value is relative to the root element <html>.

The following are available:

xx-small
x-small
small
medium
large
x-large
xx-large

#font-style

Defines how much the text is slanted.

default font-style: normal;

The text is not slanted.

font-style: italic;

Use the italic version of the font: the letters are slightly slanted.

font-style: oblique;

Use the oblique version of the font: the letters are more slanted than italic.

#font-variant

Defines which glyph to use for each letter.

default font-variant: normal;

Each letter uses its normal glyph.

font-variant: small-caps;

Each letter uses its small capitalized version.

#font-weight

Defines the weight of the text.

default font-weight: normal;

The text is in normal weight.

font-weight: bold;

The text becomes bold.

font-weight: 600;

You can use numeric values. They all correspond to a particular named weight:

100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

font-weight: lighter;

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

#font

Shorthand property for font-style font-variant font-weight font-size line-height and font-family.

#letter-spacing

Defines the spacing between the characters of a block of text.

default letter-spacing: normal;

The spacing between the characters is normal.

letter-spacing: 2px;

You can use pixel values.

letter-spacing: 0.1em;

You can use em values: this allows the spacing to remain relative to the font-size.

#line-height

Defines the height of a single line of text.

default line-height: normal;

Reverts to the default value of the browser.

recommended line-height: 1.6;

You can use unitless values: the line height will be relative to the font size.

line-height: 30px;

You can use pixel values.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font size.

#text-align

Defines how the text content of the element is horizontally aligned.

text-align: left;

The text content is aligned to the left.

text-align: right;

The text content is aligned to the right.

text-align: center;

The text content is centered.

text-align: justify;

The text content is justified.

#text-decoration

Defines how the text content of the element is decorated.

default text-decoration: none;

Removes any text decoration.

text-decoration: underline;

Underlines the text content.

#text-indent

Defines the indentation of the element's first line of text.

default text-indent: 0;

The text is not indented.

text-indent: 40px;

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.

text-indent: -2em;

You can also use negative values.

#text-overflow

Defines how the hidden text content behaves if it's overflowing.

default text-overflow: clip;

The text content is clipped and not accessible.

text-overflow: ellipsis;

The overflowing content is replaced by an ellipsis: …

#text-shadow

Defines the shadow of the text content.

default text-shadow: none;

The text content has no shadow.

text-shadow: 2px 6px;

You need at least two values:

the first is the horizontal offset
the second is the vertical offset

The shadow color will be inherited from the text color.

text-shadow: 2px 6px red;

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...

text-shadow: 2px 4px 10px red;

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.

#text-transform

Defines how the text content should be transformed.

default text-transform: none;

Removes any text transformation: the text will appear the same as in the HTML code.

text-transform: capitalize;

Turns the first letter of each word into a capital letter.

text-transform: uppercase;

Turns all letters into capital letters.

text-transform: lowercase;

Turns all letters into lowercase letters.

#white-space

Defines how the element's white space is handled.

default white-space: normal;

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

white-space: nowrap;

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

white-space: pre;

The white space is exactly preserved.

Sequences of spaces are preserved
Lines break only on new lines and

white-space: pre-wrap;

The white space is mostly preserved.

Sequences of spaces are preserved
Lines break on new lines,  , but also when reaching the end of the element

white-space: pre-line;

Only new lines are preserved.

Sequences of spaces are combined into one
Lines break on new lines,  , but also when reaching the end of the element

#word-break

Defines how words should break when reaching the end of a line.

default word-break: normal;

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

word-break: break-all;

Words with no space will break as soon as they reach the end of a line.

#word-spacing

Defines the spacing between words of a block of text.

default word-spacing: normal;

The spacing between the characters is normal.

word-spacing: 5px;

You can use pixel values.

word-spacing: 2em;

You can use em values: this allows the spacing to remain relative to the font-size.

\ No newline at end of file diff --git a/_includes/components/finder.html b/_includes/components/finder.html new file mode 100644 index 00000000..6cc14fca --- /dev/null +++ b/_includes/components/finder.html @@ -0,0 +1,133 @@ +

+ +

+ {% include lists/finder-list.html %} +

+ + diff --git a/_includes/lists/finder-list.html b/_includes/lists/finder-list.html new file mode 100644 index 00000000..7e95b293 --- /dev/null +++ b/_includes/lists/finder-list.html @@ -0,0 +1 @@ +

animation-iteration-count

animation-timing-function

animations

animation

animations

background-attachment

border-bottom-left-radius

border-bottom-right-radius

border-top-left-radius

border-top-right-radius

transition-timing-function

\ No newline at end of file diff --git a/_includes/lists/menu-list.html b/_includes/lists/menu-list.html index 1a1a076a..4c3ecd51 100644 --- a/_includes/lists/menu-list.html +++ b/_includes/lists/menu-list.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/css/website.css b/css/website.css index 41b6fa3f..5b197c00 100644 --- a/css/website.css +++ b/css/website.css @@ -85,7 +85,7 @@ th { bottom: 100%; color: #fff; content: attr(data-tooltip); - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 0.6rem; font-weight: 400; left: 50%; @@ -126,7 +126,7 @@ html { body { color: #4d4d4d; - font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; + font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 1rem; line-height: 1.6; } @@ -144,7 +144,7 @@ a { transition-property: background, border-bottom-color, color; } code { - font-family: "Source Code Pro", "Consolas", "Monaco", "Courier", monospace; + font-family: "Inconsolata", "Source Code Pro", "Consolas", "Monaco", "Courier", monospace; font-size: 0.8em; } img { @@ -353,12 +353,12 @@ html ::selection { display: block; padding: 0 6px; } .menu-collection-link:hover { - background: #05ffb0; - color: #310736; } + background: #00d1b2; + color: #fff; } .menu-collection-link--active { - background: #05ffb0; - color: #310736; } + background: #00d1b2; + color: #fff; } .menu-nav { align-items: stretch; @@ -417,10 +417,10 @@ html ::selection { color: rgba(0, 0, 0, 0.7); } .menu-item:hover, .menu-item.is-selected { - background: #05ffb0; - color: #310736; } - .menu-item:hover .menu-item-name, .menu-item.is-selected .menu-item-name { - color: #310736; } + background: #00d1b2; + color: #fff; } + .menu-item:hover .item-name, .menu-item.is-selected .item-name { + color: #fff; } .menu-list-shadow { display: block; @@ -642,7 +642,8 @@ html ::selection { .header-share { align-items: center; display: flex; - justify-content: center; } + justify-content: center; + margin-top: 0.5rem; } .header-share .share-button { height: 48px; width: 48px; } @@ -829,6 +830,95 @@ html ::selection { .index-collections strong { padding-left: 0; } } +.finder { + position: relative; } + .finder .menu-search input { + font-size: 1rem; } + +.finder-list.is-searching .finder-item { + display: none; } + .finder-list.is-searching .finder-item.is-highlighted:not(.is-hidden) { + display: block; } + .finder-list.is-searching .finder-item.is-selected { + display: block; } + +.finder-item { + align-items: stretch; + cursor: pointer; + justify-content: space-between; + position: relative; } + .finder-item:hover .finder-item-link { + background: #f2f2f2; } + .finder-item:hover .finder-item-meta .light { + opacity: 1; } + .finder-item.is-hidden { + display: none; } + .finder-item.is-selected { + z-index: 1; } + .finder-item.is-selected .finder-item-link, .finder-item.is-selected .finder-item-link:hover { + background: #00d1b2; + color: #fff; } + +.finder-item-link { + display: block; + padding: 0.25rem 1rem; + transition: none; } + .finder-item-link:visited { + color: #b86bff; } + .finder-item-link:hover { + background: #f2f2f2; } + .finder-item-link .highlight { + background: #ffdd57; + color: rgba(0, 0, 0, 0.7); } + .finder-item-link .light--experimental { + margin-left: 4px; + position: relative; + top: -1px; } + +.finder-item-meta { + align-items: center; + bottom: 0; + display: flex; + justify-content: flex-end; + position: absolute; + right: 0; + top: 0; } + .finder-item-meta .light:hover { + text-decoration: underline; } + +.light { + border-radius: 2px; + color: #333333; + font-size: 0.8em; + font-weight: normal; + line-height: 1.2; + opacity: 0.5; + padding: 2px 4px; + text-transform: lowercase; + white-space: nowrap; } + +label.light { + cursor: pointer; } + label.light input { + cursor: pointer; + margin-right: 4px; } + +@media (max-width: 799px) { + .finder { + padding-bottom: 1rem; } + .finder-item-meta { + padding-right: 0.5rem; } + .finder-item-meta .light { + margin-left: 2px; } } + +@media (min-width: 800px) { + .finder { + padding-bottom: 3rem; } + .finder-item-meta { + padding: 0 1em; } + .finder-item-meta .light { + margin-left: 4px; } } + .heading { background: #310736; color: #94529c; diff --git a/css/website.sass b/css/website.sass index 7b45cbad..65d7da9a 100644 --- a/css/website.sass +++ b/css/website.sass @@ -12,6 +12,7 @@ @import "../sass/header" @import "../sass/footer" @import "../sass/index" +@import "../sass/finder" @import "../sass/heading" @import "../sass/list" @import "../sass/property" diff --git a/index.html b/index.html index 3512b71c..b15104fb 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,7 @@

- {{site.title}} + +