wirecss_rails 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: a8265a3b7e90226164957a6e2b94c112ec0a8b14
4
+ data.tar.gz: 888ed7894386e152d7fcea0b9bfbd016574a4a18
5
+ SHA512:
6
+ metadata.gz: 52dbc547e493d2f5a6260a64e1909ab08467c237a34056e59ec6f207a23fcd622461de7b55e7cd35fcbcb0eb4a293ee924cc2caf3df4113b52fdacd512de7f2e
7
+ data.tar.gz: 3bf9864caa1ccd172c5b819554481dce94cf4e2e817437a7da211e6afa8945c31c9e7ff94cd19aec7f056e1f96a72e6a0d45366ad7b64e4205766c2cddc159d1
@@ -0,0 +1,12 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /_yardoc/
4
+ /coverage/
5
+ /doc/
6
+ /pkg/
7
+ /spec/reports/
8
+ /tmp/
9
+
10
+ # rspec failure tracking
11
+ .rspec_status
12
+ .DS_Store
data/.rspec ADDED
@@ -0,0 +1,3 @@
1
+ --format documentation
2
+ --color
3
+ --require spec_helper
@@ -0,0 +1,5 @@
1
+ sudo: false
2
+ language: ruby
3
+ rvm:
4
+ - 2.3.7
5
+ before_install: gem install bundler -v 1.16.1
data/Gemfile ADDED
@@ -0,0 +1,6 @@
1
+ source "https://rubygems.org"
2
+
3
+ git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
4
+
5
+ # Specify your gem's dependencies in wirecss_rails.gemspec
6
+ gemspec
@@ -0,0 +1,35 @@
1
+ PATH
2
+ remote: .
3
+ specs:
4
+ wirecss_rails (1.0.0)
5
+
6
+ GEM
7
+ remote: https://rubygems.org/
8
+ specs:
9
+ diff-lcs (1.3)
10
+ rake (10.5.0)
11
+ rspec (3.7.0)
12
+ rspec-core (~> 3.7.0)
13
+ rspec-expectations (~> 3.7.0)
14
+ rspec-mocks (~> 3.7.0)
15
+ rspec-core (3.7.1)
16
+ rspec-support (~> 3.7.0)
17
+ rspec-expectations (3.7.0)
18
+ diff-lcs (>= 1.2.0, < 2.0)
19
+ rspec-support (~> 3.7.0)
20
+ rspec-mocks (3.7.0)
21
+ diff-lcs (>= 1.2.0, < 2.0)
22
+ rspec-support (~> 3.7.0)
23
+ rspec-support (3.7.1)
24
+
25
+ PLATFORMS
26
+ ruby
27
+
28
+ DEPENDENCIES
29
+ bundler (~> 1.16)
30
+ rake (~> 10.0)
31
+ rspec (~> 3.0)
32
+ wirecss_rails!
33
+
34
+ BUNDLED WITH
35
+ 1.16.1
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2018 Paul Ingham
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,59 @@
1
+ # Wire CSS
2
+
3
+ [WireCSS](https://www.wirecss.com) is a simple and responsive flexbox based Sass framework. This gem packages WireCSS's assets for drop-in use in Rails applications.
4
+
5
+ Currently packaged is WireCSS 1.2.5.
6
+
7
+ ## Installation
8
+
9
+ Add this line to your application's Gemfile:
10
+
11
+ ```ruby
12
+ gem 'wirecss_rails'
13
+ ```
14
+
15
+ And then execute:
16
+
17
+ $ bundle
18
+
19
+ Or install it yourself as:
20
+
21
+ $ gem install wirecss_rails
22
+
23
+ ## Usage
24
+
25
+ Once installed, add the following to your `application.scss`:
26
+
27
+ ```scss
28
+ @import "wire";
29
+ ```
30
+
31
+ Alternatively, import components as needed:
32
+
33
+ ```scss
34
+ // Core variables and mixins
35
+ @import "wire/_config.scss";
36
+ // Reset (Normalize)
37
+ @import "wire/base/_normalize.scss";
38
+ // Mixins
39
+ @import "wire/base/_mixins.scss";
40
+ // Helpers
41
+ @import "wire/base/_helpers.scss";
42
+ // Global
43
+ @import "wire/base/_global.scss";
44
+ // Components
45
+ @import "wire/components/_buttons.scss";
46
+ @import "wire/components/_grid.scss";
47
+ @import "wire/components/_typography.scss";
48
+ @import "wire/components/_forms.scss";
49
+ @import "wire/components/_list.scss";
50
+ @import "wire/components/_tables.scss";
51
+ @import "wire/components/_images.scss";
52
+
53
+ // Debug
54
+ @import "wire/tools/_debug.scss";
55
+ ```
56
+
57
+ ## License
58
+
59
+ The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
@@ -0,0 +1,6 @@
1
+ require "bundler/gem_tasks"
2
+ require "rspec/core/rake_task"
3
+
4
+ RSpec::Core::RakeTask.new(:spec)
5
+
6
+ task :default => :spec
@@ -0,0 +1,14 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bundler/setup"
4
+ require "wirecss_rails"
5
+
6
+ # You can add fixtures and/or initialization code here to make experimenting
7
+ # with your gem easier. You can also use a different console, if you like.
8
+
9
+ # (If you use this, don't forget to add pry to your Gemfile!)
10
+ # require "pry"
11
+ # Pry.start
12
+
13
+ require "irb"
14
+ IRB.start(__FILE__)
@@ -0,0 +1,8 @@
1
+ #!/usr/bin/env bash
2
+ set -euo pipefail
3
+ IFS=$'\n\t'
4
+ set -vx
5
+
6
+ bundle install
7
+
8
+ # Do any other automated setup that you need to do here
@@ -0,0 +1,5 @@
1
+ require "wirecss_rails/version"
2
+ require "wirecss_rails/engine" if (defined?(Rails) && defined?(Rails::Engine))
3
+
4
+ module WirecssRails
5
+ end
@@ -0,0 +1,4 @@
1
+ module WirecssRails
2
+ class Engine < Rails::Engine
3
+ end
4
+ end
@@ -0,0 +1,3 @@
1
+ module WirecssRails
2
+ VERSION = "1.0.0"
3
+ end
@@ -0,0 +1,112 @@
1
+ var wire;
2
+
3
+ // Variables
4
+ var _breakpoints = {
5
+ huge: window.matchMedia('screen and (min-width: 75em)'),
6
+ large: window.matchMedia('screen and (min-width: 64em)'),
7
+ medium: window.matchMedia('screen and (min-width: 45em) and (max-width: 63.93em)'),
8
+ small: window.matchMedia('screen and (max-width: 44.95em)')
9
+ };
10
+
11
+ var device;
12
+ wire = wire || {};
13
+
14
+
15
+ // Order Module
16
+ wire.order = (function() {
17
+ var match = function() {
18
+ for (device in _breakpoints) {
19
+ if (_breakpoints[device].matches) {
20
+ if (device === 'large') {
21
+ wire.order.reorder();
22
+ } else {
23
+ wire.order.reorder(device);
24
+ }
25
+ }
26
+ }
27
+ };
28
+
29
+ var reorder = function(device) {
30
+ var orderItems = ['[data-order]'];
31
+ var styledItems = document.querySelectorAll('[style*="order"]');
32
+ var _bp;
33
+ if (device) {
34
+ for (_bp in _breakpoints) {
35
+ if ({}.hasOwnProperty.call(_breakpoints, _bp)) {
36
+ orderItems.push('[data-order-' + _bp + ']');
37
+ }
38
+ }
39
+ Array.prototype.forEach.call(document.querySelectorAll(orderItems), function(e) {
40
+ if (e.getAttribute('data-order-' + device)) {
41
+ e.style.order = e.getAttribute('data-order-' + device);
42
+ } else {
43
+ if (e.getAttribute('data-order')) {
44
+ e.style.order = e.getAttribute('data-order');
45
+ } else {
46
+ e.style.removeProperty('order');
47
+ }
48
+ }
49
+ });
50
+ } else {
51
+ Array.prototype.forEach.call(styledItems, function(e) {
52
+ e.style.removeProperty('order');
53
+ });
54
+ Array.prototype.forEach.call(document.querySelectorAll('[data-order]'), function(e) {
55
+ e.style.order = e.getAttribute('data-order');
56
+ });
57
+ }
58
+ };
59
+
60
+ return {
61
+ match: match,
62
+ reorder: reorder
63
+ };
64
+ }());
65
+
66
+ // Responsive Tables Module
67
+ wire.responsiveTable = (function() {
68
+ var elements = function() {
69
+ return document.querySelectorAll('[data-table~="responsive"]');
70
+ };
71
+
72
+ var addData = function() {
73
+ Array.prototype.forEach.call(elements(), function(e) {
74
+ var thElements = e.getElementsByTagName('th');
75
+ var thText = [];
76
+ var tbodyElements = e.getElementsByTagName('tbody');
77
+ var i = 0;
78
+ Array.prototype.forEach.call(thElements, function(th) {
79
+ thText.push(th.textContent);
80
+ });
81
+
82
+ Array.prototype.forEach.call(tbodyElements, function(tbody) {
83
+ var trElements = tbody.getElementsByTagName('tr');
84
+ Array.prototype.forEach.call(trElements, function(tr) {
85
+ var tdElements = tr.getElementsByTagName('td');
86
+ var tdCount = tdElements.length;
87
+ for (i; i < tdCount; ++i) {
88
+ tdElements[i].setAttribute('data-th', thText[i]);
89
+ }
90
+ });
91
+ });
92
+ });
93
+ };
94
+
95
+ return {
96
+ elements: elements,
97
+ addData: addData
98
+ };
99
+ }());
100
+
101
+ if (window.matchMedia) {
102
+ for (device in _breakpoints) {
103
+ if ({}.hasOwnProperty.call(_breakpoints, device)) {
104
+ _breakpoints[device].addListener(wire.order.match);
105
+ if (_breakpoints[device].matches) {
106
+ wire.order.reorder(device);
107
+ }
108
+ }
109
+ }
110
+ }
111
+
112
+ if (wire.responsiveTable.elements().length) wire.responsiveTable.addData();
@@ -0,0 +1,80 @@
1
+ // ----------------------
2
+ //
3
+ // SETTINGS
4
+ //
5
+ // ----------------------
6
+ // ----------------------
7
+ // Namespace
8
+ //
9
+ // To avoid conflicts, Wire used custom namespace,
10
+ // Set 'wire-' to avoid conflicts with others frameworks. '' by default.
11
+ // ----------------------
12
+ $wire-namespace: '' !default;
13
+
14
+ // ----------------------
15
+ // Markup Mode
16
+ //
17
+ // Compile Wire.css with markup, if you only need extend
18
+ // the styles in Sass, set this in 'false'.
19
+ // Set 'true' or 'false'. True by default.
20
+ // ----------------------
21
+ $wire-markup: true !default;
22
+
23
+ // ----------------------
24
+ // Debug Mode
25
+ //
26
+ // Highlight markup errors.
27
+ // Set 'true' or 'false'. False by default.
28
+ // ----------------------
29
+ $wire-debug: false !default;
30
+
31
+
32
+
33
+ // ----------------------
34
+ //
35
+ // VARIABLES
36
+ //
37
+ // ----------------------
38
+ // ----------------------
39
+ // Defaults Sizes (Base 10 to simplify)
40
+ // ----------------------
41
+ $wire-font-size-base: 16 !default;
42
+ $wire-line-height-base: 1.45 !default;
43
+ $wire-border-radius: 3px !default;
44
+
45
+ // ----------------------
46
+ // Colors
47
+ // ----------------------
48
+ // ----------------------
49
+ // Brand Colors
50
+ // ----------------------
51
+ $wire-color-primary: #48a8ce !default;
52
+ $wire-color-secundary: #7c7c7c !default;
53
+ $wire-color-alt: #e0e0e0 !default;
54
+ $wire-link-color: $wire-color-primary !default;
55
+ $wire-link-color-hover: darken($wire-color-primary, 30%) !default;
56
+ $wire-button-bg: $wire-color-primary !default;
57
+ $wire-button-color: #ffffff !default;
58
+ $wire-button-alt-bg: $wire-color-alt !default;
59
+ $wire-button-alt-color: $wire-color-secundary !default;
60
+ $wire-form-input-border: #e0e0e0 !default;
61
+ $wire-form-input-bg: #ffffff !default;
62
+ $wire-table-tr-even-bg: #e5e5e5 !default;
63
+ $wire-table-border-color: #d2d2d2 !default;
64
+
65
+ // ----------------------
66
+ // Grid
67
+ // ----------------------
68
+ $wire-max-columns: 12 !default;
69
+ $wire-base-gutter: 2% !default;
70
+
71
+ // ----------------------
72
+ // Breakpoints
73
+ // ----------------------
74
+ $wire-breakpoints: (
75
+ "small": "screen and (max-width: 719px)",
76
+ "retina": "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx)",
77
+ "medium": "screen and (min-width: 720px) and (max-width: 1023px)",
78
+ "large": "screen and (min-width: 1024px)",
79
+ "huge": "screen and (min-width: 1200px)"
80
+ ) !default;
@@ -0,0 +1,22 @@
1
+ // ----------------------
2
+ //
3
+ // Base
4
+ //
5
+ // ----------------------
6
+ html {
7
+ box-sizing: border-box;
8
+ font-size: 62.5%;
9
+ height: 100%;
10
+ }
11
+
12
+ body {
13
+ font-size: rem(16);
14
+ height: 100%;
15
+ line-height: $wire-line-height-base;
16
+ }
17
+
18
+ *,
19
+ *:before,
20
+ *:after {
21
+ box-sizing: inherit;
22
+ }
@@ -0,0 +1,109 @@
1
+ // ----------------------
2
+ //
3
+ // HELPERS
4
+ //
5
+ // ----------------------
6
+ // ----------------------
7
+ // REM Calculation
8
+ // rem(value, size)
9
+ // Size attribute is optional
10
+ // ----------------------
11
+ @function rem($value) {
12
+ $value: ($value / 10) * 1rem;
13
+ @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
14
+ @return $value;
15
+ }
16
+
17
+ // ----------------------
18
+ // EMs Calculation
19
+ // em(value, size)
20
+ // Size attribute is optional
21
+ // ----------------------
22
+ @function em($value, $context: $wire-font-size-base) {
23
+ @return #{$value / $context}em;
24
+ }
25
+
26
+ // ----------------------
27
+ // Clearfix
28
+ // ----------------------
29
+ @mixin clearfix() {
30
+ &:after,
31
+ &:before{
32
+ content: " ";
33
+ display: table;
34
+ }
35
+ &:after {
36
+ clear: both;
37
+ }
38
+ }
39
+
40
+ @if $wire-markup == true{
41
+ .#{$wire-namespace}clearfix {
42
+ @include clearfix();
43
+ }
44
+ }
45
+
46
+ // ----------------------
47
+ // Text Align
48
+ // ----------------------
49
+ $align-positions: left, center, right;
50
+ @each $align-position in $align-positions{
51
+ @if $wire-markup == true {
52
+ .#{$wire-namespace}align-#{$align-position} {
53
+ text-align: $align-position;
54
+ }
55
+ }
56
+ }
57
+
58
+ // ----------------------
59
+ // Hidden
60
+ // ----------------------
61
+ %hidden {
62
+ display: none !important;
63
+ visibility: hidden;
64
+ }
65
+
66
+ @if $wire-markup == true{
67
+ .hidden {
68
+ @extend %hidden;
69
+ }
70
+ }
71
+
72
+ // ----------------------
73
+ // Invisible
74
+ // ----------------------
75
+ %invisible {
76
+ visibility : hidden;
77
+ }
78
+
79
+ @if $wire-markup == true{
80
+ .invisible {
81
+ @extend %invisible;
82
+ }
83
+ }
84
+
85
+ // ----------------------
86
+ // Show Elements on Device
87
+ // ----------------------
88
+ @each $breakpoint, $value in $wire-breakpoints {
89
+ @include mq($breakpoint) {
90
+ @if $wire-markup == true {
91
+ .#{$wire-namespace}visible-#{$breakpoint} {
92
+ display: block !important;
93
+ }
94
+ }
95
+ }
96
+ }
97
+
98
+ // ----------------------
99
+ // Hide Elements on Device
100
+ // ----------------------
101
+ @each $breakpoint, $value in $wire-breakpoints {
102
+ @include mq($breakpoint) {
103
+ @if $wire-markup == true {
104
+ .#{$wire-namespace}hidden-#{$breakpoint} {
105
+ display: none !important;
106
+ }
107
+ }
108
+ }
109
+ }