inuit-rails 6.0.0.beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.bowerrc +3 -0
- data/.document +5 -0
- data/.gitignore +55 -0
- data/.rspec +2 -0
- data/.travis.yml +5 -0
- data/CODE_OF_CONDUCT.md +49 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +41 -0
- data/Rakefile +6 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/bower.json +19 -0
- data/inuit-rails.gemspec +24 -0
- data/lib/inuit-rails.rb +2 -0
- data/lib/inuit-rails/rails.rb +1 -0
- data/lib/inuit-rails/rails/engine.rb +6 -0
- data/lib/inuit-rails/rails/version.rb +5 -0
- data/vendor/assets/stylesheets/inuitcss/LICENSE +13 -0
- data/vendor/assets/stylesheets/inuitcss/circle.yml +17 -0
- data/vendor/assets/stylesheets/inuitcss/components/_example.components.buttons.scss +170 -0
- data/vendor/assets/stylesheets/inuitcss/elements/_elements.headings.scss +47 -0
- data/vendor/assets/stylesheets/inuitcss/elements/_elements.images.scss +28 -0
- data/vendor/assets/stylesheets/inuitcss/elements/_elements.page.scss +22 -0
- data/vendor/assets/stylesheets/inuitcss/elements/_elements.tables.scss +11 -0
- data/vendor/assets/stylesheets/inuitcss/example.main.scss +154 -0
- data/vendor/assets/stylesheets/inuitcss/generic/_generic.box-sizing.scss +22 -0
- data/vendor/assets/stylesheets/inuitcss/generic/_generic.normalize.scss +461 -0
- data/vendor/assets/stylesheets/inuitcss/generic/_generic.reset.scss +53 -0
- data/vendor/assets/stylesheets/inuitcss/generic/_generic.shared.scss +36 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.block.scss +63 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.box.scss +48 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.crop.scss +99 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.flag.scss +214 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.layout.scss +247 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.list-bare.scss +13 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.list-inline.scss +53 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.media.scss +152 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.pack.scss +90 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.ratio.scss +85 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.tables.scss +74 -0
- data/vendor/assets/stylesheets/inuitcss/objects/_objects.wrapper.scss +51 -0
- data/vendor/assets/stylesheets/inuitcss/settings/_example.settings.config.scss +24 -0
- data/vendor/assets/stylesheets/inuitcss/settings/_example.settings.global.scss +9 -0
- data/vendor/assets/stylesheets/inuitcss/settings/_settings.core.scss +93 -0
- data/vendor/assets/stylesheets/inuitcss/tools/_tools.clearfix.scss +19 -0
- data/vendor/assets/stylesheets/inuitcss/tools/_tools.font-size.scss +44 -0
- data/vendor/assets/stylesheets/inuitcss/tools/_tools.hidden.scss +15 -0
- data/vendor/assets/stylesheets/inuitcss/tools/_tools.rem.scss +48 -0
- data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.clearfix.scss +11 -0
- data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.headings.scss +36 -0
- data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.hide.scss +21 -0
- data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.print.scss +90 -0
- data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.spacing.scss +57 -0
- data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.widths.scss +167 -0
- data/vendor/assets/stylesheets/sass-mq/_mq.scss +287 -0
- data/vendor/assets/stylesheets/sass-mq/show-breakpoints.gif +0 -0
- metadata +144 -0
@@ -0,0 +1,90 @@
|
|
1
|
+
/* ==========================================================================
|
2
|
+
#PACK
|
3
|
+
========================================================================== */
|
4
|
+
|
5
|
+
/**
|
6
|
+
* The pack object simply causes any number of elements pack up horizontally to
|
7
|
+
* automatically fill an equal, fluid width of their parent.
|
8
|
+
*
|
9
|
+
* 1. Fill all available space.
|
10
|
+
* 2. Remove any leftover styling from lists.
|
11
|
+
* 3. Cause children to be automatically equally sized.
|
12
|
+
*/
|
13
|
+
|
14
|
+
.o-pack {
|
15
|
+
width: 100%; /* [1] */
|
16
|
+
margin-left: 0; /* [2] */
|
17
|
+
display: table;
|
18
|
+
table-layout: fixed; /* [3] */
|
19
|
+
}
|
20
|
+
|
21
|
+
|
22
|
+
/**
|
23
|
+
* 1. Cause children to adopt table-like structure.
|
24
|
+
*/
|
25
|
+
.o-pack__item {
|
26
|
+
display: table-cell; /* [1] */
|
27
|
+
|
28
|
+
|
29
|
+
/* Vertical alignment variants.
|
30
|
+
====================================================================== */
|
31
|
+
|
32
|
+
.o-pack--middle > & {
|
33
|
+
vertical-align: middle;
|
34
|
+
}
|
35
|
+
|
36
|
+
.o-pack--bottom > & {
|
37
|
+
vertical-align: bottom;
|
38
|
+
}
|
39
|
+
|
40
|
+
}
|
41
|
+
|
42
|
+
|
43
|
+
|
44
|
+
|
45
|
+
|
46
|
+
/* Unequal-width items.
|
47
|
+
========================================================================== */
|
48
|
+
|
49
|
+
.o-pack--auto {
|
50
|
+
table-layout: auto;
|
51
|
+
}
|
52
|
+
|
53
|
+
|
54
|
+
|
55
|
+
|
56
|
+
|
57
|
+
/* Size variants.
|
58
|
+
========================================================================== */
|
59
|
+
|
60
|
+
.o-pack--tiny {
|
61
|
+
border-spacing: $inuit-global-spacing-unit-tiny;
|
62
|
+
}
|
63
|
+
|
64
|
+
.o-pack--small {
|
65
|
+
border-spacing: $inuit-global-spacing-unit-small;
|
66
|
+
}
|
67
|
+
|
68
|
+
.o-pack--large {
|
69
|
+
border-spacing: $inuit-global-spacing-unit-large;
|
70
|
+
}
|
71
|
+
|
72
|
+
.o-pack--huge {
|
73
|
+
border-spacing: $inuit-global-spacing-unit-huge;
|
74
|
+
}
|
75
|
+
|
76
|
+
|
77
|
+
|
78
|
+
|
79
|
+
|
80
|
+
/* Reversed order packs
|
81
|
+
========================================================================== */
|
82
|
+
|
83
|
+
.o-pack--rev {
|
84
|
+
direction: rtl;
|
85
|
+
|
86
|
+
> .o-pack__item {
|
87
|
+
direction: ltr;
|
88
|
+
}
|
89
|
+
|
90
|
+
}
|
@@ -0,0 +1,85 @@
|
|
1
|
+
/* ==========================================================================
|
2
|
+
#RATIO
|
3
|
+
========================================================================== */
|
4
|
+
|
5
|
+
// A list of aspect ratios that get generated as modifier classes.
|
6
|
+
|
7
|
+
$inuit-ratios: (
|
8
|
+
(2:1),
|
9
|
+
(4:3),
|
10
|
+
(16:9),
|
11
|
+
) !default;
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
/**
|
16
|
+
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
|
17
|
+
* their correct aspect ratios.
|
18
|
+
*
|
19
|
+
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
|
20
|
+
*
|
21
|
+
* 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
|
22
|
+
*/
|
23
|
+
|
24
|
+
.o-ratio {
|
25
|
+
position: relative;
|
26
|
+
display: block;
|
27
|
+
overflow: hidden;
|
28
|
+
|
29
|
+
&:before {
|
30
|
+
content: "";
|
31
|
+
display: block;
|
32
|
+
width: 100%;
|
33
|
+
padding-bottom: 100%; /* [1] */
|
34
|
+
}
|
35
|
+
|
36
|
+
}
|
37
|
+
|
38
|
+
|
39
|
+
.o-ratio__content,
|
40
|
+
.o-ratio > iframe,
|
41
|
+
.o-ratio > embed,
|
42
|
+
.o-ratio > object {
|
43
|
+
position: absolute;
|
44
|
+
top: 0;
|
45
|
+
bottom: 0;
|
46
|
+
left: 0;
|
47
|
+
height: 100%;
|
48
|
+
width: 100%;
|
49
|
+
}
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
/* stylelint-disable */
|
54
|
+
|
55
|
+
/* Ratio variants.
|
56
|
+
========================================================================== */
|
57
|
+
|
58
|
+
/**
|
59
|
+
* Generate a series of ratio classes to be used like so:
|
60
|
+
*
|
61
|
+
* <div class="o-ratio o-ratio--16:9">
|
62
|
+
*
|
63
|
+
*/
|
64
|
+
|
65
|
+
@each $ratio in $inuit-ratios {
|
66
|
+
|
67
|
+
@each $antecedent, $consequent in $ratio {
|
68
|
+
|
69
|
+
@if (type-of($antecedent) != number) {
|
70
|
+
@error "`#{$antecedent}` needs to be a number."
|
71
|
+
}
|
72
|
+
|
73
|
+
@if (type-of($consequent) != number) {
|
74
|
+
@error "`#{$consequent}` needs to be a number."
|
75
|
+
}
|
76
|
+
|
77
|
+
.o-ratio--#{$antecedent}\:#{$consequent}:before {
|
78
|
+
padding-bottom: ($consequent/$antecedent) * 100%;
|
79
|
+
}
|
80
|
+
|
81
|
+
}
|
82
|
+
|
83
|
+
}
|
84
|
+
|
85
|
+
/* stylelint-enable */
|
@@ -0,0 +1,74 @@
|
|
1
|
+
/* ==========================================================================
|
2
|
+
#TABLES
|
3
|
+
========================================================================== */
|
4
|
+
|
5
|
+
/**
|
6
|
+
* A simple object for manipulating the structure of HTML `table`s.
|
7
|
+
*/
|
8
|
+
|
9
|
+
.o-table {
|
10
|
+
width: 100%;
|
11
|
+
}
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
/* Equal-width table cells.
|
19
|
+
========================================================================== */
|
20
|
+
|
21
|
+
/**
|
22
|
+
* `table-layout: fixed` forces all cells within a table to occupy the same
|
23
|
+
* width as each other. This also has performance benefits: because the browser
|
24
|
+
* does not need to (re)calculate cell dimensions based on content it discovers,
|
25
|
+
* the table can be rendered very quickly. Further reading:
|
26
|
+
* https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
|
27
|
+
*/
|
28
|
+
|
29
|
+
.o-table--fixed {
|
30
|
+
table-layout: fixed;
|
31
|
+
}
|
32
|
+
|
33
|
+
|
34
|
+
|
35
|
+
|
36
|
+
|
37
|
+
/* Size variants.
|
38
|
+
========================================================================== */
|
39
|
+
|
40
|
+
.o-table--tiny {
|
41
|
+
|
42
|
+
th,
|
43
|
+
td {
|
44
|
+
padding: $inuit-global-spacing-unit-tiny;
|
45
|
+
}
|
46
|
+
|
47
|
+
}
|
48
|
+
|
49
|
+
.o-table--small {
|
50
|
+
|
51
|
+
th,
|
52
|
+
td {
|
53
|
+
padding: $inuit-global-spacing-unit-small;
|
54
|
+
}
|
55
|
+
|
56
|
+
}
|
57
|
+
|
58
|
+
.o-table--large {
|
59
|
+
|
60
|
+
th,
|
61
|
+
td {
|
62
|
+
padding: $inuit-global-spacing-unit-large;
|
63
|
+
}
|
64
|
+
|
65
|
+
}
|
66
|
+
|
67
|
+
.o-table--huge {
|
68
|
+
|
69
|
+
th,
|
70
|
+
td {
|
71
|
+
padding: $inuit-global-spacing-unit-huge;
|
72
|
+
}
|
73
|
+
|
74
|
+
}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
/* ==========================================================================
|
2
|
+
#WRAPPERS
|
3
|
+
========================================================================== */
|
4
|
+
|
5
|
+
/**
|
6
|
+
* Page-level constraining and wrapping elements.
|
7
|
+
*/
|
8
|
+
|
9
|
+
$inuit-wrapper-width: 1200px !default;
|
10
|
+
|
11
|
+
/* stylelint-disable */
|
12
|
+
@if (type-of($inuit-wrapper-width) != number) {
|
13
|
+
@error "`#{$inuit-wrapper-width}` needs to be a number."
|
14
|
+
}
|
15
|
+
/* stylelint-enable */
|
16
|
+
|
17
|
+
.o-wrapper {
|
18
|
+
@include inuit-clearfix();
|
19
|
+
padding-right: $inuit-global-spacing-unit;
|
20
|
+
padding-left: $inuit-global-spacing-unit;
|
21
|
+
margin-right: auto;
|
22
|
+
margin-left: auto;
|
23
|
+
max-width: $inuit-wrapper-width;
|
24
|
+
}
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
|
29
|
+
|
30
|
+
/* Size variants.
|
31
|
+
========================================================================== */
|
32
|
+
|
33
|
+
.o-wrapper--tiny {
|
34
|
+
padding-right: $inuit-global-spacing-unit-tiny;
|
35
|
+
padding-left: $inuit-global-spacing-unit-tiny;
|
36
|
+
}
|
37
|
+
|
38
|
+
.o-wrapper--small {
|
39
|
+
padding-right: $inuit-global-spacing-unit-small;
|
40
|
+
padding-left: $inuit-global-spacing-unit-small;
|
41
|
+
}
|
42
|
+
|
43
|
+
.o-wrapper--large {
|
44
|
+
padding-right: $inuit-global-spacing-unit-large;
|
45
|
+
padding-left: $inuit-global-spacing-unit-large;
|
46
|
+
}
|
47
|
+
|
48
|
+
.o-wrapper--huge {
|
49
|
+
padding-right: $inuit-global-spacing-unit-huge;
|
50
|
+
padding-left: $inuit-global-spacing-unit-huge;
|
51
|
+
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
///* ========================================================================
|
2
|
+
// #CONFIG
|
3
|
+
// ======================================================================== */
|
4
|
+
|
5
|
+
// A map of global config settings. Define any project-level configuration,
|
6
|
+
// feature switches, etc. in here.
|
7
|
+
|
8
|
+
$inuit-config: (
|
9
|
+
env: dev,
|
10
|
+
healthcheck: false,
|
11
|
+
debug: true,
|
12
|
+
);
|
13
|
+
|
14
|
+
// You can access data in this map using the following function:
|
15
|
+
//
|
16
|
+
// inuit-config(<key>)
|
17
|
+
//
|
18
|
+
// Example usage:
|
19
|
+
//
|
20
|
+
// @if (inuit-config(debug) == true) { ... }
|
21
|
+
|
22
|
+
@function inuit-config($key) {
|
23
|
+
@return map-get($inuit-config, $key);
|
24
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
///* ========================================================================
|
2
|
+
// #GLOBAL
|
3
|
+
// ======================================================================== */
|
4
|
+
// The global settings file contains any project-wide variables; things that
|
5
|
+
// need to be made available to the entire codebase.
|
6
|
+
|
7
|
+
// Standardise some UI treatments.
|
8
|
+
$global-radius: 3px !default;
|
9
|
+
$global-transition: (1/3) + s !default;
|
@@ -0,0 +1,93 @@
|
|
1
|
+
///* ========================================================================
|
2
|
+
// #CORE
|
3
|
+
// ======================================================================== */
|
4
|
+
|
5
|
+
// This core file sets up inuitcss’ most important setup variables. They
|
6
|
+
// underpin a lot of how the framework functions and should be modified and
|
7
|
+
// preconfigured with caution.
|
8
|
+
|
9
|
+
|
10
|
+
// Base typographical styles and baseline grid. You need to define these values
|
11
|
+
// in pixels: inuitcss will convert them to more appropriate units.
|
12
|
+
|
13
|
+
$inuit-global-font-size: 16px !default;
|
14
|
+
$inuit-global-line-height: 24px !default;
|
15
|
+
|
16
|
+
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
// Spacing values are determined based on your project’s global line height (i.e
|
21
|
+
// your baseline grid). It is not recommended that you modify these following
|
22
|
+
// variables (it can break your vertical rhythm), but if you need to, you can.
|
23
|
+
|
24
|
+
$inuit-global-spacing-unit: round($inuit-global-line-height) !default;
|
25
|
+
|
26
|
+
|
27
|
+
// How many times larger/smaller than the default should our spacing unit
|
28
|
+
// variants be?
|
29
|
+
|
30
|
+
$inuit-global-spacing-unit-factor-tiny: 0.25 !default;
|
31
|
+
$inuit-global-spacing-unit-factor-small: 0.5 !default;
|
32
|
+
$inuit-global-spacing-unit-factor-large: 2 !default;
|
33
|
+
$inuit-global-spacing-unit-factor-huge: 4 !default;
|
34
|
+
|
35
|
+
|
36
|
+
|
37
|
+
|
38
|
+
|
39
|
+
////////////////////////////////////////////////////////////////////////////////
|
40
|
+
// //
|
41
|
+
// W A R N I N G //
|
42
|
+
// //
|
43
|
+
// DO NOT MODIFY ANYTHING BEYOND THIS POINT //
|
44
|
+
// //
|
45
|
+
////////////////////////////////////////////////////////////////////////////////
|
46
|
+
|
47
|
+
|
48
|
+
// Check that the chosen font rules are pixel numbers.
|
49
|
+
|
50
|
+
@each $_inuit-font-globals in
|
51
|
+
$inuit-global-font-size
|
52
|
+
$inuit-global-line-height {
|
53
|
+
|
54
|
+
@if (type-of($_inuit-font-globals) == number) {
|
55
|
+
|
56
|
+
@if (unit($_inuit-font-globals) != "px") {
|
57
|
+
@error "`#{$_inuit-font-globals}` needs to be a pixel value.";
|
58
|
+
}
|
59
|
+
|
60
|
+
} @else {
|
61
|
+
@error "`#{$_inuit-font-globals}` needs to be a number.";
|
62
|
+
}
|
63
|
+
|
64
|
+
}
|
65
|
+
|
66
|
+
|
67
|
+
// Check that the chosen size factors are unitless numbers.
|
68
|
+
|
69
|
+
@each $_inuit-spacing-unit in
|
70
|
+
$inuit-global-spacing-unit-factor-tiny
|
71
|
+
$inuit-global-spacing-unit-factor-small
|
72
|
+
$inuit-global-spacing-unit-factor-large
|
73
|
+
$inuit-global-spacing-unit-factor-huge {
|
74
|
+
|
75
|
+
@if (type-of($_inuit-spacing-unit) == number) {
|
76
|
+
|
77
|
+
@if (unitless($_inuit-spacing-unit) == false) {
|
78
|
+
@error "`#{$_inuit-spacing-unit}` needs to be unitless.";
|
79
|
+
}
|
80
|
+
|
81
|
+
} @else {
|
82
|
+
@error "`#{$_inuit-spacing-unit}` needs to be a number.";
|
83
|
+
}
|
84
|
+
|
85
|
+
}
|
86
|
+
|
87
|
+
|
88
|
+
// Private/framework-only reassignment. Do not alter anything below.
|
89
|
+
|
90
|
+
$inuit-global-spacing-unit-tiny: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-tiny);
|
91
|
+
$inuit-global-spacing-unit-small: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-small);
|
92
|
+
$inuit-global-spacing-unit-large: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-large);
|
93
|
+
$inuit-global-spacing-unit-huge: round($inuit-global-spacing-unit * $inuit-global-spacing-unit-factor-huge);
|
@@ -0,0 +1,19 @@
|
|
1
|
+
///* ========================================================================
|
2
|
+
// #CLEARFIX
|
3
|
+
// ======================================================================== */
|
4
|
+
|
5
|
+
// Mixin to drop micro clearfix into a selector. Further reading:
|
6
|
+
// http://www.cssmojo.com/the-very-latest-clearfix-reloaded/
|
7
|
+
//
|
8
|
+
// .usage {
|
9
|
+
// @include inuit-clearfix();
|
10
|
+
// }
|
11
|
+
@mixin inuit-clearfix() {
|
12
|
+
|
13
|
+
&:after {
|
14
|
+
content: "" !important;
|
15
|
+
display: block !important;
|
16
|
+
clear: both !important;
|
17
|
+
}
|
18
|
+
|
19
|
+
}
|