bulma-rails 0.0.4.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.
- checksums.yaml +7 -0
- data/.gitignore +2 -0
- data/README.md +44 -0
- data/app/assets/stylesheets/bulma.sass +9 -0
- data/app/assets/stylesheets/bulma/base/base.sass +6 -0
- data/app/assets/stylesheets/bulma/base/content.sass +51 -0
- data/app/assets/stylesheets/bulma/base/generic.sass +101 -0
- data/app/assets/stylesheets/bulma/base/helpers.sass +27 -0
- data/app/assets/stylesheets/bulma/base/highlight.sass +123 -0
- data/app/assets/stylesheets/bulma/components/card.sass +39 -0
- data/app/assets/stylesheets/bulma/components/components.sass +11 -0
- data/app/assets/stylesheets/bulma/components/grid.sass +48 -0
- data/app/assets/stylesheets/bulma/components/media.sass +69 -0
- data/app/assets/stylesheets/bulma/components/menu.sass +25 -0
- data/app/assets/stylesheets/bulma/components/navbar.sass +45 -0
- data/app/assets/stylesheets/bulma/components/table.sass +73 -0
- data/app/assets/stylesheets/bulma/components/tabs.sass +101 -0
- data/app/assets/stylesheets/bulma/config/generated-variables.sass +74 -0
- data/app/assets/stylesheets/bulma/config/variables.sass +41 -0
- data/app/assets/stylesheets/bulma/elements/buttons.sass +100 -0
- data/app/assets/stylesheets/bulma/elements/controls.sass +224 -0
- data/app/assets/stylesheets/bulma/elements/elements.sass +172 -0
- data/app/assets/stylesheets/bulma/elements/messages.sass +41 -0
- data/app/assets/stylesheets/bulma/elements/notifications.sass +20 -0
- data/app/assets/stylesheets/bulma/elements/titles.sass +57 -0
- data/app/assets/stylesheets/bulma/layout/footer.sass +11 -0
- data/app/assets/stylesheets/bulma/layout/header.sass +145 -0
- data/app/assets/stylesheets/bulma/layout/hero.sass +147 -0
- data/app/assets/stylesheets/bulma/layout/layout.sass +6 -0
- data/app/assets/stylesheets/bulma/layout/section.sass +11 -0
- data/app/assets/stylesheets/bulma/utilities/animations.sass +5 -0
- data/app/assets/stylesheets/bulma/utilities/functions.sass +34 -0
- data/app/assets/stylesheets/bulma/utilities/mixins.sass +83 -0
- data/app/assets/stylesheets/bulma/utilities/reset.sass +174 -0
- data/app/assets/stylesheets/bulma/utilities/utilities.sass +6 -0
- data/bulma-rails.gemspec +18 -0
- data/lib/bulma-rails.rb +4 -0
- metadata +95 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 0e0cbbe8c1c8c47635888d2b82edffac42193fa5
|
|
4
|
+
data.tar.gz: 65dea609ba253e7156c7fdfdae5cf40f8a834b0c
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: d2255241567041ee73fe6486b74904c237560bae3e012aa70e2f2ee0c197a2f0759486e6f76625c3a1ff24ba0f22df1fd5a258fe698e34c4c35e212010d82bd5
|
|
7
|
+
data.tar.gz: 4a2ad8a5c2191b499149c57056cf028029d3354aa3271b91f8b6e75f30b9b267b8920c48090eeba6b9f09fc0bad74c908dae9a1a98eb1240b64877c8cfc4036f
|
data/.gitignore
ADDED
data/README.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# bulma-rails
|
|
2
|
+
|
|
3
|
+
Integrates [Bulma](http://bulma.io/) with the rails asset pipeline.
|
|
4
|
+
|
|
5
|
+
A modern CSS framework based on Flexbox.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
Add this line to your application's Gemfile:
|
|
10
|
+
|
|
11
|
+
gem "bulma-rails", "~> 0.0.4"
|
|
12
|
+
|
|
13
|
+
And then execute:
|
|
14
|
+
|
|
15
|
+
$ bundle
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
To import all assets in your Rails project, add the following line to your application.scss:
|
|
20
|
+
``` ruby
|
|
21
|
+
@import "bulma";
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
If you want to customize Bulma, you can import all folders manually in your application.scss:
|
|
25
|
+
|
|
26
|
+
``` ruby
|
|
27
|
+
@import "bulma/utilities/utilities";
|
|
28
|
+
@import "bulma/config/variables";
|
|
29
|
+
@import "bulma/config/generated-variables";
|
|
30
|
+
@import "bulma/base/base";
|
|
31
|
+
@import "bulma/elements/elements";
|
|
32
|
+
@import "bulma/components/components";
|
|
33
|
+
@import "bulma/layout/layout";
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
For more information about customizing Bulma, see: [http://bulma.io/documentation/overview/](http://bulma.io/documentation/overview/)
|
|
37
|
+
|
|
38
|
+
## Contributing
|
|
39
|
+
|
|
40
|
+
1. Fork it
|
|
41
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
|
42
|
+
3. Commit your changes (`git commit -am 'Added some feature'`)
|
|
43
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
|
44
|
+
5. Create new Pull Request
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.content
|
|
2
|
+
&:not(:last-child)
|
|
3
|
+
margin-bottom: 20px
|
|
4
|
+
h1,
|
|
5
|
+
h2,
|
|
6
|
+
h3,
|
|
7
|
+
h4,
|
|
8
|
+
h5,
|
|
9
|
+
h6
|
|
10
|
+
color: $text-strong
|
|
11
|
+
font-weight: 300
|
|
12
|
+
line-height: 1.125
|
|
13
|
+
margin-bottom: 20px
|
|
14
|
+
h1,
|
|
15
|
+
h2,
|
|
16
|
+
h3
|
|
17
|
+
&:not(:first-child)
|
|
18
|
+
margin-top: 40px
|
|
19
|
+
h1
|
|
20
|
+
font-size: 2em
|
|
21
|
+
h2
|
|
22
|
+
font-size: 1.75em
|
|
23
|
+
h3
|
|
24
|
+
font-size: 1.5em
|
|
25
|
+
h4
|
|
26
|
+
font-size: 1.25em
|
|
27
|
+
h5
|
|
28
|
+
font-size: 1.125em
|
|
29
|
+
h6
|
|
30
|
+
font-size: 1em
|
|
31
|
+
p:not(:last-child)
|
|
32
|
+
margin-bottom: 1em
|
|
33
|
+
li + li
|
|
34
|
+
margin-top: 0.25em
|
|
35
|
+
ol
|
|
36
|
+
list-style: decimal outside
|
|
37
|
+
margin: 1em 2em
|
|
38
|
+
ul
|
|
39
|
+
list-style: disc outside
|
|
40
|
+
margin: 1em 2em
|
|
41
|
+
ul
|
|
42
|
+
list-style-type: circle
|
|
43
|
+
margin-top: 0.5em
|
|
44
|
+
ul
|
|
45
|
+
list-style-type: square
|
|
46
|
+
blockquote
|
|
47
|
+
background: $background
|
|
48
|
+
border-left: 5px solid $border
|
|
49
|
+
padding: 1.5em
|
|
50
|
+
&:not(:last-child)
|
|
51
|
+
margin-bottom: 1em
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
html
|
|
2
|
+
background: $body-background
|
|
3
|
+
font-size: $size-normal
|
|
4
|
+
-moz-osx-font-smoothing: grayscale
|
|
5
|
+
-webkit-font-smoothing: antialiased
|
|
6
|
+
min-width: 300px
|
|
7
|
+
overflow-x: hidden
|
|
8
|
+
overflow-y: scroll
|
|
9
|
+
text-rendering: optimizeLegibility
|
|
10
|
+
|
|
11
|
+
body,
|
|
12
|
+
button,
|
|
13
|
+
input,
|
|
14
|
+
select,
|
|
15
|
+
textarea
|
|
16
|
+
font-family: $family-primary
|
|
17
|
+
|
|
18
|
+
code,
|
|
19
|
+
pre
|
|
20
|
+
-moz-osx-font-smoothing: auto
|
|
21
|
+
-webkit-font-smoothing: auto
|
|
22
|
+
font-family: monospace
|
|
23
|
+
line-height: 1.25
|
|
24
|
+
|
|
25
|
+
body
|
|
26
|
+
color: $text
|
|
27
|
+
font-size: 1rem
|
|
28
|
+
line-height: 1.428571428571429
|
|
29
|
+
|
|
30
|
+
a
|
|
31
|
+
color: $link
|
|
32
|
+
cursor: pointer
|
|
33
|
+
text-decoration: none
|
|
34
|
+
transition: none $speed $easing
|
|
35
|
+
&:hover
|
|
36
|
+
color: $link-hover
|
|
37
|
+
|
|
38
|
+
code
|
|
39
|
+
background: $code-background
|
|
40
|
+
color: $code
|
|
41
|
+
font-size: 12px
|
|
42
|
+
font-weight: normal
|
|
43
|
+
padding: 1px 2px 2px
|
|
44
|
+
|
|
45
|
+
hr
|
|
46
|
+
border-top-color: $border
|
|
47
|
+
margin: 20px 0
|
|
48
|
+
|
|
49
|
+
img
|
|
50
|
+
max-height: 100%
|
|
51
|
+
max-width: 100%
|
|
52
|
+
|
|
53
|
+
input[type="checkbox"],
|
|
54
|
+
input[type="radio"]
|
|
55
|
+
vertical-align: baseline
|
|
56
|
+
|
|
57
|
+
small
|
|
58
|
+
font-size: $size-small
|
|
59
|
+
|
|
60
|
+
strong
|
|
61
|
+
color: $text-strong
|
|
62
|
+
|
|
63
|
+
article,
|
|
64
|
+
aside,
|
|
65
|
+
figure,
|
|
66
|
+
footer,
|
|
67
|
+
header,
|
|
68
|
+
hgroup,
|
|
69
|
+
section
|
|
70
|
+
display: block
|
|
71
|
+
|
|
72
|
+
pre
|
|
73
|
+
background: $pre-background
|
|
74
|
+
color: $pre
|
|
75
|
+
white-space: pre
|
|
76
|
+
word-wrap: normal
|
|
77
|
+
code
|
|
78
|
+
background: $pre-background
|
|
79
|
+
color: $pre
|
|
80
|
+
display: block
|
|
81
|
+
overflow-x: auto
|
|
82
|
+
padding: 16px 20px
|
|
83
|
+
|
|
84
|
+
table
|
|
85
|
+
width: 100%
|
|
86
|
+
th,
|
|
87
|
+
td
|
|
88
|
+
text-align: left
|
|
89
|
+
vertical-align: top
|
|
90
|
+
th
|
|
91
|
+
color: $text-strong
|
|
92
|
+
|
|
93
|
+
.container
|
|
94
|
+
margin: 0 auto
|
|
95
|
+
max-width: 960px
|
|
96
|
+
position: relative
|
|
97
|
+
|
|
98
|
+
.fa
|
|
99
|
+
font-size: 21px
|
|
100
|
+
text-align: center
|
|
101
|
+
vertical-align: top
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
.is-centered
|
|
2
|
+
text-align: center
|
|
3
|
+
|
|
4
|
+
.is-left
|
|
5
|
+
text-align: left
|
|
6
|
+
|
|
7
|
+
.is-right
|
|
8
|
+
text-align: right
|
|
9
|
+
|
|
10
|
+
.is-block
|
|
11
|
+
display: block
|
|
12
|
+
|
|
13
|
+
.is-disabled
|
|
14
|
+
pointer-events: none
|
|
15
|
+
|
|
16
|
+
.is-inline
|
|
17
|
+
display: inline
|
|
18
|
+
|
|
19
|
+
.is-marginless
|
|
20
|
+
margin: 0 !important
|
|
21
|
+
|
|
22
|
+
.is-unselectable
|
|
23
|
+
-webkit-touch-callout: none
|
|
24
|
+
-webkit-user-select: none
|
|
25
|
+
-moz-user-select: none
|
|
26
|
+
-ms-user-select: none
|
|
27
|
+
user-select: none
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
.highlight
|
|
2
|
+
background-color: #fdf6e3
|
|
3
|
+
color: #586e75
|
|
4
|
+
.c
|
|
5
|
+
color: #93a1a1
|
|
6
|
+
.err,
|
|
7
|
+
.g
|
|
8
|
+
color: #586e75
|
|
9
|
+
.k
|
|
10
|
+
color: #859900
|
|
11
|
+
.l,
|
|
12
|
+
.n
|
|
13
|
+
color: #586e75
|
|
14
|
+
.o
|
|
15
|
+
color: #859900
|
|
16
|
+
.x
|
|
17
|
+
color: #cb4b16
|
|
18
|
+
.p
|
|
19
|
+
color: #586e75
|
|
20
|
+
.cm
|
|
21
|
+
color: #93a1a1
|
|
22
|
+
.cp
|
|
23
|
+
color: #859900
|
|
24
|
+
.c1
|
|
25
|
+
color: #93a1a1
|
|
26
|
+
.cs
|
|
27
|
+
color: #859900
|
|
28
|
+
.gd
|
|
29
|
+
color: #2aa198
|
|
30
|
+
.ge
|
|
31
|
+
color: #586e75
|
|
32
|
+
font-style: italic
|
|
33
|
+
.gr
|
|
34
|
+
color: #dc322f
|
|
35
|
+
.gh
|
|
36
|
+
color: #cb4b16
|
|
37
|
+
.gi
|
|
38
|
+
color: #859900
|
|
39
|
+
.go,
|
|
40
|
+
.gp
|
|
41
|
+
color: #586e75
|
|
42
|
+
.gs
|
|
43
|
+
color: #586e75
|
|
44
|
+
font-weight: bold
|
|
45
|
+
.gu
|
|
46
|
+
color: #cb4b16
|
|
47
|
+
.gt
|
|
48
|
+
color: #586e75
|
|
49
|
+
.kc
|
|
50
|
+
color: #cb4b16
|
|
51
|
+
.kd
|
|
52
|
+
color: #268bd2
|
|
53
|
+
.kn,
|
|
54
|
+
.kp
|
|
55
|
+
color: #859900
|
|
56
|
+
.kr
|
|
57
|
+
color: #268bd2
|
|
58
|
+
.kt
|
|
59
|
+
color: #dc322f
|
|
60
|
+
.ld
|
|
61
|
+
color: #586e75
|
|
62
|
+
.m,
|
|
63
|
+
.s
|
|
64
|
+
color: #2aa198
|
|
65
|
+
.na
|
|
66
|
+
color: #B58900
|
|
67
|
+
.nb
|
|
68
|
+
color: #586e75
|
|
69
|
+
.nc
|
|
70
|
+
color: #268bd2
|
|
71
|
+
.no
|
|
72
|
+
color: #cb4b16
|
|
73
|
+
.nd
|
|
74
|
+
color: #268bd2
|
|
75
|
+
.ni,
|
|
76
|
+
.ne
|
|
77
|
+
color: #cb4b16
|
|
78
|
+
.nf
|
|
79
|
+
color: #268bd2
|
|
80
|
+
.nl,
|
|
81
|
+
.nn,
|
|
82
|
+
.nx,
|
|
83
|
+
.py
|
|
84
|
+
color: #586e75
|
|
85
|
+
.nt,
|
|
86
|
+
.nv
|
|
87
|
+
color: #268bd2
|
|
88
|
+
.ow
|
|
89
|
+
color: #859900
|
|
90
|
+
.w
|
|
91
|
+
color: #586e75
|
|
92
|
+
.mf,
|
|
93
|
+
.mh,
|
|
94
|
+
.mi,
|
|
95
|
+
.mo
|
|
96
|
+
color: #2aa198
|
|
97
|
+
.sb
|
|
98
|
+
color: #93a1a1
|
|
99
|
+
.sc
|
|
100
|
+
color: #2aa198
|
|
101
|
+
.sd
|
|
102
|
+
color: #586e75
|
|
103
|
+
.s2
|
|
104
|
+
color: #2aa198
|
|
105
|
+
.se
|
|
106
|
+
color: #cb4b16
|
|
107
|
+
.sh
|
|
108
|
+
color: #586e75
|
|
109
|
+
.si,
|
|
110
|
+
.sx
|
|
111
|
+
color: #2aa198
|
|
112
|
+
.sr
|
|
113
|
+
color: #dc322f
|
|
114
|
+
.s1,
|
|
115
|
+
.ss
|
|
116
|
+
color: #2aa198
|
|
117
|
+
.bp,
|
|
118
|
+
.vc,
|
|
119
|
+
.vg,
|
|
120
|
+
.vi
|
|
121
|
+
color: #268bd2
|
|
122
|
+
.il
|
|
123
|
+
color: #2aa198
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.card-image
|
|
2
|
+
display: block
|
|
3
|
+
position: relative
|
|
4
|
+
img
|
|
5
|
+
display: block
|
|
6
|
+
&.is-square,
|
|
7
|
+
&.is-4x3,
|
|
8
|
+
&.is-3x2
|
|
9
|
+
img
|
|
10
|
+
+overlay
|
|
11
|
+
height: 100%
|
|
12
|
+
width: 100%
|
|
13
|
+
&.is-square
|
|
14
|
+
padding-top: 100%
|
|
15
|
+
&.is-4x3
|
|
16
|
+
padding-top: 75%
|
|
17
|
+
&.is-3x2
|
|
18
|
+
padding-top: 66.6666%
|
|
19
|
+
|
|
20
|
+
.card-content
|
|
21
|
+
padding: 20px
|
|
22
|
+
.title + .subtitle
|
|
23
|
+
margin-top: -20px
|
|
24
|
+
|
|
25
|
+
.card-footer
|
|
26
|
+
background: $background
|
|
27
|
+
display: block
|
|
28
|
+
padding: 10px
|
|
29
|
+
|
|
30
|
+
.card
|
|
31
|
+
background: white
|
|
32
|
+
box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
|
|
33
|
+
max-width: 100%
|
|
34
|
+
position: relative
|
|
35
|
+
width: 300px
|
|
36
|
+
.media:not(:last-child)
|
|
37
|
+
margin-bottom: 10px
|
|
38
|
+
&.is-rounded
|
|
39
|
+
border-radius: 5px
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
.column
|
|
2
|
+
+mobile
|
|
3
|
+
& + .column
|
|
4
|
+
margin-top: 20px
|
|
5
|
+
+tablet
|
|
6
|
+
flex: 1
|
|
7
|
+
& + .column
|
|
8
|
+
margin-left: 20px
|
|
9
|
+
&.is-double
|
|
10
|
+
flex: 2
|
|
11
|
+
&.is-triple
|
|
12
|
+
flex: 3
|
|
13
|
+
&.is-quadruple
|
|
14
|
+
flex: 4
|
|
15
|
+
&.is-half
|
|
16
|
+
flex: none
|
|
17
|
+
width: 50%
|
|
18
|
+
&.is-third
|
|
19
|
+
flex: none
|
|
20
|
+
width: 33.3333%
|
|
21
|
+
&.is-quarter
|
|
22
|
+
flex: none
|
|
23
|
+
width: 25%
|
|
24
|
+
@for $i from 1 through 11
|
|
25
|
+
&.is-#{$i}
|
|
26
|
+
flex: none
|
|
27
|
+
width: ($i / 12) * 100%
|
|
28
|
+
|
|
29
|
+
.columns
|
|
30
|
+
&:not(:last-child)
|
|
31
|
+
margin-bottom: 20px
|
|
32
|
+
+tablet
|
|
33
|
+
display: flex
|
|
34
|
+
&.is-gapless
|
|
35
|
+
& > .column + .column
|
|
36
|
+
margin-left: 0
|
|
37
|
+
&.is-vcentered
|
|
38
|
+
align-items: center
|
|
39
|
+
&.is-grid
|
|
40
|
+
+tablet
|
|
41
|
+
flex-wrap: wrap
|
|
42
|
+
& > .column
|
|
43
|
+
flex-basis: 33.3333%
|
|
44
|
+
max-width: 33.3333%
|
|
45
|
+
padding: 10px
|
|
46
|
+
width: 33.3333%
|
|
47
|
+
& + .column
|
|
48
|
+
margin-left: 0
|