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.
Files changed (59) hide show
  1. checksums.yaml +7 -0
  2. data/.bowerrc +3 -0
  3. data/.document +5 -0
  4. data/.gitignore +55 -0
  5. data/.rspec +2 -0
  6. data/.travis.yml +5 -0
  7. data/CODE_OF_CONDUCT.md +49 -0
  8. data/Gemfile +4 -0
  9. data/LICENSE.txt +21 -0
  10. data/README.md +41 -0
  11. data/Rakefile +6 -0
  12. data/bin/console +14 -0
  13. data/bin/setup +8 -0
  14. data/bower.json +19 -0
  15. data/inuit-rails.gemspec +24 -0
  16. data/lib/inuit-rails.rb +2 -0
  17. data/lib/inuit-rails/rails.rb +1 -0
  18. data/lib/inuit-rails/rails/engine.rb +6 -0
  19. data/lib/inuit-rails/rails/version.rb +5 -0
  20. data/vendor/assets/stylesheets/inuitcss/LICENSE +13 -0
  21. data/vendor/assets/stylesheets/inuitcss/circle.yml +17 -0
  22. data/vendor/assets/stylesheets/inuitcss/components/_example.components.buttons.scss +170 -0
  23. data/vendor/assets/stylesheets/inuitcss/elements/_elements.headings.scss +47 -0
  24. data/vendor/assets/stylesheets/inuitcss/elements/_elements.images.scss +28 -0
  25. data/vendor/assets/stylesheets/inuitcss/elements/_elements.page.scss +22 -0
  26. data/vendor/assets/stylesheets/inuitcss/elements/_elements.tables.scss +11 -0
  27. data/vendor/assets/stylesheets/inuitcss/example.main.scss +154 -0
  28. data/vendor/assets/stylesheets/inuitcss/generic/_generic.box-sizing.scss +22 -0
  29. data/vendor/assets/stylesheets/inuitcss/generic/_generic.normalize.scss +461 -0
  30. data/vendor/assets/stylesheets/inuitcss/generic/_generic.reset.scss +53 -0
  31. data/vendor/assets/stylesheets/inuitcss/generic/_generic.shared.scss +36 -0
  32. data/vendor/assets/stylesheets/inuitcss/objects/_objects.block.scss +63 -0
  33. data/vendor/assets/stylesheets/inuitcss/objects/_objects.box.scss +48 -0
  34. data/vendor/assets/stylesheets/inuitcss/objects/_objects.crop.scss +99 -0
  35. data/vendor/assets/stylesheets/inuitcss/objects/_objects.flag.scss +214 -0
  36. data/vendor/assets/stylesheets/inuitcss/objects/_objects.layout.scss +247 -0
  37. data/vendor/assets/stylesheets/inuitcss/objects/_objects.list-bare.scss +13 -0
  38. data/vendor/assets/stylesheets/inuitcss/objects/_objects.list-inline.scss +53 -0
  39. data/vendor/assets/stylesheets/inuitcss/objects/_objects.media.scss +152 -0
  40. data/vendor/assets/stylesheets/inuitcss/objects/_objects.pack.scss +90 -0
  41. data/vendor/assets/stylesheets/inuitcss/objects/_objects.ratio.scss +85 -0
  42. data/vendor/assets/stylesheets/inuitcss/objects/_objects.tables.scss +74 -0
  43. data/vendor/assets/stylesheets/inuitcss/objects/_objects.wrapper.scss +51 -0
  44. data/vendor/assets/stylesheets/inuitcss/settings/_example.settings.config.scss +24 -0
  45. data/vendor/assets/stylesheets/inuitcss/settings/_example.settings.global.scss +9 -0
  46. data/vendor/assets/stylesheets/inuitcss/settings/_settings.core.scss +93 -0
  47. data/vendor/assets/stylesheets/inuitcss/tools/_tools.clearfix.scss +19 -0
  48. data/vendor/assets/stylesheets/inuitcss/tools/_tools.font-size.scss +44 -0
  49. data/vendor/assets/stylesheets/inuitcss/tools/_tools.hidden.scss +15 -0
  50. data/vendor/assets/stylesheets/inuitcss/tools/_tools.rem.scss +48 -0
  51. data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.clearfix.scss +11 -0
  52. data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.headings.scss +36 -0
  53. data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.hide.scss +21 -0
  54. data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.print.scss +90 -0
  55. data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.spacing.scss +57 -0
  56. data/vendor/assets/stylesheets/inuitcss/utilities/_utilities.widths.scss +167 -0
  57. data/vendor/assets/stylesheets/sass-mq/_mq.scss +287 -0
  58. data/vendor/assets/stylesheets/sass-mq/show-breakpoints.gif +0 -0
  59. 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
+ }