Skip to content

Commit c99f57c

Browse files
jonesiscodingjonesiscoding
committed
Initial commit.
1 parent 1920265 commit c99f57c

File tree

3 files changed

+286
-0
lines changed

3 files changed

+286
-0
lines changed

‎scss/_rwd-functions.scss‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
@import "rwd-variables";
2+
3+
@function _str-explode($string, $delimiter: "") {
4+
$result: ();
5+
$length: str-length($string);
6+
7+
@if str-length($delimiter) == 0 {
8+
@for $i from 1 through $length {
9+
$result: append($result, str-slice($string, $i, $i));
10+
}
11+
12+
@return $result;
13+
}
14+
15+
$running: true;
16+
$remaining: $string;
17+
18+
@while $running {
19+
$index: str-index($remaining, $delimiter);
20+
21+
@if $index {
22+
$slice: str-slice($remaining, 1, $index - 1);
23+
$result: append($result, $slice);
24+
$remaining: str-slice($remaining, $index + str-length($delimiter));
25+
} @else {
26+
$running: false;
27+
}
28+
}
29+
30+
@return append($result, $remaining);
31+
}
32+
33+
34+
@function get-expression-operator($expression) {
35+
@each $operator in ('>=', '<=', '>', '<', '≥', '≤', '=') {
36+
@if str-index($expression, $operator) {
37+
@return $operator;
38+
}
39+
}
40+
41+
@return '';
42+
}
43+
44+
@function get-expression-value($expression, $operator) {
45+
$operator-index: str-index($expression, $operator);
46+
$value: str-slice($expression, $operator-index + str-length($operator));
47+
@return $value;
48+
}
49+
50+
@function get-width-string($operator, $min: 0, $max: 0) {
51+
@if $operator == '≥' { $operator: '>='; }
52+
@if $operator == '≤' { $operator: '<='; }
53+
@if $operator == '=' {
54+
@if $max > 0 {
55+
@return ' (min-width: ' + $min + ') and (max-width: ' + $max + ')';
56+
} @else {
57+
@return ' (min-width: ' + $min + ')';
58+
}
59+
} @else if $operator == '<' {
60+
@return ' (max-width: ' + ($min - 1) + ')';
61+
} @else if $operator == '>' {
62+
@return ' (min-width: ' + ($max + 1) + ')';
63+
} @else if $operator == '<=' {
64+
@return ' (max-width: ' + $max + ')';
65+
} @else if $operator == '>=' {
66+
@return ' (min-width: ' + $min + ')';
67+
}
68+
69+
@return '';
70+
}
71+
72+
@function get-condition-string($viewport,$operator) {
73+
@each $class, $min in $grid-breakpoints {
74+
@if($class == $viewport) {
75+
$max: map-get-next($grid-breakpoints,$class, 0);
76+
@return get-width-string($operator,$min,$max);
77+
}
78+
}
79+
80+
@return '';
81+
}
82+
83+
@function is-media-type($string) {
84+
@if type-of($string) == string {
85+
$types: (all, print, screen, speech, tty, tv, projection, handheld, braille, embossed, aural);
86+
@for $i from 1 through length($types) {
87+
$type: nth($types,$i);
88+
@if $string == $type {
89+
@return true;
90+
}
91+
}
92+
}
93+
94+
@return false;
95+
}
96+
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+
}
104+
105+
@function _media($conditions...) {
106+
$compiled-list: ();
107+
@for $i from 1 through length($conditions) {
108+
$condition: unquote(quote(nth($conditions,$i)));
109+
110+
// Basic String Conditions
111+
@if map-has-key($condition-map, $condition) {
112+
$compiled-list: append( $compiled-list, map-get( $condition-map,$condition ), comma );
113+
} @else {
114+
$operator: get-expression-operator($condition);
115+
$value: get-expression-value($condition,$operator);
116+
@if map-has-key($grid-breakpoints, $value) {
117+
// Breakpoint Based Conditions
118+
$compiled-list: append($compiled-list, get-condition-string($value, $operator), comma);
119+
} @else {
120+
// Width Based Condition
121+
$compiled-list: append($compiled-list, get-width-string($operator,$value,$value), comma );
122+
}
123+
}
124+
}
125+
126+
$conditions-string: '';
127+
@for $i from 1 through length($compiled-list) {
128+
$this: nth($compiled-list, $i);
129+
$last: if($i > 1, nth($compiled-list, $i - 1), null);
130+
$sep: '';
131+
132+
@if $i == 1 and $conditions-string == '' and not(is-media-type($this)) {
133+
$last: all;
134+
$conditions-string: all;
135+
}
136+
137+
@if $conditions-string != '' {
138+
@if is-media-type($last) and not(is-media-type($this)) {
139+
$sep: unquote(" and ");
140+
} @else {
141+
$sep: unquote(", ");
142+
}
143+
}
144+
145+
$conditions-string: $conditions-string + $sep + $this;
146+
}
147+
148+
@return $conditions-string;
149+
}
150+
151+
@function _browser-target($browser, $version: null, $negate: false) {
152+
$sep: '';
153+
@if map-has-key($target-user-agent,$browser) {
154+
$ua: unquote(map-get($target-user-agent, $browser));
155+
$sep: if($version,'/','');
156+
$ua-sel: unquote('[data-user-agent="#{$ua}#{$sep}#{$version}"]');
157+
158+
@return if($negate,unquote(":not(#{$ua-sel})"),$ua-sel);
159+
}
160+
161+
@return null;
162+
}
163+
164+
@function _feature-target($feature, $negate: false) {
165+
@if map-has-key($target-feature, $feature) {
166+
$sel: unquote(map-get($target-feature, $feature));
167+
168+
@return if($negate, unquote(":not(#{$sel})"), $sel);
169+
}
170+
171+
@return null;
172+
}
173+
174+
175+
@function _target($targets...) {
176+
$class: '';
177+
$ua: '';
178+
@for $i from 1 through length($targets) {
179+
$list: _str-explode(nth($targets,$i)," ");
180+
$negate: if(nth($list,1) == unquote("not"), true, false);
181+
$criteria: if($negate, nth($list,2), nth($list,1));
182+
183+
@if(map-has-key($target-user-agent,$criteria)) {
184+
$browser: $criteria;
185+
$v-index: if($negate, 3, 2);
186+
$version: if(length($list) >= $v-index, nth($list,$v-index), null);
187+
$ua: $ua + _browser-target( $criteria, $version, $negate );
188+
} @else {
189+
$class: $class + _feature-target( $criteria, $negate );
190+
}
191+
}
192+
193+
@return unquote('html#{$class}#{$ua}');
194+
}

‎scss/_rwd-mixins.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@import "rwd-variables";
2+
@import "rwd-functions";
3+
4+
// Used with @include media("<sm",">xs") etc.
5+
@mixin media($conditions...) {
6+
@media #{_media($conditions...)} {
7+
@content;
8+
}
9+
}
10+
11+
@mixin only-touch() {
12+
@media #{_media("screen", "touch")} {
13+
@content;
14+
}
15+
}
16+
17+
@mixin only-fallback() {
18+
#{_target("fallback")} {
19+
@content;
20+
}
21+
}
22+
23+
@mixin only-baseline() {
24+
#{_target("baseline")} {
25+
@content;
26+
}
27+
}
28+
29+
@mixin only-safari() {
30+
#{_target("safari")} {
31+
@content;
32+
}
33+
}
34+
35+
@mixin only-safari-10() {
36+
#{_target("safari")} {
37+
@content;
38+
}
39+
}
40+
41+
@mixin only-edge() {
42+
#{_target("edge")} {
43+
@content;
44+
}
45+
}
46+
47+
@mixin only-ie() {
48+
#{_target("ie")} {
49+
@content;
50+
}
51+
}
52+
53+
@mixin only-ie-10() {
54+
#{_target("ie 10")} {
55+
@content;
56+
}
57+
}

‎scss/_rwd-variables.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
$grid-breakpoints: (
3+
xs: 0,
4+
sm: 576px,
5+
md: 768px,
6+
lg: 992px,
7+
xl: 1200px
8+
) !default;
9+
10+
$container-max-widths: (
11+
sm: 540px,
12+
md: 720px,
13+
lg: 960px,
14+
xl: 1140px
15+
) !default;
16+
17+
$condition-map: (
18+
"screen": "screen",
19+
"print" : "print ",
20+
"coarse": "(pointer: fine)",
21+
"touch" : "(pointer: coarse), (-moz-touch-enabled)",
22+
"fine" : "(pointer: fine), not all and (-moz-touch-enabled)",
23+
"hidpi" : "(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)"
24+
);
25+
26+
$target-feature: (
27+
"fallback" : '.fallback',
28+
"baseline" : '.baseline',
29+
);
30+
31+
$target-user-agent: (
32+
"ie" : "Trident",
33+
"edge" : "Edge",
34+
"safari" : "Version",
35+
);

0 commit comments

Comments
 (0)