staple 0.4.2 → 0.4.3
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 +4 -4
- data/README.md +8 -7
- data/source/styles/colors/themes/default.theme +8 -0
- data/source/styles/colors/themes/flatland.theme +10 -2
- data/source/styles/colors/themes/peace.theme +8 -0
- data/source/styles/colors/themes/plastic.theme +8 -3
- data/source/styles/staple/buttons.scss +1 -0
- data/source/styles/staple/colors.scss +6 -1
- data/source/styles/staple/init/overrides.scss +19 -18
- data/source/styles/staple/typography.scss +4 -9
- data/source/styles/typography/droid-serif-import.scss +1 -0
- data/source/styles/typography/droid-serif.typeface +1 -0
- data/source/styles/typography/gloria-import.scss +1 -0
- data/source/styles/typography/gloria.typeface +1 -0
- data/source/styles/typography/inconsolata-import.scss +1 -0
- data/source/styles/typography/inconsolata.typeface +1 -0
- data/source/styles/typography/lato-import.scss +1 -0
- data/source/styles/typography/lato.typeface +1 -0
- data/source/styles/typography/open-sans-import.scss +1 -0
- data/source/styles/typography/open-sans.typeface +1 -0
- data/source/styles/typography/oswald-import.scss +1 -0
- data/source/styles/typography/oswald.typeface +1 -0
- data/source/styles/typography/oxygen-import.scss +1 -0
- data/source/styles/typography/oxygen.typeface +1 -0
- data/source/styles/typography/pacifico-import.scss +1 -0
- data/source/styles/typography/pacifico.typeface +1 -0
- data/source/styles/typography/roboto-import.scss +1 -1
- data/source/styles/typography/roboto-slab-import.scss +1 -0
- data/source/styles/typography/roboto-slab.typeface +1 -0
- data/source/styles/typography/roboto.typeface +1 -1
- data/source/styles/typography/themes/default.theme +3 -0
- data/source/styles/typography/themes/flatland.theme +3 -0
- data/source/styles/typography/themes/peace.theme +3 -0
- data/source/styles/typography/themes/plastic.theme +3 -5
- data/staple.gemspec +1 -1
- metadata +25 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1994fd847f97d5f64e5fb8f630d47272d634df18
|
|
4
|
+
data.tar.gz: b65b6d78219985e2156a2b574334bae0914f79f9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d12a8f806ed2af885a58c934214d62d5f2a7fe14a49c026a3239da50a6d327264edf35fc4dae871664ed1f56b5f544e0115bdd0b3251656b52fc8b77c336bf49
|
|
7
|
+
data.tar.gz: 1a5d41d32231d0ea221b2182b93eba07a3b940bb89a520e72bc561510dcb66abce08ce1a64cae3f5346f9a795892de947b3d4aa403d46bc3d220014ed8e20da9
|
data/README.md
CHANGED
|
@@ -3,13 +3,12 @@
|
|
|
3
3
|
a modular ui framework for rails built on top of foundation and sass.
|
|
4
4
|
|
|
5
5
|
##goals
|
|
6
|
-
|
|
7
6
|
* favor presets over explicit declaration
|
|
8
7
|
* convention over configuration
|
|
9
8
|
* keep it simple
|
|
10
9
|
|
|
11
10
|
##todo
|
|
12
|
-
*
|
|
11
|
+
* integrate images and navs, etc? (as elements?)
|
|
13
12
|
* import web components
|
|
14
13
|
|
|
15
14
|
##lower priority todo
|
|
@@ -32,6 +31,9 @@ a modular ui framework for rails built on top of foundation and sass.
|
|
|
32
31
|
* border-size
|
|
33
32
|
* change amount (color dif, hover dif)
|
|
34
33
|
* refactor generator code from low priority
|
|
34
|
+
* add are you sure? to staple:reset
|
|
35
|
+
* why does success (others too | nav button) button go darker?
|
|
36
|
+
* white/black swap shouldn't affect buttons
|
|
35
37
|
|
|
36
38
|
##Install
|
|
37
39
|
|
|
@@ -51,8 +53,7 @@ rails g staple:install
|
|
|
51
53
|
```
|
|
52
54
|
|
|
53
55
|
##intended use
|
|
54
|
-
|
|
55
|
-
* special cases - seperate generators?
|
|
56
|
+
* *special cases - seperate generators?
|
|
56
57
|
|
|
57
58
|
###themes
|
|
58
59
|
* rails g staple:theme buttons plastic
|
|
@@ -95,6 +96,6 @@ rails g staple:install
|
|
|
95
96
|
* rails g staple:sizes amputate xxl
|
|
96
97
|
|
|
97
98
|
#staple command - coming soon
|
|
98
|
-
staple {button-style|button-theme} {pattern} (append)
|
|
99
|
-
staple buttons round
|
|
100
|
-
staple buttons-theme plastic
|
|
99
|
+
* staple {button-style|button-theme} {pattern} (append)
|
|
100
|
+
* staple buttons round
|
|
101
|
+
* staple buttons-theme plastic
|
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
primary-color:#01B0F0
|
|
2
|
+
complement-color:#FF358B
|
|
3
|
+
secondary-color:#AEEE00
|
|
4
|
+
tertiary-color:#f39c12
|
|
5
|
+
white:#000
|
|
6
|
+
black:#FFF
|
|
7
|
+
topbar-bg-color:transparent
|
|
8
|
+
topbar-text-color:'rgba($white, $transparent-strong)'
|
|
9
|
+
body-bg:#333333
|
|
10
|
+
body-font-color:'rgba($black, $transparent-medium)'
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
primary-color:#105B63
|
|
2
|
+
complement-color:#FFD34E
|
|
3
|
+
secondary-color:#DB9E36
|
|
4
|
+
tertiary-color:#BD4932
|
|
5
|
+
topbar-bg-color:transparent
|
|
6
|
+
topbar-text-color:'rgba($black, $transparent-strong)'
|
|
7
|
+
body-bg:#FFFAD5
|
|
8
|
+
body-font-color:'rgba($black, $transparent-medium)'
|
|
@@ -29,4 +29,9 @@ $opacity-define:$transparent-light $transparent-weak $transparent-medium $tra
|
|
|
29
29
|
$primary-difference: 30;
|
|
30
30
|
$transition-brighten: 8%;
|
|
31
31
|
|
|
32
|
-
//
|
|
32
|
+
//TOPBAR COLORS
|
|
33
|
+
$topbar-bg-color: $primary-color;
|
|
34
|
+
$topbar-text-color: $white;
|
|
35
|
+
|
|
36
|
+
$body-bg: $white;
|
|
37
|
+
$body-font-color: rgba($black, $transparent-strong);
|
|
@@ -154,7 +154,7 @@ $shiny-edge-active-color: rgba($black, .2);
|
|
|
154
154
|
$header-font-family: $body-font-family;
|
|
155
155
|
// $header-font-weight: $font-weight-normal;
|
|
156
156
|
$header-font-style: normal;
|
|
157
|
-
$header-font-color:
|
|
157
|
+
$header-font-color: $body-font-color;
|
|
158
158
|
$header-line-height: 1.4;
|
|
159
159
|
$header-top-margin: .2rem;
|
|
160
160
|
$header-bottom-margin: .5rem;
|
|
@@ -1317,7 +1317,8 @@ $table-margin-bottom: rem-calc(20);
|
|
|
1317
1317
|
// $include-html-top-bar-classes: $include-html-classes;
|
|
1318
1318
|
|
|
1319
1319
|
// Background color for the top bar
|
|
1320
|
-
$topbar-bg-color:
|
|
1320
|
+
// $topbar-bg-color: $primary-color;
|
|
1321
|
+
// $topbar-text-color: rgba($white, $transparent-strong);
|
|
1321
1322
|
$topbar-bg: $topbar-bg-color;
|
|
1322
1323
|
|
|
1323
1324
|
// Height and margin
|
|
@@ -1329,27 +1330,27 @@ $topbar-title-weight: $font-weight-normal;
|
|
|
1329
1330
|
$topbar-title-font-size: rem-calc(17);
|
|
1330
1331
|
|
|
1331
1332
|
// Style the top bar dropdown elements
|
|
1332
|
-
$topbar-dropdown-bg:
|
|
1333
|
-
$topbar-dropdown-link-color: $
|
|
1333
|
+
$topbar-dropdown-bg: $topbar-bg-color;
|
|
1334
|
+
$topbar-dropdown-link-color: $topbar-text-color;
|
|
1334
1335
|
$topbar-dropdown-link-bg: rgba($black, $transparent-strong);
|
|
1335
1336
|
$topbar-dropdown-link-weight: $font-weight-normal;
|
|
1336
1337
|
$topbar-dropdown-toggle-size: 5px;
|
|
1337
|
-
$topbar-dropdown-toggle-color: $
|
|
1338
|
+
$topbar-dropdown-toggle-color: $topbar-text-color;
|
|
1338
1339
|
$topbar-dropdown-toggle-alpha: 0.4;
|
|
1339
1340
|
|
|
1340
1341
|
// Set the link colors and styles for top-level nav
|
|
1341
|
-
$topbar-link-color: $
|
|
1342
|
-
$topbar-link-color-hover: $
|
|
1343
|
-
$topbar-link-color-active: $
|
|
1344
|
-
$topbar-link-color-active-hover: $
|
|
1342
|
+
$topbar-link-color: $topbar-text-color;
|
|
1343
|
+
$topbar-link-color-hover: $topbar-text-color;
|
|
1344
|
+
$topbar-link-color-active: $topbar-text-color;
|
|
1345
|
+
$topbar-link-color-active-hover: $topbar-text-color;
|
|
1345
1346
|
$topbar-link-weight: $font-weight-normal;
|
|
1346
1347
|
$topbar-link-font-size: rem-calc(13);
|
|
1347
1348
|
$topbar-link-hover-lightness: -10%; // Darken by 10%
|
|
1348
|
-
$topbar-link-bg:
|
|
1349
|
+
$topbar-link-bg: transparent;
|
|
1349
1350
|
$topbar-link-bg-color-hover: rgba($black, $transparent-strong);
|
|
1350
|
-
$topbar-link-bg-hover:
|
|
1351
|
-
$topbar-link-bg-active: $
|
|
1352
|
-
$topbar-link-bg-active-hover:
|
|
1351
|
+
$topbar-link-bg-hover: rgba($black, $transparent-light);
|
|
1352
|
+
$topbar-link-bg-active: rgba($black, $transparent-weak);
|
|
1353
|
+
$topbar-link-bg-active-hover: rgba($black, $transparent-weak);
|
|
1353
1354
|
$topbar-link-font-family: $body-font-family;
|
|
1354
1355
|
$topbar-link-text-transform: none;
|
|
1355
1356
|
$topbar-link-padding: $topbar-height / 3;
|
|
@@ -1369,20 +1370,20 @@ $topbar-dropdown-label-bg: rgba($black, $transparent-strong);
|
|
|
1369
1370
|
$topbar-menu-link-transform: uppercase;
|
|
1370
1371
|
$topbar-menu-link-font-size: rem-calc(13);
|
|
1371
1372
|
$topbar-menu-link-weight: $font-weight-bold;
|
|
1372
|
-
$topbar-menu-link-color: $
|
|
1373
|
-
$topbar-menu-icon-color: $
|
|
1373
|
+
$topbar-menu-link-color: $topbar-text-color;
|
|
1374
|
+
$topbar-menu-icon-color: $topbar-text-color;
|
|
1374
1375
|
$topbar-menu-link-color-toggled: rgba($black, $transparent-medium);
|
|
1375
1376
|
$topbar-menu-icon-color-toggled: rgba($black, $transparent-medium);
|
|
1376
1377
|
|
|
1377
1378
|
// Transitions and breakpoint styles
|
|
1378
|
-
$topbar-transition-speed:
|
|
1379
|
+
$topbar-transition-speed: 150ms;
|
|
1379
1380
|
// Using rem-calc for the below breakpoint causes issues with top bar
|
|
1380
1381
|
$topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
|
|
1381
1382
|
// $topbar-media-query: $medium-up;
|
|
1382
1383
|
|
|
1383
1384
|
// Divider Styles
|
|
1384
|
-
$topbar-divider-border-bottom: solid $default-border-size
|
|
1385
|
-
$topbar-divider-border-top: solid $default-border-size
|
|
1385
|
+
$topbar-divider-border-bottom: solid $default-border-size rgba($black, $transparent-light);
|
|
1386
|
+
$topbar-divider-border-top: solid $default-border-size rgba($black, $transparent-light);
|
|
1386
1387
|
|
|
1387
1388
|
// Sticky Class
|
|
1388
1389
|
$topbar-sticky-class: ".sticky";
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
|
|
3
|
-
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);
|
|
4
|
-
@import url(http://fonts.googleapis.com/css?family=Inconsolata);//&*import
|
|
1
|
+
//&*import
|
|
5
2
|
|
|
6
3
|
//DEFAULTS
|
|
7
|
-
$typeface-primary: "
|
|
8
|
-
$typeface-secondary:
|
|
9
|
-
$typeface-tertiary:
|
|
4
|
+
$typeface-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
5
|
+
$typeface-secondary: serif;
|
|
6
|
+
$typeface-tertiary: monospace;
|
|
10
7
|
$normal-font-weight: 400;
|
|
11
8
|
$header-font-weight: 300;
|
|
12
9
|
$subheader-font-weight: 400;
|
|
@@ -16,8 +13,6 @@ $subheader-font-weight: 400;
|
|
|
16
13
|
$font-family-sans-serif: $typeface-primary;
|
|
17
14
|
$font-family-serif: $typeface-secondary;
|
|
18
15
|
$font-family-monospace: $typeface-tertiary;
|
|
19
|
-
$body-bg: $white;//can use any from colors
|
|
20
|
-
$body-font-color: rgba($black, $transparent-strong);
|
|
21
16
|
$body-font-family: $font-family-sans-serif;
|
|
22
17
|
$body-font-weight: $normal-font-weight;
|
|
23
18
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Droid Serif", serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Gloria Hallelujah", serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Inconsolata", monospace
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Lato", sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Oswald", sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Oxygen", sans-serif
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Pacifico);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Pacifico", serif
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url(http://fonts.googleapis.com/css?family=Roboto
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"Roboto Slab", serif
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"Roboto
|
|
1
|
+
"Roboto", sans-serif
|
data/staple.gemspec
CHANGED
|
@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
|
4
4
|
|
|
5
5
|
Gem::Specification.new do |spec|
|
|
6
6
|
spec.name = "staple"
|
|
7
|
-
spec.version = "0.4.
|
|
7
|
+
spec.version = "0.4.3"
|
|
8
8
|
spec.summary = "Modular UI framework for rails built on top of foundation and sass"
|
|
9
9
|
spec.description = "a modular ui framework for rails built on top of foundation and sass."
|
|
10
10
|
spec.authors = ["Ryan Helsing"]
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: staple
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.4.
|
|
4
|
+
version: 0.4.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ryan Helsing
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-11-
|
|
11
|
+
date: 2014-11-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: foundation-rails
|
|
@@ -103,7 +103,9 @@ files:
|
|
|
103
103
|
- source/styles/buttons/themes/plastic.theme
|
|
104
104
|
- source/styles/buttons/transparent.scss
|
|
105
105
|
- source/styles/colors/blue.color
|
|
106
|
+
- source/styles/colors/themes/default.theme
|
|
106
107
|
- source/styles/colors/themes/flatland.theme
|
|
108
|
+
- source/styles/colors/themes/peace.theme
|
|
107
109
|
- source/styles/colors/themes/plastic.theme
|
|
108
110
|
- source/styles/forms/2px-border-focus.scss
|
|
109
111
|
- source/styles/forms/2px-border.scss
|
|
@@ -146,9 +148,30 @@ files:
|
|
|
146
148
|
- source/styles/tables/horizontal-lines.scss
|
|
147
149
|
- source/styles/tables/stripe.scss
|
|
148
150
|
- source/styles/tables/themes/plastic.theme
|
|
151
|
+
- source/styles/typography/droid-serif-import.scss
|
|
152
|
+
- source/styles/typography/droid-serif.typeface
|
|
153
|
+
- source/styles/typography/gloria-import.scss
|
|
154
|
+
- source/styles/typography/gloria.typeface
|
|
149
155
|
- source/styles/typography/helvetica-neue.typeface
|
|
156
|
+
- source/styles/typography/inconsolata-import.scss
|
|
157
|
+
- source/styles/typography/inconsolata.typeface
|
|
158
|
+
- source/styles/typography/lato-import.scss
|
|
159
|
+
- source/styles/typography/lato.typeface
|
|
160
|
+
- source/styles/typography/open-sans-import.scss
|
|
161
|
+
- source/styles/typography/open-sans.typeface
|
|
162
|
+
- source/styles/typography/oswald-import.scss
|
|
163
|
+
- source/styles/typography/oswald.typeface
|
|
164
|
+
- source/styles/typography/oxygen-import.scss
|
|
165
|
+
- source/styles/typography/oxygen.typeface
|
|
166
|
+
- source/styles/typography/pacifico-import.scss
|
|
167
|
+
- source/styles/typography/pacifico.typeface
|
|
150
168
|
- source/styles/typography/roboto-import.scss
|
|
169
|
+
- source/styles/typography/roboto-slab-import.scss
|
|
170
|
+
- source/styles/typography/roboto-slab.typeface
|
|
151
171
|
- source/styles/typography/roboto.typeface
|
|
172
|
+
- source/styles/typography/themes/default.theme
|
|
173
|
+
- source/styles/typography/themes/flatland.theme
|
|
174
|
+
- source/styles/typography/themes/peace.theme
|
|
152
175
|
- source/styles/typography/themes/plastic.theme
|
|
153
176
|
- staple.gemspec
|
|
154
177
|
homepage: https://github.com/rhelsing/staple
|