primordial 0.0.1

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 (30) hide show
  1. data/.gitignore +17 -0
  2. data/Gemfile +4 -0
  3. data/LICENSE.txt +25 -0
  4. data/README.md +29 -0
  5. data/Rakefile +1 -0
  6. data/app/assets/stylesheets/primordial.css.sass +24 -0
  7. data/app/assets/stylesheets/primordial/components/_alerts.css.sass +57 -0
  8. data/app/assets/stylesheets/primordial/components/_breadcrumbs.css.sass +21 -0
  9. data/app/assets/stylesheets/primordial/components/_button-groups.css.sass +212 -0
  10. data/app/assets/stylesheets/primordial/components/_buttons.css.sass +114 -0
  11. data/app/assets/stylesheets/primordial/components/_close.css.sass +30 -0
  12. data/app/assets/stylesheets/primordial/components/_forms.css.sass +332 -0
  13. data/app/assets/stylesheets/primordial/components/_input-groups.css.sass +119 -0
  14. data/app/assets/stylesheets/primordial/components/_labels.css.sass +48 -0
  15. data/app/assets/stylesheets/primordial/components/_lists.css.sass +44 -0
  16. data/app/assets/stylesheets/primordial/components/_media-object.css.sass +47 -0
  17. data/app/assets/stylesheets/primordial/components/_nav.css.sass +80 -0
  18. data/app/assets/stylesheets/primordial/components/_navbar.css.sass +274 -0
  19. data/app/assets/stylesheets/primordial/components/_pagination.css.sass +58 -0
  20. data/app/assets/stylesheets/primordial/components/_tables.css.sass +78 -0
  21. data/app/assets/stylesheets/primordial/core/_base.css.sass +59 -0
  22. data/app/assets/stylesheets/primordial/core/_mixins.css.sass +754 -0
  23. data/app/assets/stylesheets/primordial/core/_normalize.css.sass +365 -0
  24. data/app/assets/stylesheets/primordial/core/_typography.css.sass +198 -0
  25. data/app/assets/stylesheets/primordial/core/_variables.css.sass +563 -0
  26. data/lib/primordial.rb +14 -0
  27. data/lib/primordial/engine.rb +4 -0
  28. data/lib/primordial/version.rb +3 -0
  29. data/primordial.gemspec +26 -0
  30. metadata +139 -0
@@ -0,0 +1,17 @@
1
+ *.gem
2
+ *.rbc
3
+ .bundle
4
+ .config
5
+ .yardoc
6
+ Gemfile.lock
7
+ InstalledFiles
8
+ _yardoc
9
+ coverage
10
+ doc/
11
+ lib/bundler/man
12
+ pkg
13
+ rdoc
14
+ spec/reports
15
+ test/tmp
16
+ test/version_tmp
17
+ tmp
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in primordial.gemspec
4
+ gemspec
@@ -0,0 +1,25 @@
1
+ Copyright (c) 2013 Twitter, Inc
2
+ Copyright (c) 2013 John Koht
3
+
4
+
5
+
6
+ MIT License
7
+
8
+ Permission is hereby granted, free of charge, to any person obtaining
9
+ a copy of this software and associated documentation files (the
10
+ "Software"), to deal in the Software without restriction, including
11
+ without limitation the rights to use, copy, modify, merge, publish,
12
+ distribute, sublicense, and/or sell copies of the Software, and to
13
+ permit persons to whom the Software is furnished to do so, subject to
14
+ the following conditions:
15
+
16
+ The above copyright notice and this permission notice shall be
17
+ included in all copies or substantial portions of the Software.
18
+
19
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
20
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
21
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
22
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
23
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
24
+ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
25
+ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,29 @@
1
+ # Primordial
2
+
3
+ TODO: Write a gem description
4
+
5
+ ## Installation
6
+
7
+ Add this line to your application's Gemfile:
8
+
9
+ gem 'primordial'
10
+
11
+ And then execute:
12
+
13
+ $ bundle
14
+
15
+ Or install it yourself as:
16
+
17
+ $ gem install primordial
18
+
19
+ ## Usage
20
+
21
+ TODO: Write usage instructions here
22
+
23
+ ## Contributing
24
+
25
+ 1. Fork it
26
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
27
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
28
+ 4. Push to the branch (`git push origin my-new-feature`)
29
+ 5. Create new Pull Request
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,24 @@
1
+ // Core
2
+ @import primordial/core/variables
3
+ @import primordial/core/normalize
4
+ @import primordial/core/mixins
5
+ @import primordial/core/base
6
+ @import primordial/core/typography
7
+
8
+
9
+ // Components
10
+ @import primordial/components/alerts
11
+ @import primordial/components/breadcrumbs
12
+ @import primordial/components/buttons
13
+ @import primordial/components/button-groups
14
+ @import primordial/components/close
15
+ @import primordial/components/forms
16
+ @import primordial/components/input-groups
17
+ @import primordial/components/labels
18
+ @import primordial/components/lists
19
+ @import primordial/components/media-object
20
+ @import primordial/components/nav
21
+ @import primordial/components/navbar
22
+ @import primordial/components/pagination
23
+ @import primordial/components/tables
24
+
@@ -0,0 +1,57 @@
1
+ //
2
+ // Alerts
3
+ // --------------------------------------------------
4
+
5
+ @if $use-alerts == true
6
+
7
+ // Base styles
8
+ // -------------------------
9
+
10
+ .alert
11
+ padding: $alert-padding
12
+ margin-bottom: $line-height-computed
13
+ border: 1px solid transparent
14
+ border-radius: $alert-border-radius
15
+ // Headings for larger alerts
16
+ h4
17
+ margin-top: 0
18
+ // Specified for the h4 to prevent conflicts of changing $headingsColor
19
+ color: inherit
20
+ // Provide class for links that match alerts
21
+ .alert-link
22
+ font-weight: $alert-link-font-weight
23
+ // Improve alignment and spacing of inner content
24
+ > p,
25
+ > ul
26
+ margin-bottom: 0
27
+ > p + p
28
+ margin-top: 5px
29
+
30
+ // Dismissable alerts
31
+ //
32
+ // Expand the right padding and account for the close button's positioning.
33
+
34
+ .alert-dismissable
35
+ padding-right: $alert-padding + 20
36
+ // Adjust close link position
37
+ .close
38
+ position: relative
39
+ top: -2px
40
+ right: -21px
41
+ color: inherit
42
+
43
+ // Alternate styles
44
+ //
45
+ // Generate contextual modifier classes for colorizing the alert.
46
+
47
+ .alert-success
48
+ +alert-variant($alert-success-bg, $alert-success-border, $alert-success-text)
49
+
50
+ .alert-info
51
+ +alert-variant($alert-info-bg, $alert-info-border, $alert-info-text)
52
+
53
+ .alert-warning
54
+ +alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text)
55
+
56
+ .alert-danger
57
+ +alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text)
@@ -0,0 +1,21 @@
1
+ //
2
+ // Breadcrumbs
3
+ // --------------------------------------------------
4
+
5
+ @if $use-breadcrumbs == true
6
+
7
+ .breadcrumb
8
+ padding: 8px 15px
9
+ margin-bottom: $line-height-computed
10
+ list-style: none
11
+ background-color: $breadcrumb-bg
12
+ border-radius: $border-radius-base
13
+ > li
14
+ display: inline-block
15
+ & + li:before
16
+ content: "/\00a0"
17
+ // Unicode space added since inline-block means non-collapsing white-space
18
+ padding: 0 5px
19
+ color: $breadcrumb-color
20
+ > .active
21
+ color: $breadcrumb-active-color
@@ -0,0 +1,212 @@
1
+ //
2
+ // Button groups
3
+ // --------------------------------------------------
4
+
5
+ @if $use-button-groups == true
6
+
7
+ // Button carets
8
+ //
9
+ // Match the button text color to the arrow/caret for indicating dropdown-ness.
10
+
11
+ .caret
12
+ .btn-default &
13
+ border-top-color: $btn-default-color
14
+ .btn-primary &,
15
+ .btn-success &,
16
+ .btn-warning &,
17
+ .btn-danger &,
18
+ .btn-info &
19
+ border-top-color: #fff
20
+
21
+ .dropup
22
+ & .btn-default .caret
23
+ border-bottom-color: $btn-default-color
24
+ .btn-primary,
25
+ .btn-success,
26
+ .btn-warning,
27
+ .btn-danger,
28
+ .btn-info
29
+ .caret
30
+ border-bottom-color: #fff
31
+
32
+ // Make the div behave like a button
33
+
34
+ .btn-group,
35
+ .btn-group-vertical
36
+ position: relative
37
+ display: inline-block
38
+ vertical-align: middle
39
+ // match .btn alignment given font-size hack above
40
+ > .btn
41
+ position: relative
42
+ float: left
43
+ // Bring the "active" button to the front
44
+ &:hover,
45
+ &:focus,
46
+ &:active,
47
+ &.active
48
+ z-index: 2
49
+ &:focus
50
+ // Remove focus outline when dropdown JS adds it after closing the menu
51
+ outline: none
52
+
53
+ // Prevent double borders when buttons are next to each other
54
+ .btn-group
55
+ .btn + .btn,
56
+ .btn + .btn-group,
57
+ .btn-group + .btn,
58
+ .btn-group + .btn-group
59
+ margin-left: -1px
60
+
61
+ // Optional: Group multiple button groups together for a toolbar
62
+ .btn-toolbar
63
+ +clearfix
64
+ .btn-group
65
+ float: left
66
+ // Space out series of button groups
67
+ > .btn,
68
+ > .btn-group
69
+ + .btn,
70
+ + .btn-group
71
+ margin-left: 5px
72
+
73
+ .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle)
74
+ border-radius: 0
75
+
76
+ // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
77
+ .btn-group > .btn:first-child
78
+ margin-left: 0
79
+ &:not(:last-child):not(.dropdown-toggle)
80
+ +border-right-radius(0)
81
+
82
+ // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
83
+
84
+ .btn-group > .btn:last-child:not(:first-child),
85
+ .btn-group > .dropdown-toggle:not(:first-child)
86
+ +border-left-radius(0)
87
+
88
+ // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
89
+ .btn-group > .btn-group
90
+ float: left
91
+
92
+ .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn
93
+ border-radius: 0
94
+
95
+ .btn-group > .btn-group:first-child
96
+ > .btn:last-child,
97
+ > .dropdown-toggle
98
+ +border-right-radius(0)
99
+
100
+ .btn-group > .btn-group:last-child > .btn:first-child
101
+ +border-left-radius(0)
102
+
103
+ // On active and open, don't show outline
104
+
105
+ .btn-group .dropdown-toggle:active,
106
+ .btn-group.open .dropdown-toggle
107
+ outline: 0
108
+
109
+ // Sizing
110
+ //
111
+ // Remix the default button sizing classes into new ones for easier manipulation.
112
+
113
+ .btn-group-xs > .btn
114
+ @extend .btn-xs
115
+
116
+ .btn-group-sm > .btn
117
+ @extend .btn-sm
118
+
119
+ .btn-group-lg > .btn
120
+ @extend .btn-lg
121
+
122
+ // Split button dropdowns
123
+ // ----------------------
124
+
125
+ // Give the line between buttons some depth
126
+ .btn-group > .btn + .dropdown-toggle
127
+ padding-left: 8px
128
+ padding-right: 8px
129
+
130
+ .btn-group > .btn-lg + .dropdown-toggle
131
+ padding-left: 12px
132
+ padding-right: 12px
133
+
134
+ // The clickable button for toggling the menu
135
+ // Remove the gradient and set the same inset shadow as the :active state
136
+ .btn-group.open .dropdown-toggle
137
+ +box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125))
138
+
139
+ // Reposition the caret
140
+ .btn .caret
141
+ margin-left: 0
142
+
143
+ // // Carets in other button sizes
144
+ // .btn-lg .caret
145
+ // border-width: $caret-width-large $caret-width-large 0
146
+ // border-bottom-width: 0
147
+
148
+ // // Upside down carets for .dropup
149
+ // .dropup .btn-lg .caret
150
+ // border-width: 0 $caret-width-large $caret-width-large
151
+
152
+ // Vertical button groups
153
+ // ----------------------
154
+
155
+ .btn-group-vertical
156
+ > .btn,
157
+ > .btn-group
158
+ display: block
159
+ float: none
160
+ width: 100%
161
+ max-width: 100%
162
+ // Clear floats so dropdown menus can be properly placed
163
+ > .btn-group
164
+ +clearfix
165
+ > .btn
166
+ float: none
167
+ > .btn + .btn,
168
+ > .btn + .btn-group,
169
+ > .btn-group + .btn,
170
+ > .btn-group + .btn-group
171
+ margin-top: -1px
172
+ margin-left: 0
173
+
174
+ .btn-group-vertical > .btn
175
+ &:not(:first-child):not(:last-child)
176
+ border-radius: 0
177
+ &:first-child:not(:last-child)
178
+ border-top-right-radius: $border-radius-base
179
+ +border-bottom-radius(0)
180
+ &:last-child:not(:first-child)
181
+ border-bottom-left-radius: $border-radius-base
182
+ +border-top-radius(0)
183
+
184
+ .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn
185
+ border-radius: 0
186
+
187
+ .btn-group-vertical > .btn-group:first-child
188
+ > .btn:last-child,
189
+ > .dropdown-toggle
190
+ +border-bottom-radius(0)
191
+
192
+ .btn-group-vertical > .btn-group:last-child > .btn:first-child
193
+ +border-top-radius(0)
194
+
195
+ // Justified button groups
196
+ // ----------------------
197
+
198
+ .btn-group-justified
199
+ display: table
200
+ width: 100%
201
+ table-layout: fixed
202
+ border-collapse: separate
203
+ .btn
204
+ float: none
205
+ display: table-cell
206
+ width: 1%
207
+
208
+ // Checkbox and radio options
209
+
210
+ [data-toggle="buttons"] > .btn > input[type="radio"],
211
+ [data-toggle="buttons"] > .btn > input[type="checkbox"]
212
+ display: none
@@ -0,0 +1,114 @@
1
+ //
2
+ // Buttons
3
+ // --------------------------------------------------
4
+
5
+ @if $use-buttons == true
6
+
7
+ // Base styles
8
+ // --------------------------------------------------
9
+
10
+ // Core styles
11
+ .btn
12
+ +user-select(none)
13
+ display: inline-block
14
+ padding: 6px 12px
15
+ margin-bottom: 0
16
+ // For input.btn
17
+ font-size: $font-size-base
18
+ font-weight: normal
19
+ line-height: $line-height-base
20
+ text-align: center
21
+ vertical-align: middle
22
+ cursor: pointer
23
+ border: 1px solid transparent
24
+ border-radius: $border-radius-base
25
+ white-space: nowrap
26
+
27
+ &:hover,
28
+ &:focus
29
+ text-decoration: none
30
+
31
+ &:active,
32
+ &.active
33
+ background-image: none
34
+ outline: 0
35
+
36
+ &.disabled,
37
+ &[disabled],
38
+ fieldset[disabled] &
39
+ // Future-proof disabling of clicks
40
+ +opacity(0.65)
41
+ +box-shadow(none)
42
+ cursor: not-allowed
43
+ pointer-events: none
44
+
45
+
46
+ // // Alternate buttons
47
+ // // --------------------------------------------------
48
+
49
+ .btn-primary
50
+ background
51
+
52
+ .btn-default
53
+ +button-variant($btn-default-color, $btn-default-bg, $btn-default-border)
54
+
55
+ .btn-primary
56
+ +button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border)
57
+
58
+ // Warning appears as orange
59
+ .btn-warning
60
+ +button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border)
61
+
62
+ // Danger and error appear as red
63
+ .btn-danger
64
+ +button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border)
65
+
66
+ // Success appears as green
67
+ .btn-success
68
+ +button-variant($btn-success-color, $btn-success-bg, $btn-success-border)
69
+
70
+ // Info appears as blue-green
71
+ .btn-info
72
+ +button-variant($btn-info-color, $btn-info-bg, $btn-info-border)
73
+
74
+
75
+
76
+ // // Button Sizes
77
+ // // --------------------------------------------------
78
+
79
+ .btn-lg
80
+ padding: 10px 20px
81
+ font-size: $font-size-large
82
+ line-height: $line-height-large
83
+
84
+ .btn-sm,
85
+ .btn-xs
86
+ padding: 4px 6px
87
+ font-size: $font-size-small
88
+ line-height: $line-height-small
89
+
90
+ .btn-xs
91
+ padding: 1px 5px
92
+
93
+
94
+
95
+ // // Block button
96
+ // // --------------------------------------------------
97
+
98
+ .btn-block
99
+ display: block
100
+ width: 100%
101
+ padding-left: 0
102
+ padding-right: 0
103
+
104
+ // Vertically space out multiple block buttons
105
+ .btn-block + .btn-block
106
+ margin-top: 5px
107
+
108
+ // Specificity overrides
109
+
110
+ input[type="submit"],
111
+ input[type="reset"],
112
+ input[type="button"]
113
+ &.btn-block
114
+ width: 100%