skeletor_backbone 0.0.5 → 0.0.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +3 -0
- data/app/assets/images/skeletor/skeletor.png +0 -0
- data/app/assets/stylesheets/skeletor-preview.sass +17 -0
- data/app/assets/stylesheets/skeletor.sass +64 -13
- data/app/assets/stylesheets/skeletor/_css3.sass +16 -16
- data/app/assets/stylesheets/skeletor/_functions.sass +8 -8
- data/app/assets/stylesheets/skeletor/_mixins.sass +20 -18
- data/app/assets/stylesheets/skeletor/_modules.sass +6 -8
- data/app/assets/stylesheets/skeletor/_settings.sass +15 -8
- data/app/assets/stylesheets/skeletor/{base/debug.sass → core/_debug.sass} +10 -18
- data/app/assets/stylesheets/skeletor/{layout → core}/_grid.sass +0 -0
- data/app/assets/stylesheets/skeletor/core/_helpers.sass +142 -0
- data/app/assets/stylesheets/skeletor/{base/print.sass → core/_print.sass} +3 -1
- data/app/assets/stylesheets/skeletor/{base/reset.sass → core/_reset.sass} +6 -3
- data/app/assets/stylesheets/skeletor/{base/foundation.sass → core/base.sass} +81 -148
- data/app/assets/stylesheets/skeletor/core/content.sass +93 -0
- data/app/assets/stylesheets/skeletor/{layout/skeleton.sass → core/layout.sass} +45 -6
- data/app/assets/stylesheets/skeletor/globals/css3/_prefixer.sass +14 -14
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_em.sass +8 -19
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_modular_scale.sass +6 -16
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_percent.sass +9 -20
- data/app/assets/stylesheets/skeletor/globals/functions/_calculate_rem.sass +9 -20
- data/app/assets/stylesheets/skeletor/globals/functions/_strip_units.sass +6 -16
- data/app/assets/stylesheets/skeletor/globals/mixins/_font_size.sass +31 -0
- data/app/assets/stylesheets/skeletor/globals/mixins/_media_query.sass +2 -6
- data/app/assets/stylesheets/skeletor/globals/mixins/_rem.sass +6 -61
- data/app/assets/stylesheets/skeletor/globals/mixins/_vertical_spacing.sass +29 -0
- data/app/assets/stylesheets/skeletor/modules/_forms.sass +27 -0
- data/app/assets/stylesheets/skeletor/modules/_rules.sass +54 -0
- data/app/assets/stylesheets/skeletor/modules/_tables.sass +43 -0
- data/app/controllers/skeletor_backbone/skeletor_controller.rb +10 -0
- data/app/views/skeletor_backbone/skeletor/index.html.erb +445 -0
- data/config/routes.rb +5 -0
- data/lib/generators/skeletor/install_generator.rb +2 -1
- data/lib/skeletor_backbone.rb +2 -2
- data/lib/skeletor_backbone/version.rb +1 -1
- data/skeletor_backbone.gemspec +2 -2
- data/vendor/assets/stylesheets/normalize.css +177 -160
- data/vendor/assets/stylesheets/pesticide.sass +206 -0
- metadata +36 -25
- data/app/assets/stylesheets/skeletor/_all.sass +0 -5
- data/app/assets/stylesheets/skeletor/base/helpers.sass +0 -203
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b248d88bea62a490633c35c76ce6044ba6acd8b5
|
4
|
+
data.tar.gz: e5bb985168d836ba863cce6930a8b102a2e23ece
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e247b657e52912c0f727f2583ae18dbe5487390517cdd227a9c5dc1d8ea8e4ec8d718dea237286a1d9a471ccba62d7b1c2c4a950ce9c2a1ab044619ba3272cb2
|
7
|
+
data.tar.gz: 6e5bd3e33ec9272c8318bcceeb96682733af9d76e114405a0bd37eefa679ea8345ad70b8ef57a4251a549384dd229ffabe5b0d66159f4de1fd4481228f8c9170
|
data/README.md
CHANGED
@@ -9,6 +9,9 @@ This project is currently in beta, I still have a list of features and some
|
|
9
9
|
bugs I am working out. I wanted to get this out in the wild in the hopes that
|
10
10
|
people will provide feedback and report any issues I may have missed.
|
11
11
|
|
12
|
+
I will be writing more thorough documentation on how to call and use the various mixins and functions.
|
13
|
+
|
14
|
+
|
12
15
|
## Installation
|
13
16
|
|
14
17
|
Add this line to your application's Gemfile:
|
Binary file
|
@@ -0,0 +1,17 @@
|
|
1
|
+
@charset "UTF-8"
|
2
|
+
//
|
3
|
+
// Skeletor Test CSS
|
4
|
+
// -> Manifest file used for testing Skeletor Preview pages.
|
5
|
+
//
|
6
|
+
|
7
|
+
@import "normalize"
|
8
|
+
@import "skeletor/settings"
|
9
|
+
@import "skeletor/core/reset"
|
10
|
+
@import "skeletor/core/helpers"
|
11
|
+
@import "skeletor/core/base"
|
12
|
+
@import "skeletor/core/content"
|
13
|
+
@import "skeletor/core/layout"
|
14
|
+
@import "skeletor/modules"
|
15
|
+
@import "skeletor/core/print"
|
16
|
+
@import "skeletor/core/debug"
|
17
|
+
@import "pesticide"
|
@@ -1,21 +1,72 @@
|
|
1
|
-
// Make sure charset is set appropriately
|
2
1
|
@charset "UTF-8"
|
2
|
+
//
|
3
|
+
// Skeletor
|
4
|
+
// -> Manifest file that is compiled into a single compressed file.
|
5
|
+
//
|
6
|
+
// This project is built with SMACSS, MVCSS, and BEM in mind
|
7
|
+
// http://smacss.com/book/
|
8
|
+
// http://mvcss.github.io/
|
9
|
+
//
|
10
|
+
// =============================================================================
|
11
|
+
// Table of Contents
|
12
|
+
// =============================================================================
|
13
|
+
//
|
14
|
+
// CORE........................Styles/Classes for project
|
15
|
+
// INBOX.......................Temporary Style Location (to sort later)
|
16
|
+
// SHAME.......................Quick Fix, Hack, or Technique (to fix later)
|
17
|
+
//
|
3
18
|
|
4
|
-
// SMACSS 'Base' Structure
|
5
|
-
@import "skeletor/base/reset"
|
6
|
-
@import "skeletor/base/foundation"
|
7
19
|
|
8
|
-
//
|
9
|
-
|
20
|
+
// -----------------------------------------------------------------------------
|
21
|
+
// :: CORE
|
22
|
+
// -----------------------------------------------------------------------------
|
10
23
|
|
11
|
-
//
|
24
|
+
// ----- Normalize - Cross browser consistency ----- //
|
25
|
+
@import "normalize"
|
26
|
+
|
27
|
+
// ----- Reset - A more conservative reset ----- //
|
28
|
+
@import "skeletor/core/reset"
|
29
|
+
|
30
|
+
// ----- Helpers - Extendable Global Classes ----- //
|
31
|
+
@import "skeletor/core/helpers"
|
32
|
+
|
33
|
+
// ----- Base - Base-level tags (defaults) ----- //
|
34
|
+
@import "skeletor/core/base"
|
35
|
+
|
36
|
+
// ----- Content - Base-level typography (colors, fonts, ect) ----- //
|
37
|
+
@import "skeletor/core/content"
|
38
|
+
|
39
|
+
// ----- Layout - Base-level layout (margin, padding, sizing, ect) ----- //
|
40
|
+
@import "skeletor/core/layout"
|
41
|
+
|
42
|
+
// ----- Modules - Styled page components ----- //
|
12
43
|
@import "skeletor/modules"
|
13
44
|
|
14
|
-
// Print Styles
|
15
|
-
@import "skeletor/
|
45
|
+
// ----- Print - Styles for print use ----- //
|
46
|
+
@import "skeletor/core/print"
|
47
|
+
|
48
|
+
// ----- Debugger - CSS debug elements 'automatically' ----- //
|
49
|
+
@import "skeletor/core/debug"
|
50
|
+
|
51
|
+
// ----- Pesticide Debugger - CSS Layout debugger ----- //
|
52
|
+
@import "pesticide"
|
53
|
+
|
54
|
+
|
55
|
+
|
56
|
+
// -----------------------------------------------------------------------------
|
57
|
+
// :: INBOX
|
58
|
+
// -----------------------------------------------------------------------------
|
59
|
+
// ----- The inbox allows developers, and those not actively working on the CSS,
|
60
|
+
// to quickly add styles that are easily seen by the maintainer of the file.
|
61
|
+
// Comment the code with your name and date.
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
|
16
66
|
|
17
|
-
//
|
18
|
-
|
67
|
+
// -----------------------------------------------------------------------------
|
68
|
+
// :: SHAME
|
69
|
+
// -----------------------------------------------------------------------------
|
70
|
+
// ----- Need to add a quick fix, hack, or questionable technique?
|
71
|
+
// Add it here, fix it later. Comment the code with your name, date & reason.
|
19
72
|
|
20
|
-
// CSS Debugger
|
21
|
-
@import "skeletor/base/debug"
|
@@ -8,19 +8,19 @@
|
|
8
8
|
//
|
9
9
|
// =============================================================================
|
10
10
|
|
11
|
-
@import "globals/css3/prefixer"
|
12
|
-
@import "globals/css3/flexbox"
|
13
|
-
@import "globals/css3/box_sizing"
|
14
|
-
@import "globals/css3/user_select"
|
15
|
-
@import "globals/css3/tab_size"
|
16
|
-
@import "globals/css3/hyphens"
|
17
|
-
@import "globals/css3/appearance"
|
18
|
-
@import "globals/css3/border_radius"
|
19
|
-
@import "globals/css3/box_shadow"
|
20
|
-
@import "globals/css3/text_shadow"
|
21
|
-
@import "globals/css3/gradients"
|
22
|
-
@import "globals/css3/transform"
|
23
|
-
@import "globals/css3/perspective"
|
24
|
-
@import "globals/css3/backface_visibility"
|
25
|
-
@import "globals/css3/transition"
|
26
|
-
@import "globals/css3/animation"
|
11
|
+
@import "skeletor/globals/css3/prefixer"
|
12
|
+
@import "skeletor/globals/css3/flexbox"
|
13
|
+
@import "skeletor/globals/css3/box_sizing"
|
14
|
+
@import "skeletor/globals/css3/user_select"
|
15
|
+
@import "skeletor/globals/css3/tab_size"
|
16
|
+
@import "skeletor/globals/css3/hyphens"
|
17
|
+
@import "skeletor/globals/css3/appearance"
|
18
|
+
@import "skeletor/globals/css3/border_radius"
|
19
|
+
@import "skeletor/globals/css3/box_shadow"
|
20
|
+
@import "skeletor/globals/css3/text_shadow"
|
21
|
+
@import "skeletor/globals/css3/gradients"
|
22
|
+
@import "skeletor/globals/css3/transform"
|
23
|
+
@import "skeletor/globals/css3/perspective"
|
24
|
+
@import "skeletor/globals/css3/backface_visibility"
|
25
|
+
@import "skeletor/globals/css3/transition"
|
26
|
+
@import "skeletor/globals/css3/animation"
|
@@ -1,13 +1,13 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
// Skeletor Functions
|
2
|
+
// -> SASS Function used throughout skeletor.
|
3
3
|
//
|
4
4
|
// These functions are loading individually throughout skeletor. To load all
|
5
5
|
// functions just load this functions.sass file.
|
6
6
|
//
|
7
|
-
//
|
7
|
+
// -----------------------------------------------------------------------------
|
8
8
|
|
9
|
-
@import "globals/functions/strip_units"
|
10
|
-
@import "globals/functions/calculate_rem"
|
11
|
-
@import "globals/functions/calculate_percent"
|
12
|
-
@import "globals/functions/calculate_em"
|
13
|
-
@import "globals/functions/calculate_modular_scale"
|
9
|
+
@import "skeletor/globals/functions/strip_units"
|
10
|
+
@import "skeletor/globals/functions/calculate_rem"
|
11
|
+
@import "skeletor/globals/functions/calculate_percent"
|
12
|
+
@import "skeletor/globals/functions/calculate_em"
|
13
|
+
@import "skeletor/globals/functions/calculate_modular_scale"
|
@@ -1,23 +1,25 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
// Skeletor Mixins
|
2
|
+
// -> SASS Mixins used throughout skeletor.
|
3
3
|
//
|
4
4
|
// These mixins are loading individually throughout skeletor. To load all
|
5
5
|
// mixins just load this mixins.sass file.
|
6
6
|
//
|
7
|
-
//
|
7
|
+
// -----------------------------------------------------------------------------
|
8
8
|
|
9
|
-
@import "globals/mixins/media_query"
|
10
|
-
@import "globals/mixins/silent_relative"
|
11
|
-
@import "globals/mixins/rgba"
|
12
|
-
@import "globals/mixins/grid_pull"
|
13
|
-
@import "globals/mixins/grid_push"
|
14
|
-
@import "globals/mixins/grid_widths"
|
15
|
-
@import "globals/mixins/opacity"
|
16
|
-
@import "globals/mixins/position"
|
17
|
-
@import "globals/mixins/hidpi"
|
18
|
-
@import "globals/mixins/retina_image"
|
19
|
-
@import "globals/mixins/size"
|
20
|
-
@import "globals/mixins/triangle"
|
21
|
-
@import "globals/mixins/truncate_text"
|
22
|
-
@import "globals/mixins/rem"
|
23
|
-
@import "globals/mixins/
|
9
|
+
@import "skeletor/globals/mixins/media_query"
|
10
|
+
@import "skeletor/globals/mixins/silent_relative"
|
11
|
+
@import "skeletor/globals/mixins/rgba"
|
12
|
+
@import "skeletor/globals/mixins/grid_pull"
|
13
|
+
@import "skeletor/globals/mixins/grid_push"
|
14
|
+
@import "skeletor/globals/mixins/grid_widths"
|
15
|
+
@import "skeletor/globals/mixins/opacity"
|
16
|
+
@import "skeletor/globals/mixins/position"
|
17
|
+
@import "skeletor/globals/mixins/hidpi"
|
18
|
+
@import "skeletor/globals/mixins/retina_image"
|
19
|
+
@import "skeletor/globals/mixins/size"
|
20
|
+
@import "skeletor/globals/mixins/triangle"
|
21
|
+
@import "skeletor/globals/mixins/truncate_text"
|
22
|
+
@import "skeletor/globals/mixins/rem"
|
23
|
+
@import "skeletor/globals/mixins/font_size"
|
24
|
+
@import "skeletor/globals/mixins/vertical_spacing"
|
25
|
+
@import "skeletor/globals/mixins/accessibility"
|
@@ -1,9 +1,7 @@
|
|
1
|
-
//
|
2
|
-
//
|
3
|
-
//
|
4
|
-
// These modules are loaded as a whole through the main skeletor file. You
|
5
|
-
// could also break them down and load only the modules you want.
|
6
|
-
//
|
7
|
-
// =============================================================================
|
1
|
+
// Skeletor Modules
|
2
|
+
// -> Import all neccesary modules/components
|
3
|
+
// -----------------------------------------------------------------------------
|
8
4
|
|
9
|
-
|
5
|
+
@import "skeletor/modules/rules"
|
6
|
+
@import "skeletor/modules/tables"
|
7
|
+
@import "skeletor/modules/forms"
|
@@ -27,9 +27,13 @@
|
|
27
27
|
// :: SETTINGS
|
28
28
|
// -----------------------------------------------------------------------------
|
29
29
|
// DEBUG-MODE
|
30
|
-
// Set to true if you would like to test your CSS/HTML
|
30
|
+
// Set to true if you would like to test your CSS/HTML elements.
|
31
31
|
$debug-mode: false !default
|
32
32
|
|
33
|
+
// PESTICIDE DEBUG-MODE
|
34
|
+
// Set to true if you would like to debug your CSS layout.
|
35
|
+
$pesticide-debug: false !default
|
36
|
+
|
33
37
|
// RESPONSIVE
|
34
38
|
// Set to false if building a non-responsive site
|
35
39
|
$responsive: true !default
|
@@ -54,10 +58,10 @@ $pull: false !default
|
|
54
58
|
|
55
59
|
// Browser Support
|
56
60
|
// Set to false to not support specific browsers
|
57
|
-
$
|
58
|
-
$
|
59
|
-
$
|
60
|
-
$
|
61
|
+
$webkit-support: true !default
|
62
|
+
$firefox-support: true !default
|
63
|
+
$explorer-support: true !default
|
64
|
+
$opera-support: true !default
|
61
65
|
|
62
66
|
|
63
67
|
|
@@ -121,9 +125,9 @@ $ms-base-size: $base-font-size !default
|
|
121
125
|
$ms-round-pixels: false !default
|
122
126
|
|
123
127
|
// Heading Sizes
|
124
|
-
$
|
125
|
-
$
|
126
|
-
$
|
128
|
+
$giga-size: skeletor-modular-scale(8) !default
|
129
|
+
$mega-size: skeletor-modular-scale(7) !default
|
130
|
+
$kilo-size: skeletor-modular-scale(6) !default
|
127
131
|
|
128
132
|
$h1-size: skeletor-modular-scale(5) !default
|
129
133
|
$h2-size: skeletor-modular-scale(4) !default
|
@@ -149,5 +153,8 @@ $lap-start: 481px !default
|
|
149
153
|
$desk-start: 1024px !default
|
150
154
|
$desk-wide-start: 1200px !default
|
151
155
|
|
156
|
+
// Used to set the max-width for the site layout.
|
157
|
+
$base-width: $desk-wide-start !default
|
158
|
+
|
152
159
|
// Media Query Breakpoints
|
153
160
|
$breakpoints: ("palm", "lap", "lap-and-up", "portable", "desk", "desk-wide") !default
|
@@ -1,27 +1,19 @@
|
|
1
|
-
//
|
2
|
-
//
|
3
|
-
// invalid markup or inaccessible code.
|
1
|
+
// Skeletor Debugger
|
2
|
+
// -> Visually detect/debug invalid markup
|
4
3
|
//
|
5
|
-
//
|
6
|
-
//
|
7
|
-
// * None == should be fine
|
4
|
+
// Enable this stylesheet to visually detect any improperly nested or potentially
|
5
|
+
// invalid markup or inaccessible code.
|
8
6
|
//
|
9
|
-
//
|
10
|
-
//
|
7
|
+
// * Red == definite error
|
8
|
+
// * Yellow == double-check
|
9
|
+
// * None == should be fine
|
11
10
|
//
|
12
|
-
//
|
13
|
-
//
|
14
|
-
// =============================================================================
|
11
|
+
// Please note that this method of checking markup quality should not be relied
|
12
|
+
// upon entirely. Validate your markup!
|
15
13
|
//
|
16
|
-
//
|
17
|
-
|
18
|
-
|
14
|
+
// -----------------------------------------------------------------------------
|
19
15
|
|
20
16
|
@if $debug-mode
|
21
|
-
// ---------------------------------------------------------------------------
|
22
|
-
// :: DEBUG
|
23
|
-
// ---------------------------------------------------------------------------
|
24
|
-
|
25
17
|
/**
|
26
18
|
* Are there any empty elements in your page? */
|
27
19
|
\:empty
|
File without changes
|
@@ -0,0 +1,142 @@
|
|
1
|
+
// Skeletor Helpers
|
2
|
+
// -> Common 'helper' classes and extensions
|
3
|
+
//
|
4
|
+
// A series of helper classes to use arbitrarily. Only use a helper class if an
|
5
|
+
// element/component doesn’t already have a class to which you could apply this
|
6
|
+
// styling,
|
7
|
+
//
|
8
|
+
// A lot of these classes carry `!important` as you will always want them to win
|
9
|
+
// out over other selectors.
|
10
|
+
//
|
11
|
+
// =============================================================================
|
12
|
+
// Table of Contents
|
13
|
+
// =============================================================================
|
14
|
+
//
|
15
|
+
// IMPORTS.......................Imported Sass Methods
|
16
|
+
// CLEARFIX......................Micro Clearfix hack
|
17
|
+
// VERTICAL RHYTHM...............Evenly set `margin-bottom`
|
18
|
+
// ELLIPSIS......................Ellipsis Class
|
19
|
+
// IMAGE REPLACEMENT.............Image Replacement classes
|
20
|
+
// VISUALLY......................Visually show/hide elements
|
21
|
+
// DEBUG.........................Debug classes for layout
|
22
|
+
|
23
|
+
|
24
|
+
// -----------------------------------------------------------------------------
|
25
|
+
// :: IMPORTS
|
26
|
+
// -----------------------------------------------------------------------------
|
27
|
+
@import "skeletor/globals/mixins/vertical_spacing"
|
28
|
+
@import "skeletor/globals/mixins/accessibility"
|
29
|
+
@import "skeletor/globals/mixins/media_query"
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
|
36
|
+
// -----------------------------------------------------------------------------
|
37
|
+
// :: CLEARFIX
|
38
|
+
// -----------------------------------------------------------------------------
|
39
|
+
// Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
|
40
|
+
// Extend the clearfix class with Sass to avoid classes appearing all over.
|
41
|
+
%clearfix, .clearfix
|
42
|
+
&:after
|
43
|
+
clear: both
|
44
|
+
content: ''
|
45
|
+
display: table
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
|
50
|
+
|
51
|
+
// -----------------------------------------------------------------------------
|
52
|
+
// :: VERTICAL RHYTHM
|
53
|
+
// -----------------------------------------------------------------------------
|
54
|
+
// Where `margin-bottom` is concerned, this value will be the same as the
|
55
|
+
// base line-height. This allows us to keep a consistent vertical rhythm.
|
56
|
+
// As per: csswizardry.com/2012/06/single-direction-margin-declarations
|
57
|
+
%sass-margin-bottom
|
58
|
+
+skeletor-vertical-spacing($base-line-height)
|
59
|
+
|
60
|
+
|
61
|
+
|
62
|
+
|
63
|
+
|
64
|
+
// -----------------------------------------------------------------------------
|
65
|
+
// :: ELLIPSIS
|
66
|
+
// -----------------------------------------------------------------------------
|
67
|
+
%ellipsis, .ellipsis
|
68
|
+
overflow: hidden
|
69
|
+
text-overflow: ellipsis
|
70
|
+
white-space: nowrap
|
71
|
+
|
72
|
+
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
// -----------------------------------------------------------------------------
|
77
|
+
// :: IMAGE REPLACEMENT
|
78
|
+
// -----------------------------------------------------------------------------
|
79
|
+
%ir, .ir
|
80
|
+
border: 0
|
81
|
+
background-color: transparent
|
82
|
+
overflow: hidden
|
83
|
+
|
84
|
+
&:before
|
85
|
+
display: block
|
86
|
+
content: ""
|
87
|
+
height: 100%
|
88
|
+
width: 0
|
89
|
+
|
90
|
+
|
91
|
+
|
92
|
+
|
93
|
+
|
94
|
+
// -----------------------------------------------------------------------------
|
95
|
+
// :: VISUALLY
|
96
|
+
// -----------------------------------------------------------------------------
|
97
|
+
// Show/Hide Classes
|
98
|
+
.hide
|
99
|
+
display: none !important
|
100
|
+
.show
|
101
|
+
display: block !important
|
102
|
+
|
103
|
+
// Hide from both screenreaders and browsers
|
104
|
+
.hidden
|
105
|
+
display: none !important
|
106
|
+
visibility: hidden !important
|
107
|
+
|
108
|
+
// Hide visually and from screenreaders, but maintain layout
|
109
|
+
.invisible
|
110
|
+
visibility: hidden !important
|
111
|
+
|
112
|
+
// Hide content off-screen without resorting to `display: none;`, also provide
|
113
|
+
// breakpoint specific hidden elements.
|
114
|
+
.accessibility,
|
115
|
+
.visuallyHidden
|
116
|
+
+skeletor-accessibility
|
117
|
+
|
118
|
+
@if $responsive
|
119
|
+
@each $state in $breakpoints
|
120
|
+
+skeletor-media-query(#{$state})
|
121
|
+
.accessibility--#{$state},
|
122
|
+
.visuallyHidden--#{$state}
|
123
|
+
+skeletor-accessibility
|
124
|
+
|
125
|
+
|
126
|
+
|
127
|
+
|
128
|
+
|
129
|
+
// -----------------------------------------------------------------------------
|
130
|
+
// :: DEBUG
|
131
|
+
// -----------------------------------------------------------------------------
|
132
|
+
.debugger
|
133
|
+
background-color: pink !important
|
134
|
+
|
135
|
+
.debug
|
136
|
+
outline: 1px dashed red !important
|
137
|
+
|
138
|
+
.debug--blue
|
139
|
+
outline-color: blue !important
|
140
|
+
|
141
|
+
.debug--green
|
142
|
+
outline-color: green !important
|