wirecss_rails 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +12 -0
- data/.rspec +3 -0
- data/.travis.yml +5 -0
- data/Gemfile +6 -0
- data/Gemfile.lock +35 -0
- data/LICENSE.txt +21 -0
- data/README.md +59 -0
- data/Rakefile +6 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/wirecss_rails.rb +5 -0
- data/lib/wirecss_rails/engine.rb +4 -0
- data/lib/wirecss_rails/version.rb +3 -0
- data/vendor/assets/javascripts/wire.js +112 -0
- data/vendor/assets/stylesheets/_config.scss +80 -0
- data/vendor/assets/stylesheets/base/_global.scss +22 -0
- data/vendor/assets/stylesheets/base/_helpers.scss +109 -0
- data/vendor/assets/stylesheets/base/_mixins.scss +67 -0
- data/vendor/assets/stylesheets/base/_normalize.scss +440 -0
- data/vendor/assets/stylesheets/components/_buttons.scss +64 -0
- data/vendor/assets/stylesheets/components/_forms.scss +84 -0
- data/vendor/assets/stylesheets/components/_grid.scss +456 -0
- data/vendor/assets/stylesheets/components/_images.scss +11 -0
- data/vendor/assets/stylesheets/components/_list.scss +43 -0
- data/vendor/assets/stylesheets/components/_tables.scss +49 -0
- data/vendor/assets/stylesheets/components/_typography.scss +80 -0
- data/vendor/assets/stylesheets/tools/_debug.scss +126 -0
- data/vendor/assets/stylesheets/wire.scss +32 -0
- data/wirecss_rails.gemspec +36 -0
- metadata +116 -0
checksums.yaml
ADDED
@@ -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
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
@@ -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
|
data/LICENSE.txt
ADDED
@@ -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.
|
data/README.md
ADDED
@@ -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).
|
data/Rakefile
ADDED
data/bin/console
ADDED
@@ -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__)
|
data/bin/setup
ADDED
@@ -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
|
+
}
|