Skip to content

Commit 703b4db

Browse files
committed
Add examples of how to use and update links of list
1 parent dbecebb commit 703b4db

File tree

1 file changed

+120
-17
lines changed

1 file changed

+120
-17
lines changed

README.md

Lines changed: 120 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,24 @@ A collection of [SASS](http://sass-lang.com/ "SASS") mixins for your project.
55

66
* [Animation](#animation)
77
* [Keyframes](#keyframes)
8-
* Background size
9-
* Box shadow
10-
* Opacity
11-
* Clearfix
12-
* Border radius
13-
* Box-sizing
14-
* Transition
15-
* Columns
16-
* Transform
17-
* Default
18-
* Translate
19-
* Skew
20-
* Scale
21-
* Rotate
22-
* Gradients
23-
* Horizontal
24-
* Vertical
8+
* [Background size](#background-size)
9+
* [Box shadow](#box-shadow)
10+
* [Opacity](#opacity)
11+
* [Clearfix](#clearfix)
12+
* [Border radius](#border-radius)
13+
* [Box-sizing](#box-sizing)
14+
* [Transition](#transition)
15+
* [Columns](#columns)
16+
* [Transform](#transform)
17+
* [Default](#default)
18+
* [Translate](#translate)
19+
* [Skew](#skew)
20+
* [Scale](#scale)
21+
* [Rotate](#rotate)
22+
* [Transform-origin)(#transform-origin)
23+
* [Gradients](#gradients)
24+
* [Linear Horizontal](#linear-horizontal)
25+
* [Linear Vertical](#linear-vertical)
2526

2627
## Animation
2728

@@ -30,9 +31,111 @@ A collection of [SASS](http://sass-lang.com/ "SASS") mixins for your project.
3031
```
3132

3233
### Keyframes
34+
3335
```
3436
@include keyframes(animationOne) {
3537
from { background-color: red; }
3638
to { background-color: black; }
3739
}
3840
```
41+
42+
## Background size
43+
44+
```
45+
.class { @include background-size(auto 100%); }
46+
```
47+
48+
## Box shadow
49+
50+
```
51+
.class { @include box-shadow(1px 1px 10px 10px #666, 2px 2px 5px 5px #ddd inset); }
52+
```
53+
54+
## Opacity
55+
56+
```
57+
.class { @include opacity(0.5); }
58+
```
59+
60+
## Clearfix
61+
62+
```
63+
.class { @include clearfix(); }
64+
```
65+
66+
## Border-radius
67+
68+
```
69+
.class { @include border-radius(10px); }
70+
```
71+
72+
## Box-sizing
73+
74+
```
75+
.class { @include box-sizing(); }
76+
```
77+
78+
## Transition
79+
80+
```
81+
.class { @include transition(color 1s .5s ease-out); }
82+
```
83+
84+
## Columns
85+
86+
```
87+
.class { @include columns(3, 150px, solid 1px red); }
88+
```
89+
90+
## Transform
91+
92+
### Default
93+
94+
```
95+
.class { @include transform(rotate(45deg); }
96+
```
97+
98+
### Translate
99+
100+
```
101+
.class { @include translate(100px, 100px); }
102+
```
103+
104+
### Skew
105+
106+
```
107+
.class { @include skew(10px, 10px); }
108+
```
109+
110+
### Scale
111+
112+
```
113+
.class { @include scale(0.75); }
114+
```
115+
116+
### Rotate
117+
118+
```
119+
.class { @include rotate(45deg); }
120+
```
121+
122+
### Transform-origin
123+
124+
```
125+
.class { @include transform-origin(left, top); }
126+
```
127+
128+
## Gradients
129+
130+
### Linear horizontal
131+
132+
```
133+
.class { @include horizontal-gradient(#666, #000); }
134+
```
135+
136+
### Linear vertical
137+
138+
```
139+
.class { @include vertical-gradient(#666, #000); }
140+
```
141+

0 commit comments

Comments
 (0)