Skip to content

Commit 69f0117

Browse files
author
Maciej Gurban
committed
Updated visibility classes, new example, code refactoring
Also: - bumping version to 2.4.1 - adding Open Sans font - removing older example preview
1 parent ef803c4 commit 69f0117

File tree

8 files changed

+229
-86
lines changed

8 files changed

+229
-86
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>

‎js/bootstrap-toolkit.js‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Responsive Bootstrap Toolkit
33
* Author: Maciej Gurban
44
* License: MIT
5-
* Version: 2.4.0 (2015-04-12)
5+
* Version: 2.4.1 (2015-04-19)
66
* Origin: https://github.com/maciej-gurban/responsive-bootstrap-toolkit
77
*/
88
;var ResponsiveBootstrapToolkit = (function($){
@@ -21,16 +21,22 @@
2121
* Splits the expression in into <|> [=] alias
2222
*/
2323
splitExpression: function( str ) {
24+
2425
// Used operator
25-
var operator = (str.charAt(0) == '<' || str.charAt(0) == '>') ? str.charAt(0) : false;
26-
// Include breakpoints equal to X?
26+
var operator = str.charAt(0);
27+
// Include breakpoint equal to alias?
2728
var orEqual = (str.charAt(1) == '=') ? true : false
2829

29-
// Cast to boolean, then to integer
30-
var index = (!!operator ? 1 : 0) + (orEqual ? 1 : 0);
30+
/**
31+
* Index at which breakpoint name starts.
32+
*
33+
* For: >sm, index = 1
34+
* For: >=sm, index = 2
35+
*/
36+
var index = 1 + (orEqual ? 1 : 0);
3137

3238
/**
33-
* The remaining part of the expression, after the operator, will be treated as
39+
* The remaining part of the expression, after the operator, will be treated as the
3440
* breakpoint name to compare with
3541
*/
3642
var breakpointName = str.slice(index);
@@ -60,9 +66,9 @@
6066
/**
6167
* Determines whether current breakpoint matches the expression given
6268
*/
63-
isMatchingExpression: function( string ) {
69+
isMatchingExpression: function( str ) {
6470

65-
var expression = internal.splitExpression( string );
71+
var expression = internal.splitExpression( str );
6672

6773
// Get names of all breakpoints
6874
var breakpointList = Object.keys(self.breakpoints);
@@ -108,7 +114,7 @@
108114
return internal.isAnyActive( acceptedBreakpoints );
109115

110116
}
111-
},
117+
}
112118

113119
};
114120

@@ -124,13 +130,15 @@
124130
* Breakpoint aliases, listed from smallest to biggest
125131
*/
126132
breakpoints: {
127-
'xs': $('<div class="device-xs visible-xs"></div>').appendTo('body'),
128-
'sm': $('<div class="device-sm visible-sm"></div>').appendTo('body'),
129-
'md': $('<div class="device-md visible-md"></div>').appendTo('body'),
130-
'lg': $('<div class="device-lg visible-lg"></div>').appendTo('body')
133+
'xs': $('<div class="device-xs visible-xs visible-xs-block"></div>').appendTo('body'),
134+
'sm': $('<div class="device-sm visible-sm visible-sm-block"></div>').appendTo('body'),
135+
'md': $('<div class="device-md visible-md visible-md-block"></div>').appendTo('body'),
136+
'lg': $('<div class="device-lg visible-lg visible-lg-block"></div>').appendTo('body')
131137
},
132138

133139
/**
140+
* Debouncing helper
141+
*
134142
* Used to calculate intervals between consecutive function executions
135143
*/
136144
timer: new Date(),
@@ -161,18 +169,20 @@
161169
},
162170

163171
/*
164-
* Waits specified number of miliseconds before executing a function
172+
* Waits specified number of miliseconds before executing a callback
165173
* Source: http://stackoverflow.com/a/4541963/2066118
166174
*/
167175
changed: function() {
168176
var timers = {};
169177
return function(callback, ms) {
170178
// Get unique timer ID
171179
var uID = (!uID) ? self.timer.getTime() : null;
180+
172181
if (timers[uID]) {
173182
clearTimeout(timers[uID]);
174183
}
175-
// Use default interval if none specified
184+
185+
// Uses default interval if none specified
176186
if (typeof ms === "undefined") {
177187
var ms = self.interval;
178188
}

‎js/bootstrap-toolkit.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)