├── README.md
├── arrow.sass
├── border-radius.sass
├── clearfix.sass
├── ellipsis.sass
├── equal-height.sass
├── hide-text.sass
├── image-2x.sass
├── lists.sass
├── optimise-font.sass
├── placeholder.sass
└── sizing.sass
/README.md:
--------------------------------------------------------------------------------
1 | # code-snippets
2 |
3 | Just code. Currently, only [Sass](http://sass-lang.com) code, like mixins and placeholders.
4 |
5 | ## meet `equal-height()`
6 | This is a simple Sass mixin I created it a long time ago for achieving equal height columns without flexbox.
7 | > [Live example](http://codepen.io/diessica/full/ZGNXXd).
8 |
9 | ### usage
10 |
11 | HTML structure, where `nav` and `section`s are **siblings** (share the same parent element).
12 |
13 | ```html
14 |
15 | A random section of content
16 | Another section of content
17 | ```
18 |
19 | Sass
20 | ```sass
21 | section, nav
22 | +equal-height
23 | ```
24 |
25 | Done! `nav` and both `section`s got the same height.
26 |
27 | It doesn't matter the content, how many columns you have, neither the `nav` nor `section`'s `height`, nor if you don't have a container wrapping the siblings. **It just works**, and without neither `position: absolute` nor `background-image`.
28 |
29 | If displaying the parent as `table`s and the children as `table-cell`s isn't a problem for your code at all, just use it. Since you are not using actual tables, there's no reason to feel bad here.
30 |
31 | > **Note:** `display: table` always will inherit to the parent element `body` unless you set `$wrapper` (see below).
32 |
33 | ### options
34 | ##### $wrapper
35 | It sets a wrapper for the columns.
36 |
37 | Type: `string`
38 | Default: `body`
39 |
40 |
41 | # to-do
42 | - [ ] Documentation for Sass snippets.
43 |
44 | ---
45 |
46 | ###### LICENSE
47 |
48 | [](http://creativecommons.org/publicdomain/zero/1.0/)
49 |
50 | To the extent possible under law, [Diéssica Gurskas](http://diessi.ca) has waived all copyright and related or neighboring rights to this work.
51 |
--------------------------------------------------------------------------------
/arrow.sass:
--------------------------------------------------------------------------------
1 | =arrow($size, $color, $direction)
2 | height: 0
3 | width: 0
4 |
5 | @if $direction == up or $direction == down or $direction == right or $direction == left
6 | border-color: transparent
7 | border-style: solid
8 | border-width: $size / 2
9 |
10 | @if $direction == up
11 | border-bottom-color: $color
12 | @else if $direction == right
13 | border-left-color: $color
14 | @else if $direction == down
15 | border-top-color: $color
16 | @else if $direction == left
17 | border-right-color: $color
18 |
19 | @else if $direction == up-right or $direction == up-left
20 | border-top: $size solid $color
21 |
22 | @if $direction == up-right
23 | border-left: $size solid transparent
24 | @else if $direction == up-left
25 | border-right: $size solid transparent
26 |
27 | @else if $direction == down-right or $direction == down-left
28 | border-bottom: $size solid $color
29 |
30 | @if $direction == down-right
31 | border-left: $size solid transparent
32 | @else if $direction == down-left
33 | border-right: $size solid transparent
34 |
--------------------------------------------------------------------------------
/border-radius.sass:
--------------------------------------------------------------------------------
1 | =border-radius($radius)
2 | -webkit-border-radius: $radius
3 | border-radius: $radius
4 | background-clip: padding-box
5 |
6 | =border-top-radius($radius)
7 | -webkit-border-top-right-radius: $radius
8 | border-top-right-radius: $radius
9 | -webkit-border-top-left-radius: $radius
10 | border-top-left-radius: $radius
11 | background-clip: padding-box
12 |
13 | =border-right-radius($radius)
14 | -webkit-border-bottom-right-radius: $radius
15 | border-bottom-right-radius: $radius
16 | -webkit-border-top-right-radius: $radius
17 | border-top-right-radius: $radius
18 | background-clip: padding-box
19 |
20 | =border-bottom-radius($radius)
21 | -webkit-border-bottom-right-radius: $radius
22 | border-bottom-right-radius: $radius
23 | -webkit-border-bottom-left-radius: $radius
24 | border-bottom-left-radius: $radius
25 | background-clip: padding-box
26 |
27 | =border-left-radius($radius)
28 | -webkit-border-bottom-left-radius: $radius
29 | border-bottom-left-radius: $radius
30 | -webkit-border-top-left-radius: $radius
31 | border-top-left-radius: $radius
32 | background-clip: padding-box
33 |
--------------------------------------------------------------------------------
/clearfix.sass:
--------------------------------------------------------------------------------
1 | %clearfix
2 | &:after
3 | content: ""
4 | display: table
5 | clear: both
6 |
--------------------------------------------------------------------------------
/ellipsis.sass:
--------------------------------------------------------------------------------
1 | %ellipsis
2 | overflow: hidden
3 | text-overflow: ellipsis
4 | white-space: nowrap
5 |
--------------------------------------------------------------------------------
/equal-height.sass:
--------------------------------------------------------------------------------
1 | =equal-height($wrapper: body)
2 | @at-root #{$wrapper}
3 | display: table
4 |
5 | display: table-cell
6 |
--------------------------------------------------------------------------------
/hide-text.sass:
--------------------------------------------------------------------------------
1 | %hide-text
2 | border: 0
3 | color: transparent
4 | font: 0/0 a
5 | text-shadow: none
6 |
--------------------------------------------------------------------------------
/image-2x.sass:
--------------------------------------------------------------------------------
1 | =image-2x($image, $width, $height)
2 | @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx)
3 | background-image: url($image)
4 | background-size: $width $height
5 |
--------------------------------------------------------------------------------
/lists.sass:
--------------------------------------------------------------------------------
1 | %unstyled-list
2 | list-style-image: none
3 | list-style-type: none
4 | margin-left: 0
5 |
6 | %square-list
7 | list-style-type: square
8 | margin-left: 20px
9 |
10 | %inline-list
11 | margin-left: 0
12 | list-style: none
13 | & > li
14 | display: inline-block
15 | padding-left: 5px
16 | padding-right: 5px
17 |
--------------------------------------------------------------------------------
/optimise-font.sass:
--------------------------------------------------------------------------------
1 | %optimize-font
2 | font-smooth: always
3 | -webkit-font-smoothing: antialiased
4 | -moz-osx-font-smoothing: grayscale
5 | text-rendering: optimizeLegibility
6 |
--------------------------------------------------------------------------------
/placeholder.sass:
--------------------------------------------------------------------------------
1 | =placeholder
2 | &::-webkit-input-placeholder
3 | @content
4 | &:-moz-placeholder
5 | @content
6 | &::-moz-placeholder
7 | @content
8 | &:-ms-input-placeholder
9 | @content
10 |
--------------------------------------------------------------------------------
/sizing.sass:
--------------------------------------------------------------------------------
1 | =size($height, $width)
2 | width: $width
3 | height: $height
4 |
5 | =square($size)
6 | +size($size, $size)
7 |
--------------------------------------------------------------------------------