Skip to content

Commit a40a52e

Browse files
author
AMJones
committed
Adds composer config, documentation, various functions.
1 parent c99f57c commit a40a52e

File tree

5 files changed

+195
-13
lines changed

5 files changed

+195
-13
lines changed

‎composer.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "strapless/responsive",
3+
"description": "SASS utilities for responsive web design.",
4+
"keywords": [
5+
"responsive",
6+
"sass",
7+
"scss",
8+
"strapless",
9+
"css"
10+
],
11+
"homepage": "https://www.github.com/strapless/responsive",
12+
"version": "1.0",
13+
"authors": [
14+
{
15+
"name": "Aaron M Jones",
16+
"homepage": "http://www.jonesiscoding.com"
17+
}
18+
],
19+
"license": "MIT",
20+
"require": {
21+
"strapless/base": "^1.1",
22+
"exactquery/xq-detect": "^2.2"
23+
}
24+
}

‎scss/_rwd-functions.scss‎

Lines changed: 94 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
@import "rwd-variables";
2+
@import "strapless/base/scss/functions/map";
23

4+
// region //////////////////////////////////////////////// String Functions
5+
6+
// Explodes a string into a SASS list by the given delimiter
7+
// @author Hugo Giraudel (modified from original)
38
@function _str-explode($string, $delimiter: "") {
49
$result: ();
510
$length: str-length($string);
@@ -30,7 +35,71 @@
3035
@return append($result, $remaining);
3136
}
3237

38+
// endregion ///////////////////////////////////////////// End String Functions
39+
40+
// region //////////////////////////////////////////////// Breakpoint Functions
41+
42+
// Returns -breakpoint for adding into class selectors.
43+
// For breakpoints with no minimum size, returns null.
44+
@function breakpoint-infix($bp) {
45+
@if variable-exists(grid-breakpoints) == false {
46+
@error 'You must set the $grid-breakpoints map prior to the first usage of the `breakpoint-infix` function.';
47+
}
48+
@if map-has-key($grid-breakpoints, $bp) {
49+
$min: strip-unit(map-get($grid-breakpoints, $bp));
50+
@if $min > 0 {
51+
@return -#{$bp};
52+
}
53+
}
54+
55+
@return null;
56+
}
57+
58+
// Returns the max width for the given breakpoint.
59+
@function breakpoint($breakpoint) {
60+
@if map-has-key($grid-breakpoints,$breakpoint) {
61+
@return map-get($grid-breakpoints, $breakpoint);
62+
}
63+
64+
@error "The breakpoint `#{$breakpoint} does not exist in the $grid-breakpoints map.";
65+
}
66+
67+
// Returns the max container width for the given breakpoint.
68+
@function container($breakpoint) {
69+
@if map-has-key($container-max-widths,$breakpoint) {
70+
@return map-get($container-max-widths, $breakpoint);
71+
}
72+
73+
@error "The breakpoint `#{$breakpoint} does not exist in the $container-max-widths map.";
74+
}
3375

76+
// Sets the width for a given breakpoint to the given value
77+
// This is a mixin, as SASS functions should not have consequences.
78+
@mixin set-breakpoint($breakpoint,$value) {
79+
@if not(variable-exists(grid-breakpoints)) {
80+
@error "You may not use the `set-breakpoint` mixin without the $grid-breakpoints map. Please include `root-variables` prior to this usage."
81+
} @else {
82+
$grid-breakpoints: set-map-key($grid-breakpoints, $breakpoint, $value) !global;
83+
}
84+
}
85+
86+
// Sets the container max width for the given breakpoint to
87+
// the given value. This is a mixin, as SASS functions should
88+
// not have consequences.
89+
@mixin set-max-width($breakpoint,$value) {
90+
@if not(variable-exists(container-max-widths)) {
91+
@error "You may not use the `set-max-width` mixin without the $container-max-widths map. Please include `root-variables` prior to this usage."
92+
} @else {
93+
$container-max-widths: set-map-key($container-max-widths, $breakpoint, $value) !global;
94+
}
95+
}
96+
97+
// endregion ///////////////////////////////////////////// End Breakpoint Functions
98+
99+
// region //////////////////////////////////////////////// Media Expression Functions
100+
101+
// Gets the operator prefixing a value in an expression.
102+
// @author Hugo Giraudel
34103
@function get-expression-operator($expression) {
35104
@each $operator in ('>=', '<=', '>', '<', '≥', '≤', '=') {
36105
@if str-index($expression, $operator) {
@@ -41,12 +110,16 @@
41110
@return '';
42111
}
43112

113+
// Gets the value of an expression given the prefixing operator.
114+
// @author Hugo Giraudel
44115
@function get-expression-value($expression, $operator) {
45116
$operator-index: str-index($expression, $operator);
46117
$value: str-slice($expression, $operator-index + str-length($operator));
47118
@return $value;
48119
}
49120

121+
// Returns the proper condition string to use in a CSS media
122+
// query for the given minimum and maximum width.
50123
@function get-width-string($operator, $min: 0, $max: 0) {
51124
@if $operator == '≥' { $operator: '>='; }
52125
@if $operator == '≤' { $operator: '<='; }
@@ -69,7 +142,10 @@
69142
@return '';
70143
}
71144

72-
@function get-condition-string($viewport,$operator) {
145+
// Returns the proper condition string to use in a CSS media
146+
// query for the given breakpoint. The $grid-breakpoints
147+
// variable must be accessible for this function.
148+
@function get-breakpoint-string($viewport,$operator) {
73149
@each $class, $min in $grid-breakpoints {
74150
@if($class == $viewport) {
75151
$max: map-get-next($grid-breakpoints,$class, 0);
@@ -80,6 +156,7 @@
80156
@return '';
81157
}
82158

159+
// Determines if the string given is a CSS media type.
83160
@function is-media-type($string) {
84161
@if type-of($string) == string {
85162
$types: (all, print, screen, speech, tty, tv, projection, handheld, braille, embossed, aural);
@@ -94,14 +171,11 @@
94171
@return false;
95172
}
96173

97-
@function add-condition($conditions-string, $new-string) {
98-
@if type-of($conditions-string) == null {
99-
@if not(is-media-type($new-string)) {
100-
$conditions-string: unquote("all");
101-
}
102-
}
103-
}
174+
// endregion ///////////////////////////////////////////// End Media Expression Functions
175+
176+
// region //////////////////////////////////////////////// Selector/Media Targeting Functions
104177

178+
// Returns media query for the given conditions.
105179
@function _media($conditions...) {
106180
$compiled-list: ();
107181
@for $i from 1 through length($conditions) {
@@ -115,7 +189,7 @@
115189
$value: get-expression-value($condition,$operator);
116190
@if map-has-key($grid-breakpoints, $value) {
117191
// Breakpoint Based Conditions
118-
$compiled-list: append($compiled-list, get-condition-string($value, $operator), comma);
192+
$compiled-list: append($compiled-list, get-breakpoint-string($value, $operator), comma);
119193
} @else {
120194
// Width Based Condition
121195
$compiled-list: append($compiled-list, get-width-string($operator,$value,$value), comma );
@@ -148,6 +222,9 @@
148222
@return $conditions-string;
149223
}
150224

225+
// Returns selector for targeting a specific browser based on a user
226+
// agent placed in the HTML tag by xq-detect. As user agents can easily
227+
// be spoofed, this should only be used for minimal 'hacks'.
151228
@function _browser-target($browser, $version: null, $negate: false) {
152229
$sep: '';
153230
@if map-has-key($target-user-agent,$browser) {
@@ -161,6 +238,9 @@
161238
@return null;
162239
}
163240

241+
// Returns selector targeting a specific feature that cannot
242+
// be targeted with media queries. Requires usage of xq-detect
243+
// in the head of the document. Also works with Modernizr.
164244
@function _feature-target($feature, $negate: false) {
165245
@if map-has-key($target-feature, $feature) {
166246
$sel: unquote(map-get($target-feature, $feature));
@@ -171,7 +251,7 @@
171251
@return null;
172252
}
173253

174-
254+
// Returns selector for given targets
175255
@function _target($targets...) {
176256
$class: '';
177257
$ua: '';
@@ -191,4 +271,7 @@
191271
}
192272

193273
@return unquote('html#{$class}#{$ua}');
194-
}
274+
}
275+
276+
277+
// endregion ///////////////////////////////////////////// End Selector/Media Targeting Functions

‎scss/_rwd-mixins.scss‎

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,119 @@
11
@import "rwd-variables";
22
@import "rwd-functions";
33

4-
// Used with @include media("<sm",">xs") etc.
4+
// Wraps the given content in the appropriate media
5+
// query for the given conditions. If no media type
6+
// is included in the conditions, the 'all' media type
7+
// is used.
58
@mixin media($conditions...) {
69
@media #{_media($conditions...)} {
710
@content;
811
}
912
}
1013

14+
// Wraps the given content in a media query targeting
15+
// devices without a 'fine' pointing device. On Firefox
16+
// browsers, this may include all touch devices.
1117
@mixin only-touch() {
1218
@media #{_media("screen", "touch")} {
1319
@content;
1420
}
1521
}
1622

23+
// Wraps the given content in a parent CSS selector that
24+
// targets only browsers without CSS Media Query 4 capabilities.
25+
// Requires xq-detect's JS in the head of the document.
1726
@mixin only-fallback() {
1827
#{_target("fallback")} {
1928
@content;
2029
}
2130
}
2231

32+
// Wraps the given content in a parent CSS selector that targets
33+
// only browser without CSS (standard) flexbox capabilities.
34+
// NOTE: This mixin will not include IE10!
35+
//
36+
// Requires xq-detect's JS in the head of the document.
2337
@mixin only-baseline() {
2438
#{_target("baseline")} {
2539
@content;
2640
}
2741
}
2842

43+
// Wraps the given content in a parent CSS selector that targets
44+
// only Safari browsers.
45+
//
46+
// IMPORTANT: This uses the user agent, and should only be used
47+
// for minimal hacks that tweak appearance.
48+
//
49+
// NOTE: Requires xq-detect's JS in the head of the document.
2950
@mixin only-safari() {
3051
#{_target("safari")} {
3152
@content;
3253
}
3354
}
3455

56+
// Wraps the given content in a parent CSS selector that targets
57+
// only Safari 10 browsers.
58+
//
59+
// IMPORTANT: This uses the user agent, and should only be used
60+
// for minimal hacks that tweak appearance.
61+
//
62+
// NOTE: Requires xq-detect's JS in the head of the document.
3563
@mixin only-safari-10() {
3664
#{_target("safari")} {
3765
@content;
3866
}
3967
}
4068

69+
// Wraps the given content in a parent CSS selector that targets
70+
// only Microsoft Edge
71+
//
72+
// IMPORTANT: This uses the user agent, and should only be used
73+
// for minimal hacks that tweak appearance.
74+
//
75+
// NOTE: Requires xq-detect's JS in the head of the document.
4176
@mixin only-edge() {
4277
#{_target("edge")} {
4378
@content;
4479
}
4580
}
4681

82+
// Wraps the given content in a parent CSS selector that targets
83+
// only Internet Explorer browsers.
84+
//
85+
// IMPORTANT: This uses the user agent, and should only be used
86+
// for minimal hacks that tweak appearance.
87+
//
88+
// NOTE: Requires xq-detect's JS in the head of the document.
4789
@mixin only-ie() {
4890
#{_target("ie")} {
4991
@content;
5092
}
5193
}
5294

95+
// Wraps the given content in a parent CSS selector that targets
96+
// only Internet Explorer 10.
97+
//
98+
// IMPORTANT: This uses the user agent, and should only be used
99+
// for minimal hacks that tweak appearance.
100+
//
101+
// NOTE: Requires xq-detect's JS in the head of the document.
53102
@mixin only-ie-10() {
54103
#{_target("ie 10")} {
55104
@content;
56105
}
106+
}
107+
108+
// Wraps the given content in a parent CSS selector that targets
109+
// only Internet Explorer 11.
110+
//
111+
// IMPORTANT: This uses the user agent, and should only be used
112+
// for minimal hacks that tweak appearance.
113+
//
114+
// NOTE: Requires xq-detect's JS in the head of the document.
115+
@mixin only-ie-11() {
116+
#{_target("ie 11")} {
117+
@content;
118+
}
57119
}

‎scss/_rwd-variables.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11

2+
// region //////////////////////////////////////////////// Breakpoints
3+
24
$grid-breakpoints: (
35
xs: 0,
46
sm: 576px,
@@ -14,6 +16,11 @@ $container-max-widths: (
1416
xl: 1140px
1517
) !default;
1618

19+
// endregion ///////////////////////////////////////////// End Breakpoints
20+
21+
// region //////////////////////////////////////////////// Targeting Maps
22+
23+
// Media Query Targets
1724
$condition-map: (
1825
"screen": "screen",
1926
"print" : "print ",
@@ -23,13 +30,17 @@ $condition-map: (
2330
"hidpi" : "(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)"
2431
);
2532

33+
// Feature-Based Targets (requires d.js)
2634
$target-feature: (
2735
"fallback" : '.fallback',
2836
"baseline" : '.baseline',
2937
);
3038

39+
// User-Agent Based Targets (requires d.js)
3140
$target-user-agent: (
3241
"ie" : "Trident",
3342
"edge" : "Edge",
3443
"safari" : "Version",
35-
);
44+
);
45+
46+
// endregion ///////////////////////////////////////////// End Targeting Maps

‎scss/_rwd.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
@import "rwd-mixins";

0 commit comments

Comments
 (0)