Skip to content

Commit bcd827e

Browse files
trevanhetzeltrevanhetzel
committed
Merge
2 parents 7fa84bc + cbbd4d2 commit bcd827e

File tree

8 files changed

+87
-43
lines changed

8 files changed

+87
-43
lines changed

‎CHANGELOG.md

+26-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<a name="0.5.1"></a>
2-
## v0.5.1 (In progress)
1+
<a name="0.6.0"></a>
2+
## v0.6.0
33

44

55
#### Bug Fixes
@@ -14,10 +14,28 @@
1414
* Support for two off-canvas elements ([52a76560](https://github.com/a2labs/barekit/commit/52a7656034e6d26328597ae77ac5831e3417e7cf))
1515
* Added ability to input custom value to breakpoint mixin ([2372edc0](https://github.com/a2labs/barekit/commit/2372edc07b9082bf7ef6c2a90f93e19ade26855f))
1616
* Added `.editorconfig` file. ([26175e87](https://github.com/a2labs/barekit/commit/26175e87d9ad1b2df8dbecdeb4e418fe27d4f73e))
17+
* Toggle "triggers" now get an active class (`toggle-trigger-shown`) added when toggled.
18+
* Can now specify that a toggled element be hidden when clicking anywhere else on the page (new data attr: `closeOnClick`) ([56a12737](https://github.com/a2labs/barekit/commit/56a127377bb08d2b83707b72e02ee2e63e446cb0))
1719

1820

1921
#### Breaking Changes
2022

23+
* **Grid class names have changed** ([6b3b0dba](https://github.com/a2labs/barekit/commit/6b3b0dbafdeea83c5a6707d068273b5a6a799184))
24+
25+
Previously, BareKit was using some very generic selectors to select all elements that start with `sm`, `md` and `lg` and give them some box model properties (`float` and `padding`). This caused some trouble, so I decided to separate out those box model properties to their own new class: `has-gutter`. This way, you can still use classes like `sm-6` for widths, but aren't tied down to the padding and float if you don't want to be.
26+
27+
So if you want to still use the "grid" (not just the width classes), a line that previously looked like this:
28+
29+
```
30+
<div class="sm-12 md-6 lg-1" style="background: #e1e1e1">1</div>
31+
```
32+
33+
will now need to look like this:
34+
35+
```
36+
<div class="sm-12 md-6 lg-1 has-gutter" style="background: #e1e1e1">1</div>
37+
```
38+
2139
* **Off-canvas class names have changed** ([52a76560](https://github.com/a2labs/barekit/commit/52a7656034e6d26328597ae77ac5831e3417e7cf))
2240

2341
In order to support two off-canvas elements instead of one, the class names needed to set up off-canvas have changed.
@@ -57,4 +75,9 @@ Now needs to look like this:
5775
</div>
5876
```
5977

60-
`right-align` and `left-align` classes have been removed from the `.off-canvas-contain` element and `-right`/`-left` have been appended to the `.off-canvas` and `.off-canvas-trigger` elements.
78+
`right-align` and `left-align` classes have been removed from the `.off-canvas-contain` element and `-right`/`-left` have been appended to the `.off-canvas` and `.off-canvas-trigger` elements.
79+
80+
<a name="0.5.0"></a>
81+
## v0.5.0
82+
83+
Initial release

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"devDependencies": {
44
"jquery": "~2.1.1"
55
},
6-
"version": "0.5.0",
6+
"version": "0.6.0",
77
"homepage": "https://github.com/a2labs/barekit",
88
"authors": [
99
"Trevan Hetzel <[email protected]>"

‎css/barekit.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/sass/module/_grid.scss

+2-6
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,7 @@
103103
}
104104

105105
// Box model
106-
[class*=sm],
107-
[class*=md]:not(.hide-md):not(.hide-lg),
108-
[class*=lg]:not(.hide-md):not(.hide-lg) {
106+
.has-gutter {
109107
float: left;
110108
padding: 0 var($gutter, 20px) / 2;
111109
}
@@ -114,9 +112,7 @@
114112
@extend .clearfix;
115113

116114
.row {
117-
[class*=sm],
118-
[class*=md],
119-
[class*=lg] {
115+
.has-gutter {
120116
padding: 0;
121117
}
122118
}

‎css/stylus/module/_grid.styl

+2-6
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,7 @@ for $i in(1..12) {
103103
}
104104

105105
// Box model
106-
[class*=sm],
107-
[class*=md]:not(.hide-md):not(.hide-lg),
108-
[class*=lg]:not(.hide-md):not(.hide-lg) {
106+
.has-gutter {
109107
float: left;
110108
padding: 0 var($gutter, 20px) / 2;
111109
}
@@ -114,9 +112,7 @@ for $i in(1..12) {
114112
@extend .clearfix;
115113

116114
.row {
117-
[class*=sm],
118-
[class*=md],
119-
[class*=lg] {
115+
.has-gutter {
120116
padding: 0;
121117
}
122118
}

‎example.html

+26-22
Original file line numberDiff line numberDiff line change
@@ -86,48 +86,48 @@ <h1>Form</h1>
8686
<h1>Grid</h1>
8787

8888
<div class="row text-center">
89-
<div class="sm-12 md-6 lg-1" style="background: #e1e1e1">1</div>
90-
<div class="sm-12 md-6 lg-9 lg-offset-2" style="background: #c6c6c6">9 / offset 2</div>
89+
<div class="sm-12 md-6 lg-1 has-gutter" style="background: #e1e1e1">1</div>
90+
<div class="sm-12 md-6 lg-9 lg-offset-2 has-gutter" style="background: #c6c6c6">9 / offset 2</div>
9191
</div>
9292
<div class="row text-center">
93-
<div class="sm-12 md-6 lg-2" style="background: #e1e1e1">2</div>
94-
<div class="sm-12 md-6 lg-10" style="background: #c6c6c6">10</div>
93+
<div class="sm-12 md-6 lg-2 has-gutter" style="background: #e1e1e1">2</div>
94+
<div class="sm-12 md-6 lg-10 has-gutter" style="background: #c6c6c6">10</div>
9595
</div>
9696
<div class="row text-center">
97-
<div class="sm-12 md-6 lg-3" style="background: #e1e1e1">3</div>
98-
<div class="sm-12 md-3 md-offset-3 lg-9 lg-offset-0" style="background: #c6c6c6">9</div>
97+
<div class="sm-12 md-6 lg-3 has-gutter" style="background: #e1e1e1">3</div>
98+
<div class="sm-12 md-3 md-offset-3 lg-9 lg-offset-0 has-gutter" style="background: #c6c6c6">9</div>
9999
</div>
100100
<div class="row text-center">
101-
<div class="sm-12 md-6 lg-4" style="background: #e1e1e1">4</div>
102-
<div class="sm-12 md-6 lg-8" style="background: #c6c6c6">8</div>
101+
<div class="sm-12 md-6 lg-4 has-gutter" style="background: #e1e1e1">4</div>
102+
<div class="sm-12 md-6 lg-8 has-gutter" style="background: #c6c6c6">8</div>
103103
</div>
104104
<div class="row text-center">
105-
<div class="sm-12 md-6 lg-5" style="background: #e1e1e1">5</div>
106-
<div class="sm-12 md-6 lg-7" style="background: #c6c6c6">7</div>
105+
<div class="sm-12 md-6 lg-5 has-gutter" style="background: #e1e1e1">5</div>
106+
<div class="sm-12 md-6 lg-7 has-gutter" style="background: #c6c6c6">7</div>
107107
</div>
108108
<div class="row text-center">
109-
<div class="sm-12 md-6 lg-6" style="background: #e1e1e1">6</div>
110-
<div class="sm-12 md-6 lg-6" style="background: #c6c6c6">6</div>
109+
<div class="sm-12 md-6 lg-6 has-gutter" style="background: #e1e1e1">6</div>
110+
<div class="sm-12 md-6 lg-6 has-gutter" style="background: #c6c6c6">6</div>
111111
</div>
112112
<div class="row text-center">
113-
<div class="sm-12 md-6 lg-7" style="background: #e1e1e1">7</div>
114-
<div class="sm-12 md-6 lg-5" style="background: #c6c6c6">5</div>
113+
<div class="sm-12 md-6 lg-7 has-gutter" style="background: #e1e1e1">7</div>
114+
<div class="sm-12 md-6 lg-5 has-gutter" style="background: #c6c6c6">5</div>
115115
</div>
116116
<div class="row text-center">
117-
<div class="sm-12 md-6 lg-8" style="background: #e1e1e1">8</div>
118-
<div class="sm-12 md-6 lg-4" style="background: #c6c6c6">4</div>
117+
<div class="sm-12 md-6 lg-8 has-gutter" style="background: #e1e1e1">8</div>
118+
<div class="sm-12 md-6 lg-4 has-gutter" style="background: #c6c6c6">4</div>
119119
</div>
120120
<div class="row text-center">
121-
<div class="sm-12 md-6 lg-9" style="background: #e1e1e1">9</div>
122-
<div class="sm-12 md-6 lg-3" style="background: #c6c6c6">3</div>
121+
<div class="sm-12 md-6 lg-9 has-gutter" style="background: #e1e1e1">9</div>
122+
<div class="sm-12 md-6 lg-3 has-gutter" style="background: #c6c6c6">3</div>
123123
</div>
124124
<div class="row text-center">
125-
<div class="sm-12 md-6 lg-10" style="background: #e1e1e1">10</div>
126-
<div class="sm-12 md-6 lg-2" style="background: #c6c6c6">2</div>
125+
<div class="sm-12 md-6 lg-10 has-gutter" style="background: #e1e1e1">10</div>
126+
<div class="sm-12 md-6 lg-2 has-gutter" style="background: #c6c6c6">2</div>
127127
</div>
128128
<div class="row text-center">
129-
<div class="sm-12 md-6 lg-11" style="background: #e1e1e1">11</div>
130-
<div class="sm-12 md-6 lg-1" style="background: #c6c6c6">1</div>
129+
<div class="sm-12 md-6 lg-11 has-gutter" style="background: #e1e1e1">11</div>
130+
<div class="sm-12 md-6 lg-1 has-gutter" style="background: #c6c6c6">1</div>
131131
</div>
132132

133133
<div class="clearfix"></div>
@@ -168,6 +168,10 @@ <h1>Toggle</h1>
168168

169169
<div class="toggle" id="toggle-example">Hello!</div>
170170

171+
<a href="#" class="toggle-trigger" data-options='{ "toggle": "toggle-example2", "closeOnClick": true }'>Toggle (close on click)</a>
172+
173+
<div class="toggle" id="toggle-example2">Hello again!</div>
174+
171175
<h1>Tabs</h1>
172176

173177
<ul class="tabs">

0 commit comments

Comments
 (0)