Revamp CSS
This commit is contained in:
Rico Sta. Cruz
parent
7491886055
commit
3721e05a61
|
|
@ -8,6 +8,7 @@
|
||||||
|
|
||||||
{: .-two-column}
|
{: .-two-column}
|
||||||
{: .-three-column}
|
{: .-three-column}
|
||||||
|
{: .-wide-second} # combine with -x-column
|
||||||
{: .-left-reference}
|
{: .-left-reference}
|
||||||
|
|
||||||
`h3` supports these:
|
`h3` supports these:
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class='top-nav'>
|
<nav class='top-nav'>
|
||||||
<div class='container'>
|
<div class='container'>
|
||||||
<div class='left'>
|
<div class='left'>
|
||||||
<a class='home' href='{{base}}'></a>
|
<a class='home' href='{{base}}'></a>
|
||||||
|
|
@ -22,4 +22,4 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{% assign description = "The ultimate cheatsheet for " | append: include.page.title | append: "." %}
|
{% assign description = "The ultimate cheatsheet for " | append: include.page.title | append: "." %}
|
||||||
<ul class="social-list {{ include.class }}">
|
<ul class="social-list {{ include.class }}">
|
||||||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ include.page.url }}" target="share"><span class="text">Like</span></a></li>
|
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ include.page.url }}" target="share"><span class="text"></span></a></li>
|
||||||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ description }} {{ site.url }}{{ include.page.url }}" target="share"><span class="text">Tweet</span></a></li>
|
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text={{ description }} {{ site.url }}{{ include.page.url }}" target="share"><span class="text"></span></a></li>
|
||||||
<!--<li class="googleplus link hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url }}{{ include.page.url }}" target="share"><span class="text">+1</span></a></li>-->
|
<!--<li class="googleplus link hint--bottom" data-hint="Share on Google Plus"><a href="https://plus.google.com/share?url={{ site.url }}{{ include.page.url }}" target="share"><span class="text">+1</span></a></li>-->
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -79,6 +79,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h3-section-list.-wide-second {
|
||||||
|
& > .h3-section:nth-child(2) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Three column, left reference
|
* Three column, left reference
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,11 @@
|
||||||
|
@mixin table-align-left {
|
||||||
|
& tr th,
|
||||||
|
& tr td,
|
||||||
|
& tr td:last-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Table
|
* Table
|
||||||
*/
|
*/
|
||||||
|
|
@ -74,11 +82,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.MarkdownBody table.-left-align {
|
.MarkdownBody table.-left-align {
|
||||||
& tr th,
|
@include table-align-left;
|
||||||
& tr td,
|
|
||||||
& tr td:last-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.MarkdownBody table.-headers {
|
.MarkdownBody table.-headers {
|
||||||
|
|
@ -87,3 +91,30 @@
|
||||||
border-bottom: solid 1px $dark-line-color;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,5 @@
|
||||||
---
|
---
|
||||||
title: CSS animations
|
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 | <number>;
|
|
||||||
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
|
|
||||||
|
|
||||||
### Event
|
|
||||||
|
|
||||||
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
|
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,6 @@
|
||||||
---
|
---
|
||||||
title: CSS background
|
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+) */
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,5 @@
|
||||||
---
|
---
|
||||||
title: CSS font
|
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 */
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,5 @@
|
||||||
---
|
---
|
||||||
title: CSS selectors
|
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
|
|
||||||
|
|
|
||||||
|
|
@ -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>, <fontN>` |
|
||||||
|
| `font-size:` | `<size>` |
|
||||||
|
| `letter-spacing:` | `<size>` |
|
||||||
|
| `line-height:` | `<number>` |
|
||||||
|
| --- | --- |
|
||||||
|
| `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:` | `<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:` | `<name>` |
|
||||||
|
| `animation-delay:` | `<time>ms` |
|
||||||
|
| `animation-duration:` | `<time>ms` |
|
||||||
|
| `animation-direction:` | `normal` `reverse` `alternate` `alternate-reverse` |
|
||||||
|
| `animation-iteration-count:` | `infinite` `<number>` |
|
||||||
|
| `animation-timing-function:` | `ease` `linear` `ease-in` `ease-out` `ease-in-out` |
|
||||||
|
{: .-key-values}
|
||||||
|
|
||||||
|
### Shorthand
|
||||||
|
|
||||||
|
| `animation:` | `bounce` | `300ms` | `linear` | `100ms` | `infinite` | `alternate-reverse` |
|
||||||
|
| | name | duration | timing-function | delay | count | direction |
|
||||||
|
{: .-css-breakdown}
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```css
|
||||||
|
animation: bounce 300ms linear 0s infinite normal;
|
||||||
|
animation: bounce 300ms linear infinite;
|
||||||
|
animation: bounce 300ms linear infinite alternate-reverse;
|
||||||
|
```
|
||||||
|
|
||||||
|
### Event
|
||||||
|
|
||||||
|
```js
|
||||||
|
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')
|
||||||
|
```
|
||||||
32
html-css.md
32
html-css.md
|
|
@ -1,32 +0,0 @@
|
||||||
---
|
|
||||||
title: HTML/CSS
|
|
||||||
category: HTML
|
|
||||||
---
|
|
||||||
|
|
||||||
### CSS - Selectors
|
|
||||||
|
|
||||||
.class {
|
|
||||||
}
|
|
||||||
|
|
||||||
### CSS - Font styling
|
|
||||||
|
|
||||||
font-family: Arial;
|
|
||||||
font-size: 12pt;
|
|
||||||
line-height: 150%;
|
|
||||||
color: #aa3322;
|
|
||||||
|
|
||||||
### CSS - Font styling
|
|
||||||
|
|
||||||
// Bold
|
|
||||||
font-weight: bold;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
// Italic
|
|
||||||
font-style: italic;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
// Underline
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue