Skip to content

Commit b73e63c

Browse files
maciej-gurbanmaciej-gurban
committed
Merge pull request #10 from maciej-gurban/feature/Enhanced-breakpoint-matching
Feature/enhanced breakpoint matching
2 parents e5d43ea + 69f0117 commit b73e63c

File tree

8 files changed

+335
-82
lines changed

8 files changed

+335
-82
lines changed

‎CHANGELOG.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
### Changelog
22

3+
**2.4.1**
4+
5+
Updating Bootstrap visibility classes for future compliancy, updating documentation to reflect changes in version 2.4.0, and small code refactoring.
6+
7+
**2.4.0**
8+
9+
Introducing comparison operators in the form of `viewport.is(">md").
10+
311
**2.3.0**
412

513
Removing the requirement to insert visibility divs into the document.

‎README.md‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in Jav
55

66
The SASS module enables quick and simple styling for elements needing different property values for each screen resolution.
77

8-
Current version: **2.3.0**
8+
Current version: **2.4.1**
99

1010
### Table of Contents
11+
* [Installation](#installation)
1112
* [Live example](#live-example)
1213
* [Migrating from an older version](#migrating-from-an-older-version)
1314
* JavaScript features
@@ -22,8 +23,12 @@ Current version: **2.3.0**
2223
* [How do I include it in my project?](#sass-instructions)
2324
* [Dependencies](#sass-dependencies)
2425

25-
### Live example
26+
### Installation
2627

28+
### Live example
29+
````
30+
bower install responsive-bootstrap-toolkit
31+
````
2732
Available on [CodePen](http://codepen.io/dih/full/ivECj)
2833

2934
### Migrating from an older version
@@ -37,11 +42,21 @@ Refer to the [changelog](https://github.com/maciej-gurban/responsive-bootstrap-t
3742
// Wrap IIFE around your code
3843
(function($, viewport){
3944

40-
// Do stuff in the lowest resolutions only
45+
// Executes only in XS breakpoint
4146
if( viewport.is('xs') ) {
4247
// ...
4348
}
4449

50+
// Executes in SM, MD and LG breakpoints
51+
if( viewport.is('>=sm') ) {
52+
// ...
53+
}
54+
55+
// Executes in XS and SM breakpoints
56+
if( viewport.is('<md') ) {
57+
// ...
58+
}
59+
4560
// Execute code each time window size changes
4661
$(window).bind('resize', function() {
4762
viewport.changed(function(){
@@ -149,6 +164,9 @@ Output:
149164
#### SASS Instructions
150165
Copy contents of `compass/bootstrap-toolkit` directory into your project. File `style.scss` contains lines that need to be in your own style.scss for the mixin to work. You'll need SASS 3.3+.
151166

167+
To start working on project's SASS, run in project's root directory.
168+
`compass watch compass/`
169+
152170

153171
#### SASS Dependencies
154172
* SASS 3.3+

‎compass/bootstrap-toolkit/style.scss‎

Lines changed: 91 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,57 +3,96 @@
33
*
44
* Release notes:
55
*
6-
* SASS/Compass will not group media queries, causing quite a lot
7-
* of repetition in the output CSS. GZIP however, will take care of
8-
* the repetition making it negligible.
6+
* SASS/Compass will not group media queries, causing quite a lot of repetition in the output CSS.
7+
* GZIP however, will take care of the repetition making it negligible.
98
*
10-
* Most CSS minifiers can group media query contents. See:
11-
* http://www.minifycss.com/css-compressor/
9+
* Most CSS minifiers can group media query contents. See: http://www.minifycss.com/css-compressor/
1210
*
1311
*/
1412

15-
// Breakpoint starting viewport widths
16-
$sm: 768px;
17-
$md: 984px;
18-
$lg: 1200px;
13+
/**
14+
* Breakpoint starting viewport widths
15+
*/
16+
$sm: 768px;
17+
$md: 984px;
18+
$lg: 1200px;
19+
20+
@import "variables";
21+
@import "mixins";
22+
23+
24+
25+
/**
26+
* Nothing below is required for Responsive Bootstrap Toolkit to operate
27+
*/
1928

20-
@import "variables";
21-
@import "mixins";
2229

30+
$colors: (
31+
dark-gray: #414141,
32+
gray: #666666,
33+
blue: #238cce
34+
);
35+
36+
@function palette( $color-name ) {
37+
@return map-get($colors, $color-name);
38+
}
2339

40+
@mixin align-vertically( $height ) {
41+
height: $height;
42+
line-height: $height;
43+
vertical-align: middle;
44+
}
2445

25-
// Nothing below is required for Responsive Bootstrap Toolkit to operate
2646

27-
$initial_bar_height: 60px;
2847

48+
// Toolbar showing currently active breakpoint
2949
.breakpoint-alias:before {
30-
@include set(content, (xs: 'XS', sm: 'SM', md: 'MD', lg: 'LG') );
50+
@include set(
51+
content, (
52+
xs: 'XS',
53+
sm: 'SM',
54+
md: 'MD',
55+
lg: 'LG'
56+
)
57+
);
58+
}
59+
60+
61+
body {
62+
font-family: 'Open Sans', sans-serif;
3163
}
3264

3365
h1 {
3466
@include set(font-size, (xs: 20px, sm: 24px, md: 24px, lg: 30px) );
3567
}
3668

69+
70+
71+
72+
73+
3774
.wrapper {
38-
background: #fff;
39-
color: #666;
75+
76+
background: white;
77+
color: palette(gray);
78+
4079
.site-topbar {
41-
background: #414141;
42-
color: #fff;
43-
height: $initial_bar_height;
44-
line-height: $initial_bar_height;
80+
@include align-vertically( 60px );
81+
82+
background: palette(dark-gray);
83+
color: white;
4584
position: relative;
4685
vertical-align: middle;
4786
//
4887
h5 {
88+
@include align-vertically( inherit );
89+
4990
font-weight: 300;
50-
height: $initial_bar_height;
51-
line-height: $initial_bar_height;
5291
margin: 0 60px 0 15px;
5392
vertical-align: middle;
5493
}
5594
.breakpoint-alias {
56-
background-color: #238cce;
95+
background-color: palette(blue);
5796
position: absolute;
5897
top: 0;
5998
bottom: 0;
@@ -65,6 +104,35 @@ h1 {
65104
}
66105

67106

107+
.comparison-boxes {
108+
text-align: justify;
109+
font-size: 0.1px;
110+
111+
&:after {
112+
content: '';
113+
display: inline-block;
114+
width: 100%;
115+
}
116+
}
117+
118+
.comparison-operator {
119+
@include align-vertically( 140px );
120+
121+
display: inline-block;
122+
background: palette(dark-gray);
123+
color: white;
124+
font-size: 25px;
125+
text-align: center;
126+
width: 33%;
127+
min-height: 50%;
128+
129+
&.active {
130+
background: palette(blue);
131+
}
132+
133+
}
134+
135+
68136
// Helpers
69137
.text-uppercase {
70138
text-transform: uppercase;

‎index.html‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@
55
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title>Responsive Bootstrap Toolkit</title>
8+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
89
<!-- Include default Bootstrap stylesheet -->
9-
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
10+
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
1011
<!-- Include stylesheet of this example -->
1112
<link rel="stylesheet" type="text/css" href="style.css" rel="stylesheet"/>
1213
</head>
@@ -21,18 +22,31 @@ <h5 class="text-uppercase">Responsive Bootstrap Toolkit</h5>
2122

2223
<div class="container-fluid">
2324
<div class="row">
24-
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
25-
<h4>Example #1</h4>
26-
<p>In this example, height of the top bar will collapse whenever XS breakpoints is reached, and restore to the original if higher breakpoint is detected.</p>
27-
<p>To verify which breakpoint you're currenly browsing, refer to the blue box in the top right corner storing current breakpoint's alias.</p>
25+
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-push-2 col-md-push-3 col-lg-push-3">
26+
<br/>
27+
<br/>
28+
<p>Boxes below get highlighted whenever current viewport matches their expression. Alias of current breakpoint is visible in the top right corner.</p>
29+
<br/>
30+
31+
<div class="comparison-boxes">
32+
<div class="comparison-operator box-1">
33+
&lt;=sm
34+
</div>
35+
<div class="comparison-operator box-2">
36+
md
37+
</div>
38+
<div class="comparison-operator box-3">
39+
&gt;md
40+
</div>
41+
</div>
2842
</div>
2943
</div>
3044
</div>
3145

3246
</div>
3347

3448
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
35-
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
49+
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
3650

3751
<script src="js/bootstrap-toolkit.js"></script>
3852
<script src="js/main.js"></script>

0 commit comments

Comments
 (0)