Skip to content

Commit 965772c

Browse files
MoOxMoOx
committed
update org prefix to r
cssrecipes/cssrecipes.github.io#2 (comment) -62158104
1 parent 7bc391d commit 965772c

4 files changed

Lines changed: 49 additions & 45 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.4.0 - 2014-11-08
2+
3+
- update org prefix to `r`
4+
15
# 0.3.1 - 2014-10-30
26

37
- fix gutter value

‎README.md‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $ npm install cssrecipes-grid
1313
```
1414

1515
_Advice: you can use size utilities from [`cssrecipes-utils`](http://github.com/cssrecipes/utils) for convenience.
16-
It includes `.cssr-(all|min|max)*` classes used in the examples below to define grid cells width._
16+
It includes `.r-(all|min|max)*` classes used in the examples below to define grid cells width._
1717

1818
### Recommanded install 👌
1919

@@ -40,10 +40,10 @@ $ npm install cssrecipes-utils cssrecipes-grid
4040
First of all, you can override all these custom properties according to your needs (here are default values):
4141

4242
```css
43-
:roo{
44-
--cssr-Grid-baseFontSize: 1rem;
45-
--cssr-Grid-baseFontSizeFallback: 16px;
46-
--cssr-Grid-gutter: 1rem; /* used for .cssr-Grid--withGutter */
43+
:root {
44+
--r-Grid-baseFontSize: 1rem;
45+
--r-Grid-baseFontSizeFallback: 16px;
46+
--r-Grid-gutter: 1rem; /* used for .r-Grid--withGutter */
4747
}
4848
```
4949

@@ -61,18 +61,18 @@ First of all, you can override all these custom properties according to your nee
6161
#### Define your `Grid` size
6262

6363
```css
64-
.cssr-Grid {
64+
.r-Grid {
6565
width: auto;
6666
}
6767

68-
@media (--cssr-minM) {
69-
.cssr-Grid {
68+
@media (--r-minM) {
69+
.r-Grid {
7070
width: 30em;
7171
}
7272
}
7373

74-
@media (--cssr-minL) {
75-
.cssr-Grid {
74+
@media (--r-minL) {
75+
.r-Grid {
7676
width: 50em;
7777
}
7878
}
@@ -83,11 +83,11 @@ First of all, you can override all these custom properties according to your nee
8383
#### Use your grid
8484

8585
```html
86-
<div class="cssr-Grid">
87-
<div class="cssr-Grid-cell cssr-all--1of2 cssr-minM--1of3 cssr-minL--1of4">
86+
<div class="r-Grid">
87+
<div class="r-Grid-cell r-all--1of2 r-minM--1of3 r-minL--1of4">
8888
<!-- your content-->
8989
</div>
90-
<div class="cssr-Grid-cell cssr-all--1of2 cssr-minM--2of3 cssr-minL--3of4">
90+
<div class="r-Grid-cell r-all--1of2 r-minM--2of3 r-minL--3of4">
9191
<!-- your content-->
9292
</div>
9393
</div>
@@ -107,18 +107,18 @@ First of all, you can override all these custom properties according to your nee
107107
#### Define your `Grid` size
108108

109109
```css
110-
.cssr-Grid {
110+
.r-Grid {
111111
width: auto;
112112
}
113113

114-
@media (--cssr-maxL) {
115-
.cssr-Grid {
114+
@media (--r-maxL) {
115+
.r-Grid {
116116
width: 50em;
117117
}
118118
}
119119

120-
@media (--cssr-maxM) {
121-
.cssr-Grid {
120+
@media (--r-maxM) {
121+
.r-Grid {
122122
width: 30em;
123123
}
124124
}
@@ -129,11 +129,11 @@ First of all, you can override all these custom properties according to your nee
129129
#### Use your grid
130130

131131
```html
132-
<div class="cssr-Grid">
133-
<div class="cssr-Grid-cell cssr-all--1of4 cssr-maxL--1of3 cssr-maxM--1of2">
132+
<div class="r-Grid">
133+
<div class="r-Grid-cell r-all--1of4 r-maxL--1of3 r-maxM--1of2">
134134
<!-- your content-->
135135
</div>
136-
<div class="cssr-Grid-cell cssr-all--3of4 cssr-maxL--2of3 cssr-maxM--1of2">
136+
<div class="r-Grid-cell r-all--3of4 r-maxL--2of3 r-maxM--1of2">
137137
<!-- your content-->
138138
</div>
139139
</div>
@@ -151,19 +151,19 @@ First of all, you can override all these custom properties according to your nee
151151
#### Define your `Grid` size
152152

153153
```css
154-
.cssr-Grid {
154+
.r-Grid {
155155
width: 50em;
156156
}
157157
```
158158

159159
#### Use your grid
160160

161161
```html
162-
<div class="cssr-Grid">
163-
<div class="cssr-Grid-cell cssr-all--1of4">
162+
<div class="r-Grid">
163+
<div class="r-Grid-cell r-all--1of4">
164164
<!-- your content-->
165165
</div>
166-
<div class="cssr-Grid-cell cssr-all--3of4">
166+
<div class="r-Grid-cell r-all--3of4">
167167
<!-- your content-->
168168
</div>
169169
</div>

‎index.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
:root {
2-
--cssr-Grid-baseFontSize: 1rem;
3-
--cssr-Grid-baseFontSizeFallback: 16px;
4-
--cssr-Grid-gutter: 1rem;
2+
--r-Grid-baseFontSize: 1rem;
3+
--r-Grid-baseFontSizeFallback: 16px;
4+
--r-Grid-gutter: 1rem;
55
}
66

7-
.cssr-Grid {
7+
.r-Grid {
88
display: block;
99
font-size: 0; /* whitespace control */
1010
padding: 0;
1111
margin: 0;
1212
}
1313
/* Modifier --withGutter */
14-
.cssr-Grid--withGutter { margin: 0 calc(-0.5 * var(--cssr-Grid-gutter)) }
14+
.r-Grid--withGutter { margin: 0 calc(-0.5 * var(--r-Grid-gutter)) }
1515

16-
.cssr-Grid--withGutter > .cssr-Grid-cell { padding: 0 calc(0.5 * var(--cssr-Grid-gutter)) }
16+
.r-Grid--withGutter > .r-Grid-cell { padding: 0 calc(0.5 * var(--r-Grid-gutter)) }
1717

18-
.cssr-Grid-cell {
18+
.r-Grid-cell {
1919
display: inline-block;
2020
vertical-align: top;
21-
font-size: var(--cssr-Grid-baseFontSize, var(--cssr-Grid-baseFontSizeFallback));
21+
font-size: var(--r-Grid-baseFontSize, var(--r-Grid-baseFontSizeFallback));
2222
width: 100%;
2323
padding: 0;
2424
}
2525

2626

27-
.cssr-Grid-cell--alignTop {vertical-align: top }
28-
.cssr-Grid-cell--alignMiddle {vertical-align: middle }
29-
.cssr-Grid-cell--alignBottom {vertical-align: bottom }
27+
.r-Grid-cell--alignTop {vertical-align: top }
28+
.r-Grid-cell--alignMiddle {vertical-align: middle }
29+
.r-Grid-cell--alignBottom {vertical-align: bottom }

‎test/index.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,28 @@
55
<link rel="stylesheet" href="../build/test.css">
66
</head>
77
<body>
8-
<div class="cssr-Grid">
9-
<div class="cssr-Grid-cell">
8+
<div class="r-Grid">
9+
<div class="r-Grid-cell">
1010
<div class="test">Grid-cell</div>
1111
</div>
1212
</div>
13-
<div class="cssr-Grid">
14-
<div class="cssr-Grid-cell" style="width: 50%;">
13+
<div class="r-Grid">
14+
<div class="r-Grid-cell" style="width: 50%;">
1515
<div class="test">Grid-cell</div>
1616
</div>
17-
<div class="cssr-Grid-cell" style="width: 50%;">
17+
<div class="r-Grid-cell" style="width: 50%;">
1818
<div class="test">Grid-cell</div>
1919
</div>
2020
</div>
2121

22-
<div class="cssr-Grid cssr-Grid--withGutter">
23-
<div class="cssr-Grid-cell" style="width: 33.3333%;">
22+
<div class="r-Grid r-Grid--withGutter">
23+
<div class="r-Grid-cell" style="width: 33.3333%;">
2424
<div class="test">Grid-cell with gutter</div>
2525
</div>
26-
<div class="cssr-Grid-cell" style="width: 33.3333%;">
26+
<div class="r-Grid-cell" style="width: 33.3333%;">
2727
<div class="test">Grid-cell with gutter</div>
2828
</div>
29-
<div class="cssr-Grid-cell" style="width: 33.3333%;">
29+
<div class="r-Grid-cell" style="width: 33.3333%;">
3030
<div class="test">Grid-cell with gutter</div>
3131
</div>
3232
</div>

0 commit comments

Comments
 (0)