diff --git a/Readme.md b/Readme.md index 5cf9f7e74..75b39f9f2 100644 --- a/Readme.md +++ b/Readme.md @@ -8,6 +8,7 @@ {: .-two-column} {: .-three-column} + {: .-wide-second} # combine with -x-column {: .-left-reference} `h3` supports these: diff --git a/_includes/2017/top-nav.html b/_includes/2017/top-nav.html index b0d463ff8..2e6342066 100644 --- a/_includes/2017/top-nav.html +++ b/_includes/2017/top-nav.html @@ -1,4 +1,4 @@ -
+
+ diff --git a/_includes/social-list.html b/_includes/social-list.html index e0350d017..2fa854299 100644 --- a/_includes/social-list.html +++ b/_includes/social-list.html @@ -1,6 +1,6 @@ {% assign description = "The ultimate cheatsheet for " | append: include.page.title | append: "." %} diff --git a/_sass/2017/components/h3-section-list.scss b/_sass/2017/components/h3-section-list.scss index 9631174e8..e5929c109 100644 --- a/_sass/2017/components/h3-section-list.scss +++ b/_sass/2017/components/h3-section-list.scss @@ -79,6 +79,12 @@ } } +.h3-section-list.-wide-second { + & > .h3-section:nth-child(2) { + width: 100%; + } +} + /* * Three column, left reference */ diff --git a/_sass/2017/markdown/table.scss b/_sass/2017/markdown/table.scss index 1c7535893..a69c967d0 100644 --- a/_sass/2017/markdown/table.scss +++ b/_sass/2017/markdown/table.scss @@ -1,3 +1,11 @@ +@mixin table-align-left { + & tr th, + & tr td, + & tr td:last-child { + text-align: left; + } +} + /* * Table */ @@ -74,11 +82,7 @@ } .MarkdownBody table.-left-align { - & tr th, - & tr td, - & tr td:last-child { - text-align: left; - } + @include table-align-left; } .MarkdownBody table.-headers { @@ -87,3 +91,30 @@ border-bottom: solid 1px $dark-line-color; } } + +/* + * Key-value pairs (like in css) + */ + +.MarkdownBody table.-key-values { + & tbody tr td + td code { + display: block; + } +} + +.MarkdownBody table.-css-breakdown { + @include table-align-left; + + & tr td { + @include font-size(1); + } + + & tr:last-child { + background: $gray-bg; + } + + & tr:last-child td { + @include font-size(-1); + color: $base-mute; + } +} diff --git a/css-animation.md b/css-animation.md index 21cb5c77d..5a8e9a9bb 100644 --- a/css-animation.md +++ b/css-animation.md @@ -1,24 +1,5 @@ --- title: CSS animations -category: CSS +category: Hidden +redirect_to: /css#animation --- - - animation: bounce 300ms linear 100ms infinite alternate-reverse; - /* ^ ^ ^ ^ ^ ^ - name duration timing-function delay count direction */ - - # Example: - animation: bounce 300ms linear 0s infinite normal; - animation: bounce 300ms linear infinite; - animation: bounce 300ms linear infinite alternate-reverse; - - animation-name: bounce; - animation-delay: 100ms; - animation-duration: 300ms; - animation-direction: normal | reverse | alternate | alternate-reverse; - animation-iteration-count: infinite | ; - animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out; - -### Event - - .one('webkitAnimationEnd oanimationend msAnimationEnd animationend') diff --git a/css-background.md b/css-background.md index e254e06ec..ed291c73d 100644 --- a/css-background.md +++ b/css-background.md @@ -1,29 +1,6 @@ --- title: CSS background -category: CSS +category: Hidden +redirect_to: /css#background --- -Background ----------- - -### Shorthand - - background: #ff0 url(bg.jpg) left top / 100px auto no-repeat fixed; - background: #abc url(bg.png) center center / cover repeat-x local; - /* ^ ^ ^ ^ ^ ^ - color image position size repeat attachment */ - -### Multiple backgrounds - - background: - linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), - url('background.jpg') center center / cover, - #333; - -### Other properties - - background-clip: border-box | padding-box | content-box [, ...]*; /* IE9+ */ - background-repeat: no-repeat | repeat-x | repeat-y; - background-attachment: scroll | fixed | local; - background: url(x), url(y); /* multiple (IE9+) */ - diff --git a/css-font.md b/css-font.md index 0e00fdcb1..db037f67a 100644 --- a/css-font.md +++ b/css-font.md @@ -1,10 +1,5 @@ --- title: CSS font -category: CSS +category: Hidden +redirect_to: /css#fonts --- - - font: italic 400 14px / 1.5 sans-serif; - /* ^ ^ ^ ^ ^ - style weight size* line-height family - required required */ - diff --git a/css-selectors.md b/css-selectors.md index 34ef6ef82..2394b1a7e 100644 --- a/css-selectors.md +++ b/css-selectors.md @@ -1,30 +1,5 @@ --- title: CSS selectors -category: CSS +category: Hidden +redirect_to: /css#selectors --- - - [attr="value"] /* = exact */ - [class~="box"] /* ~= has word */ - [class|="icon"] /* |= exact, or prefix (eg, value-) */ - [href$=".doc"] /* $= ends in */ - [class*="-is-"] /* *= contains */ - - h3 + p /* + adjacent sibling */ - article ~ footer /* ~ far sibling */ - .container > .box /* > direct child */ - - :target (h2#foo:target) - :disabled - - :nth-child - :nth-child(3n) - :nth-child(3n+2) - :nth-child(-n+4) - :nth-last-child(...) - - :first-of-type - :last-of-type - :nth-of-type - :only-of-type - only child of its parent thats like that - - :only-child diff --git a/css.md b/css.md new file mode 100644 index 000000000..1594a8a33 --- /dev/null +++ b/css.md @@ -0,0 +1,197 @@ +--- +title: CSS +category: CSS +layout: 2017/sheet +tags: [WIP] +weight: -1 +--- + +## Basics +{: .-three-column} + +### Selectors + +```css +.class { + font-weight: bold; +} +``` +{: .-setup} + +| Selector | Description | +| --- | --- | +| `div` | Element | +| `.class` | Class | +| `#id` | ID | +| `[disabled]` | Attribute | +| `[role="dialog"]` | Attribute | + +### Combinators + +| Selector | Description | +| --- | --- | +| `.parent .child` | Descendant | +| `.parent > .child` | Direct descendant | +| `.child + .sibling` | Adjascent sibling | +| `.child ~ .sibling` | Far sibling | + +### Attribute selectors + +| Selector | Description | +| --- | --- | +| `[role="dialog"]` | `=` Exact | +| `[class~="box"]` | `~=` Has word | +| `[class|="box"]` | `|=` Exact or prefix (eg, `value-`) | +| `[href$=".doc"]` | `$=` Ends in | +| `[class*="-is-"]` | `*=` Contains | + +### Pseudo-classes + +| Selector | Description | +| --- | --- | +| `:target` | eg, `h2#foo:target` | +| --- | --- | +| `:disabled` | | +| `:focus` | | +| `:active` | | +| --- | --- | +| `:nth-child(3)` | 3rd child | +| `:nth-child(3n+2)` | 2nd child in groups of 3 | +| `:nth-child(-n+4)` | | +| --- | --- | +| `:nth-last-child(···)` | | +| `:nth-of-type(···)` | | +| --- | --- | + +### Pseudo-class variations + +| Selector | +| --- | +| `:first-of-type(···)` | +| `:last-of-type(···)` | +| `:nth-of-type(···)` | +| `:only-of-type(···)` | +| --- | +| `:first-child` | +| `:last-child` | +| `:nth-child(···)` | +| `:only-child` | +{: .-left-align} + +Fonts +----- +{: .-left-reference} + +### Properties + +| Property | Description | +| --- | --- | +| `font-family:` | `, ` | +| `font-size:` | `` | +| `letter-spacing:` | `` | +| `line-height:` | `` | +| --- | --- | +| `font-weight:` | `bold` `normal` | +| `font-style:` | `italic` `normal` | +| `text-decoration:` | `underline` `none` | +| --- | --- | +| `text-align:` | `left` `right` `center` `justify` | +| `text-transform:` | `capitalize` `uppercase` `lowercase` | +{: .-key-values} + +### Shorthand +{: .-prime} + +| `font:` | `italic` | `400` | `14px` | `/` | `1.5` | `sans-serif` | +| | style | weight | size (required) | | line-height | family (required) | +{: .-css-breakdown} + +### Example + +```css +font-family: Arial; +font-size: 12pt; +line-height: 1.5; +letter-spacing: 0.02em; +color: #aa3322; +``` + +### Case + +```css +text-transform: capitalize; /* Hello */ +text-transform: uppercase; /* HELLO */ +text-transform: lowercase; /* hello */ +``` + +Background +---------- +{: .-left-reference} + +### Properties + +| Property | Description | +| --- | --- | +| `background:` | _(Shorthand)_ | +| --- | --- | +| `background-color:` | `` | +| `background-image:` | `url(...)` | +| `background-position:` | `left/center/right` `top/center/bottom` | +| `background-size:` | `cover` | +| | `X Y` | +| --- | --- | +| `background-clip:` | `border-box` `padding-box` `content-box` | +| `background-repeat:` | `no-repeat` `repeat-x` `repeat-y` | +| `background-attachment:` | `scroll` `fixed` `local` | +{: .-key-values} + +### Shorthand + +| `background:` | `#ff0` | `url(bg.jpg)` | `left` | `top` | `/` | `100px` `auto` | `no-repeat` | `fixed;` | +| `background:` | `#abc` | `url(bg.png)` | `center` | `center` | `/` | `cover` | `repeat-x` | `local; ` | +| | color | image | positionX | positionY | | size | repeat | attachment | +{: .-css-breakdown} + +### Multiple backgrounds + +```css +background: + linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), + url('background.jpg') center center / cover, + #333; + ``` + +Animation +--------- +{: .-left-reference} + +### Properties + +| `animation:` | _(shorthand)_ | +| `animation-name:` | `` | +| `animation-delay:` | `