codefabrik-styleguide 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.rspec +3 -0
- data/.standard.yml +7 -0
- data/Gemfile +12 -0
- data/Gemfile.lock +221 -0
- data/LICENSE.txt +21 -0
- data/README.md +99 -0
- data/Rakefile +10 -0
- data/lib/codefabrik/styleguide/version.rb +7 -0
- data/lib/codefabrik/styleguide.rb +13 -0
- data/sig/codefabrik/styleguide.rbs +6 -0
- data/vendor/assets/stylesheets/codefabrik/styleguide/01_reset.scss +12 -0
- data/vendor/assets/stylesheets/codefabrik/styleguide/02_layout.scss +98 -0
- data/vendor/assets/stylesheets/codefabrik/styleguide/03_grid.scss +101 -0
- data/vendor/assets/stylesheets/codefabrik/styleguide/04_typo.scss +91 -0
- data/vendor/assets/stylesheets/codefabrik/styleguide/05_buttons.scss +41 -0
- data/vendor/assets/stylesheets/codefabrik/styleguide.scss +13 -0
- metadata +92 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 26bf608849bfd722a0c3fae256b5338da0863ea20e36fb99df640653a7a5c5a9
|
4
|
+
data.tar.gz: aea5c73a0fc766affbd06c3fc657a253050a01284a2decfd7bb6389b81e2f862
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 0e2fd0e3c0a35914252e2c477103e827cc41c22014703769d6d8b866b3b3dffbfbd895bbb1c689608b33b0bd31b9cbf50307f54a5d5303e4f1eedd3442a8aba3
|
7
|
+
data.tar.gz: 319470299a08db00b427fb91b2ed34a84dcf0c9f27ee5cf1fbf39c76863c086e0aa500b271df98b2b3f773b0ad3da83eb190189aca5d86865949ec863b1bd349
|
data/.rspec
ADDED
data/.standard.yml
ADDED
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
@@ -0,0 +1,221 @@
|
|
1
|
+
PATH
|
2
|
+
remote: .
|
3
|
+
specs:
|
4
|
+
codefabrik-styleguide (0.1.0)
|
5
|
+
dartsass-rails (>= 0.4.0)
|
6
|
+
rails (>= 6.0)
|
7
|
+
|
8
|
+
GEM
|
9
|
+
remote: https://rubygems.org/
|
10
|
+
specs:
|
11
|
+
actioncable (7.0.6)
|
12
|
+
actionpack (= 7.0.6)
|
13
|
+
activesupport (= 7.0.6)
|
14
|
+
nio4r (~> 2.0)
|
15
|
+
websocket-driver (>= 0.6.1)
|
16
|
+
actionmailbox (7.0.6)
|
17
|
+
actionpack (= 7.0.6)
|
18
|
+
activejob (= 7.0.6)
|
19
|
+
activerecord (= 7.0.6)
|
20
|
+
activestorage (= 7.0.6)
|
21
|
+
activesupport (= 7.0.6)
|
22
|
+
mail (>= 2.7.1)
|
23
|
+
net-imap
|
24
|
+
net-pop
|
25
|
+
net-smtp
|
26
|
+
actionmailer (7.0.6)
|
27
|
+
actionpack (= 7.0.6)
|
28
|
+
actionview (= 7.0.6)
|
29
|
+
activejob (= 7.0.6)
|
30
|
+
activesupport (= 7.0.6)
|
31
|
+
mail (~> 2.5, >= 2.5.4)
|
32
|
+
net-imap
|
33
|
+
net-pop
|
34
|
+
net-smtp
|
35
|
+
rails-dom-testing (~> 2.0)
|
36
|
+
actionpack (7.0.6)
|
37
|
+
actionview (= 7.0.6)
|
38
|
+
activesupport (= 7.0.6)
|
39
|
+
rack (~> 2.0, >= 2.2.4)
|
40
|
+
rack-test (>= 0.6.3)
|
41
|
+
rails-dom-testing (~> 2.0)
|
42
|
+
rails-html-sanitizer (~> 1.0, >= 1.2.0)
|
43
|
+
actiontext (7.0.6)
|
44
|
+
actionpack (= 7.0.6)
|
45
|
+
activerecord (= 7.0.6)
|
46
|
+
activestorage (= 7.0.6)
|
47
|
+
activesupport (= 7.0.6)
|
48
|
+
globalid (>= 0.6.0)
|
49
|
+
nokogiri (>= 1.8.5)
|
50
|
+
actionview (7.0.6)
|
51
|
+
activesupport (= 7.0.6)
|
52
|
+
builder (~> 3.1)
|
53
|
+
erubi (~> 1.4)
|
54
|
+
rails-dom-testing (~> 2.0)
|
55
|
+
rails-html-sanitizer (~> 1.1, >= 1.2.0)
|
56
|
+
activejob (7.0.6)
|
57
|
+
activesupport (= 7.0.6)
|
58
|
+
globalid (>= 0.3.6)
|
59
|
+
activemodel (7.0.6)
|
60
|
+
activesupport (= 7.0.6)
|
61
|
+
activerecord (7.0.6)
|
62
|
+
activemodel (= 7.0.6)
|
63
|
+
activesupport (= 7.0.6)
|
64
|
+
activestorage (7.0.6)
|
65
|
+
actionpack (= 7.0.6)
|
66
|
+
activejob (= 7.0.6)
|
67
|
+
activerecord (= 7.0.6)
|
68
|
+
activesupport (= 7.0.6)
|
69
|
+
marcel (~> 1.0)
|
70
|
+
mini_mime (>= 1.1.0)
|
71
|
+
activesupport (7.0.6)
|
72
|
+
concurrent-ruby (~> 1.0, >= 1.0.2)
|
73
|
+
i18n (>= 1.6, < 2)
|
74
|
+
minitest (>= 5.1)
|
75
|
+
tzinfo (~> 2.0)
|
76
|
+
ast (2.4.2)
|
77
|
+
builder (3.2.4)
|
78
|
+
concurrent-ruby (1.2.2)
|
79
|
+
crass (1.0.6)
|
80
|
+
dartsass-rails (0.5.0)
|
81
|
+
railties (>= 6.0.0)
|
82
|
+
sass-embedded (~> 1.63)
|
83
|
+
date (3.3.3)
|
84
|
+
diff-lcs (1.5.0)
|
85
|
+
erubi (1.12.0)
|
86
|
+
globalid (1.1.0)
|
87
|
+
activesupport (>= 5.0)
|
88
|
+
google-protobuf (3.23.4-x86_64-linux)
|
89
|
+
i18n (1.14.1)
|
90
|
+
concurrent-ruby (~> 1.0)
|
91
|
+
json (2.6.3)
|
92
|
+
language_server-protocol (3.17.0.3)
|
93
|
+
lint_roller (1.1.0)
|
94
|
+
loofah (2.21.3)
|
95
|
+
crass (~> 1.0.2)
|
96
|
+
nokogiri (>= 1.12.0)
|
97
|
+
mail (2.8.1)
|
98
|
+
mini_mime (>= 0.1.1)
|
99
|
+
net-imap
|
100
|
+
net-pop
|
101
|
+
net-smtp
|
102
|
+
marcel (1.0.2)
|
103
|
+
method_source (1.0.0)
|
104
|
+
mini_mime (1.1.2)
|
105
|
+
minitest (5.19.0)
|
106
|
+
net-imap (0.3.7)
|
107
|
+
date
|
108
|
+
net-protocol
|
109
|
+
net-pop (0.1.2)
|
110
|
+
net-protocol
|
111
|
+
net-protocol (0.2.1)
|
112
|
+
timeout
|
113
|
+
net-smtp (0.3.3)
|
114
|
+
net-protocol
|
115
|
+
nio4r (2.5.9)
|
116
|
+
nokogiri (1.15.3-x86_64-linux)
|
117
|
+
racc (~> 1.4)
|
118
|
+
parallel (1.23.0)
|
119
|
+
parser (3.2.2.3)
|
120
|
+
ast (~> 2.4.1)
|
121
|
+
racc
|
122
|
+
racc (1.7.1)
|
123
|
+
rack (2.2.8)
|
124
|
+
rack-test (2.1.0)
|
125
|
+
rack (>= 1.3)
|
126
|
+
rails (7.0.6)
|
127
|
+
actioncable (= 7.0.6)
|
128
|
+
actionmailbox (= 7.0.6)
|
129
|
+
actionmailer (= 7.0.6)
|
130
|
+
actionpack (= 7.0.6)
|
131
|
+
actiontext (= 7.0.6)
|
132
|
+
actionview (= 7.0.6)
|
133
|
+
activejob (= 7.0.6)
|
134
|
+
activemodel (= 7.0.6)
|
135
|
+
activerecord (= 7.0.6)
|
136
|
+
activestorage (= 7.0.6)
|
137
|
+
activesupport (= 7.0.6)
|
138
|
+
bundler (>= 1.15.0)
|
139
|
+
railties (= 7.0.6)
|
140
|
+
rails-dom-testing (2.1.1)
|
141
|
+
activesupport (>= 5.0.0)
|
142
|
+
minitest
|
143
|
+
nokogiri (>= 1.6)
|
144
|
+
rails-html-sanitizer (1.6.0)
|
145
|
+
loofah (~> 2.21)
|
146
|
+
nokogiri (~> 1.14)
|
147
|
+
railties (7.0.6)
|
148
|
+
actionpack (= 7.0.6)
|
149
|
+
activesupport (= 7.0.6)
|
150
|
+
method_source
|
151
|
+
rake (>= 12.2)
|
152
|
+
thor (~> 1.0)
|
153
|
+
zeitwerk (~> 2.5)
|
154
|
+
rainbow (3.1.1)
|
155
|
+
rake (13.0.6)
|
156
|
+
regexp_parser (2.8.1)
|
157
|
+
rexml (3.2.6)
|
158
|
+
rspec (3.12.0)
|
159
|
+
rspec-core (~> 3.12.0)
|
160
|
+
rspec-expectations (~> 3.12.0)
|
161
|
+
rspec-mocks (~> 3.12.0)
|
162
|
+
rspec-core (3.12.2)
|
163
|
+
rspec-support (~> 3.12.0)
|
164
|
+
rspec-expectations (3.12.3)
|
165
|
+
diff-lcs (>= 1.2.0, < 2.0)
|
166
|
+
rspec-support (~> 3.12.0)
|
167
|
+
rspec-mocks (3.12.6)
|
168
|
+
diff-lcs (>= 1.2.0, < 2.0)
|
169
|
+
rspec-support (~> 3.12.0)
|
170
|
+
rspec-support (3.12.1)
|
171
|
+
rubocop (1.52.1)
|
172
|
+
json (~> 2.3)
|
173
|
+
parallel (~> 1.10)
|
174
|
+
parser (>= 3.2.2.3)
|
175
|
+
rainbow (>= 2.2.2, < 4.0)
|
176
|
+
regexp_parser (>= 1.8, < 3.0)
|
177
|
+
rexml (>= 3.2.5, < 4.0)
|
178
|
+
rubocop-ast (>= 1.28.0, < 2.0)
|
179
|
+
ruby-progressbar (~> 1.7)
|
180
|
+
unicode-display_width (>= 2.4.0, < 3.0)
|
181
|
+
rubocop-ast (1.29.0)
|
182
|
+
parser (>= 3.2.1.0)
|
183
|
+
rubocop-performance (1.18.0)
|
184
|
+
rubocop (>= 1.7.0, < 2.0)
|
185
|
+
rubocop-ast (>= 0.4.0)
|
186
|
+
ruby-progressbar (1.13.0)
|
187
|
+
sass-embedded (1.64.2-x86_64-linux-gnu)
|
188
|
+
google-protobuf (~> 3.23)
|
189
|
+
standard (1.30.1)
|
190
|
+
language_server-protocol (~> 3.17.0.2)
|
191
|
+
lint_roller (~> 1.0)
|
192
|
+
rubocop (~> 1.52.0)
|
193
|
+
standard-custom (~> 1.0.0)
|
194
|
+
standard-performance (~> 1.1.0)
|
195
|
+
standard-custom (1.0.2)
|
196
|
+
lint_roller (~> 1.0)
|
197
|
+
rubocop (~> 1.50)
|
198
|
+
standard-performance (1.1.2)
|
199
|
+
lint_roller (~> 1.1)
|
200
|
+
rubocop-performance (~> 1.18.0)
|
201
|
+
thor (1.2.2)
|
202
|
+
timeout (0.4.0)
|
203
|
+
tzinfo (2.0.6)
|
204
|
+
concurrent-ruby (~> 1.0)
|
205
|
+
unicode-display_width (2.4.2)
|
206
|
+
websocket-driver (0.7.6)
|
207
|
+
websocket-extensions (>= 0.1.0)
|
208
|
+
websocket-extensions (0.1.5)
|
209
|
+
zeitwerk (2.6.10)
|
210
|
+
|
211
|
+
PLATFORMS
|
212
|
+
x86_64-linux
|
213
|
+
|
214
|
+
DEPENDENCIES
|
215
|
+
codefabrik-styleguide!
|
216
|
+
rake (~> 13.0)
|
217
|
+
rspec (~> 3.0)
|
218
|
+
standard (~> 1.3)
|
219
|
+
|
220
|
+
BUNDLED WITH
|
221
|
+
2.4.10
|
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2023 Lukas_Skywalker
|
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,99 @@
|
|
1
|
+
# Codefabrik::Styleguide
|
2
|
+
|
3
|
+
Default styles for Codefabrik Rails applications.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Install the gem and add to the application's Gemfile by executing:
|
8
|
+
|
9
|
+
$ bundle add codefabrik-styleguide
|
10
|
+
|
11
|
+
If bundler is not being used to manage dependencies, install the gem by
|
12
|
+
executing:
|
13
|
+
|
14
|
+
$ gem install codefabrik-styleguide
|
15
|
+
|
16
|
+
## Usage
|
17
|
+
|
18
|
+
Add the Codefabrik styles to your `application.css.scss` file:
|
19
|
+
|
20
|
+
```scss
|
21
|
+
@use 'codefabrik/styleguide' with (
|
22
|
+
$primary_color: blue,
|
23
|
+
$text_on_primary_color: white
|
24
|
+
);
|
25
|
+
```
|
26
|
+
|
27
|
+
You can override default values by adding them to the `with` block as shown
|
28
|
+
above.
|
29
|
+
|
30
|
+
The possible overrides are the following:
|
31
|
+
|
32
|
+
```scss
|
33
|
+
$media_breakpoint: 40em;
|
34
|
+
$primary_color: red;
|
35
|
+
$text_on_primary_color: blue;
|
36
|
+
$secondary_color: pink;
|
37
|
+
$text_on_secondary_color: black;
|
38
|
+
$border_color: green;
|
39
|
+
$default_distance: 1rem;
|
40
|
+
```
|
41
|
+
|
42
|
+
## Architecture
|
43
|
+
|
44
|
+
The styleguide is meant for mobile first development. Start with the mobile
|
45
|
+
styles, and add the desktop styles later.
|
46
|
+
|
47
|
+
### Grid
|
48
|
+
|
49
|
+
To create a layout where the mobile view shows a single column and the desktop
|
50
|
+
view shows four columns side by side, use the following rules:
|
51
|
+
|
52
|
+
```html
|
53
|
+
<div class="grid grid-d-4"></div> <!-- single column on mobile, 4 on desktop -->
|
54
|
+
```
|
55
|
+
|
56
|
+
You can also implement different column counts on mobile and desktop:
|
57
|
+
|
58
|
+
```html
|
59
|
+
<div class="grid grid-2 grid-d-4"></div> <!-- 2 columns on mobile, 4 on desktop -->
|
60
|
+
```
|
61
|
+
|
62
|
+
Columns of varying width can be defined by their weight:
|
63
|
+
|
64
|
+
```html
|
65
|
+
<div class="grid grid-1-3"></div> <!-- column width of 25% and 75% on mobile and desktop -->
|
66
|
+
```
|
67
|
+
|
68
|
+
### Flexbox
|
69
|
+
|
70
|
+
Flexbox rules are defined with english words. Use the horizontal position
|
71
|
+
first, then the vertical position, such as `center`, `left`, `right`, `top`
|
72
|
+
and `bottom`.
|
73
|
+
|
74
|
+
```html
|
75
|
+
<div class="flex center-top">...</div>
|
76
|
+
```
|
77
|
+
|
78
|
+
|
79
|
+
## Development
|
80
|
+
|
81
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run
|
82
|
+
`rake spec` to run the tests. You can also run `bin/console` for an interactive
|
83
|
+
prompt that will allow you to experiment.
|
84
|
+
|
85
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To
|
86
|
+
release a new version, update the version number in `version.rb`, and then run
|
87
|
+
`bundle exec rake release`, which will create a git tag for the version, push
|
88
|
+
git commits and the created tag, and push the `.gem` file to
|
89
|
+
[rubygems.org](https://rubygems.org).
|
90
|
+
|
91
|
+
## Contributing
|
92
|
+
|
93
|
+
Bug reports and pull requests are welcome on GitHub at
|
94
|
+
https://github.com/code-fabrik/styleguide.
|
95
|
+
|
96
|
+
## License
|
97
|
+
|
98
|
+
The gem is available as open source under the terms of the
|
99
|
+
[MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,98 @@
|
|
1
|
+
.wrapper {
|
2
|
+
width: calc(100% - 2 * $default_distance);
|
3
|
+
margin: 0 $default_distance;
|
4
|
+
|
5
|
+
@media screen and (min-width: $media_breakpoint) {
|
6
|
+
width: $media_breakpoint;
|
7
|
+
margin: 0 auto;
|
8
|
+
}
|
9
|
+
}
|
10
|
+
|
11
|
+
$sizes: ("quarter": 0.25, "half": 0.5, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6);
|
12
|
+
|
13
|
+
@each $name, $size in $sizes {
|
14
|
+
.m-#{$name} {
|
15
|
+
margin: $size * $default_distance;
|
16
|
+
}
|
17
|
+
|
18
|
+
.mt-#{$name} {
|
19
|
+
margin-top: $size * $default_distance;
|
20
|
+
}
|
21
|
+
|
22
|
+
.mb-#{$name} {
|
23
|
+
margin-bottom: $size * $default_distance;
|
24
|
+
}
|
25
|
+
|
26
|
+
.mx-#{$name} {
|
27
|
+
margin-left: $size * $default_distance;
|
28
|
+
margin-right: $size * $default_distance;
|
29
|
+
}
|
30
|
+
|
31
|
+
.my-#{$name} {
|
32
|
+
margin-top: $size * $default_distance;
|
33
|
+
margin-bottom: $size * $default_distance;
|
34
|
+
}
|
35
|
+
|
36
|
+
.p-#{$name} {
|
37
|
+
padding: $size * $default_distance;
|
38
|
+
}
|
39
|
+
|
40
|
+
.px-#{$name} {
|
41
|
+
padding-left: $size * $default_distance;
|
42
|
+
padding-right: $size * $default_distance;
|
43
|
+
}
|
44
|
+
|
45
|
+
.py-#{$name} {
|
46
|
+
padding-top: $size * $default_distance;
|
47
|
+
padding-bottom: $size * $default_distance;
|
48
|
+
}
|
49
|
+
|
50
|
+
.pb-#{$name} {
|
51
|
+
padding-bottom: $size * $default_distance;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
.sticky {
|
56
|
+
position: sticky;
|
57
|
+
top: 0;
|
58
|
+
}
|
59
|
+
|
60
|
+
.front {
|
61
|
+
z-index: 10;
|
62
|
+
}
|
63
|
+
|
64
|
+
.wide {
|
65
|
+
width: 100%;
|
66
|
+
}
|
67
|
+
|
68
|
+
.shadow {
|
69
|
+
box-shadow: 2px 2px 7px 3px $border_color;
|
70
|
+
}
|
71
|
+
|
72
|
+
.border-1 {
|
73
|
+
border: 1px solid $border_color;
|
74
|
+
}
|
75
|
+
|
76
|
+
.hide-on-mobile {
|
77
|
+
display: none;
|
78
|
+
|
79
|
+
@media screen and (min-width: $media_breakpoint) {
|
80
|
+
display: block;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
.hide-on-desktop {
|
85
|
+
display: block;
|
86
|
+
|
87
|
+
@media screen and (min-width: $media_breakpoint) {
|
88
|
+
display: none;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
.inline-block {
|
93
|
+
display: inline-block;
|
94
|
+
}
|
95
|
+
|
96
|
+
.clearfix {
|
97
|
+
clear: both;
|
98
|
+
}
|
@@ -0,0 +1,101 @@
|
|
1
|
+
.grid {
|
2
|
+
display: grid;
|
3
|
+
column-gap: $default_distance;
|
4
|
+
row-gap: $default_distance;
|
5
|
+
grid-template-columns: 1fr;
|
6
|
+
|
7
|
+
&.nogap {
|
8
|
+
column-gap: 0;
|
9
|
+
row-gap: 0;
|
10
|
+
}
|
11
|
+
|
12
|
+
@each $count in 1 2 3 4 5 6 {
|
13
|
+
&.grid-#{$count} {
|
14
|
+
grid-template-columns: repeat($count, 1fr);
|
15
|
+
}
|
16
|
+
|
17
|
+
@media screen and (min-width: $media_breakpoint) {
|
18
|
+
&.grid-d-#{$count} {
|
19
|
+
grid-template-columns: repeat($count, 1fr);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
}
|
23
|
+
|
24
|
+
@each $first_size in 1 2 3 4 5 6 {
|
25
|
+
@each $second_size in 1 2 3 4 5 6 {
|
26
|
+
&.grid-#{$first_size}-#{$second_size} {
|
27
|
+
grid-template-columns: $first_size + 0fr $second_size + 0fr;
|
28
|
+
}
|
29
|
+
|
30
|
+
@media screen and (min-width: $media_breakpoint) {
|
31
|
+
&.grid-d-#{$first_size}-#{$second_size} {
|
32
|
+
grid-template-columns: $first_size + 0fr $second_size + 0fr;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
@each $colspan in 1 2 3 4 5 6 {
|
39
|
+
.wide-#{$colspan} {
|
40
|
+
grid-column: span $colspan;
|
41
|
+
}
|
42
|
+
|
43
|
+
@media screen and (min-width: $media_breakpoint) {
|
44
|
+
.wide-d-#{$colspan} {
|
45
|
+
grid-column: span $colspan;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
$dir_v: ("top": flex-start, "center": center, "bottom": flex-end);
|
52
|
+
$dir_h: ("left": flex-start, "center": center, "right": flex-end);
|
53
|
+
|
54
|
+
.flex {
|
55
|
+
display: flex;
|
56
|
+
flex-direction: column;
|
57
|
+
|
58
|
+
@media screen and (min-width: $media_breakpoint) {
|
59
|
+
flex-direction: row;
|
60
|
+
}
|
61
|
+
|
62
|
+
@each $vname, $v in $dir_v {
|
63
|
+
@each $hname, $h in $dir_h {
|
64
|
+
&.#{$hname}-#{$vname} {
|
65
|
+
justify-content: $h;
|
66
|
+
align-items: $v;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
&.apart {
|
72
|
+
width: 100%;
|
73
|
+
justify-content: space-between;
|
74
|
+
|
75
|
+
&.v-center {
|
76
|
+
align-items: center;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
&.stretch {
|
81
|
+
width: 100%;
|
82
|
+
justify-content: stretch;
|
83
|
+
}
|
84
|
+
|
85
|
+
&.col {
|
86
|
+
flex-direction: column;
|
87
|
+
|
88
|
+
&.apart {
|
89
|
+
justify-content: space-between;
|
90
|
+
}
|
91
|
+
|
92
|
+
@each $vname, $v in $dir_v {
|
93
|
+
@each $hname, $h in $dir_h {
|
94
|
+
&.#{$hname}-#{$vname} {
|
95
|
+
justify-content: $v;
|
96
|
+
align-items: $h;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
@@ -0,0 +1,91 @@
|
|
1
|
+
p {
|
2
|
+
margin-bottom: $default_distance;
|
3
|
+
line-height: 1.6;
|
4
|
+
text-rendering: optimizeLegibility;
|
5
|
+
}
|
6
|
+
|
7
|
+
a {
|
8
|
+
line-height: inherit;
|
9
|
+
color: $primary_color;
|
10
|
+
}
|
11
|
+
|
12
|
+
h1, h2, h3, h4, h5, h6 {
|
13
|
+
font-weight: normal;
|
14
|
+
line-height: 1.4;
|
15
|
+
margin-top: 0;
|
16
|
+
margin-bottom: 0.5rem;
|
17
|
+
}
|
18
|
+
|
19
|
+
h1 {
|
20
|
+
font-size: 1.5 * $default_distance;
|
21
|
+
|
22
|
+
@media print, screen and (min-width: $media_breakpoint) {
|
23
|
+
font-size: 3 * $default_distance;
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
h2 {
|
28
|
+
font-size: 1.25 * $default_distance;
|
29
|
+
|
30
|
+
@media print, screen and (min-width: $media_breakpoint) {
|
31
|
+
font-size: 2.5 * $default_distance;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
h3 {
|
36
|
+
font-size: 1.2 * $default_distance;
|
37
|
+
|
38
|
+
@media print, screen and (min-width: $media_breakpoint) {
|
39
|
+
font-size: 2 * $default_distance;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
h4 {
|
44
|
+
font-size: 1.1 * $default_distance;
|
45
|
+
|
46
|
+
@media print, screen and (min-width: $media_breakpoint) {
|
47
|
+
font-size: 1.5 * $default_distance;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
h5 {
|
52
|
+
font-size: $default_distance;
|
53
|
+
|
54
|
+
@media print, screen and (min-width: $media_breakpoint) {
|
55
|
+
font-size: 1.25 * $default_distance;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
h6 {
|
60
|
+
font-size: $default_distance;
|
61
|
+
|
62
|
+
@media print, screen and (min-width: $media_breakpoint) {
|
63
|
+
font-size: $default_distance;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
blockquote {
|
68
|
+
line-height: 1.6;
|
69
|
+
|
70
|
+
cite {
|
71
|
+
display: block;
|
72
|
+
font-size: .8em;
|
73
|
+
|
74
|
+
&::before {
|
75
|
+
content: "— ";
|
76
|
+
}
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
.upper {
|
81
|
+
text-transform: uppercase;
|
82
|
+
}
|
83
|
+
|
84
|
+
.text-center {
|
85
|
+
text-align: center;
|
86
|
+
}
|
87
|
+
|
88
|
+
.backdrop {
|
89
|
+
background-color: $primary_color;
|
90
|
+
color: $text_on_primary_color;
|
91
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
.btn, .button {
|
2
|
+
display: inline-block;
|
3
|
+
text-decoration: none;
|
4
|
+
border: none;
|
5
|
+
padding: 0.8em 1em;
|
6
|
+
cursor: pointer;
|
7
|
+
background-color: $primary_color;
|
8
|
+
color: $text_on_primary_color;
|
9
|
+
|
10
|
+
&:hover {
|
11
|
+
background-color: darken($primary_color, 15%);
|
12
|
+
}
|
13
|
+
|
14
|
+
&:active {
|
15
|
+
background-color: darken($primary_color, 30%);
|
16
|
+
}
|
17
|
+
|
18
|
+
&.small {
|
19
|
+
padding: 0.4em 0.5em;
|
20
|
+
font-size: 0.8em;
|
21
|
+
}
|
22
|
+
|
23
|
+
&.big {
|
24
|
+
padding: 1.2em 1.5em;
|
25
|
+
font-size: 1.3em;
|
26
|
+
}
|
27
|
+
|
28
|
+
&.outline {
|
29
|
+
background-color: transparent;
|
30
|
+
border: 1px solid $primary_color;
|
31
|
+
color: $primary_color;
|
32
|
+
|
33
|
+
&:hover {
|
34
|
+
background-color: darken(white, 5%);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
&.noborder {
|
39
|
+
border: none;
|
40
|
+
}
|
41
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
$media_breakpoint: 75rem !default;
|
2
|
+
$primary_color: red !default;
|
3
|
+
$text_on_primary_color: blue !default;
|
4
|
+
$secondary_color: pink !default;
|
5
|
+
$text_on_secondary_color: black !default;
|
6
|
+
$border_color: green !default;
|
7
|
+
$default_distance: 1rem !default;
|
8
|
+
|
9
|
+
@import 'styleguide/01_reset';
|
10
|
+
@import 'styleguide/02_layout';
|
11
|
+
@import 'styleguide/03_grid';
|
12
|
+
@import 'styleguide/04_typo';
|
13
|
+
@import 'styleguide/05_buttons';
|
metadata
ADDED
@@ -0,0 +1,92 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: codefabrik-styleguide
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Lukas_Skywalker
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2023-08-01 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: dartsass-rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 0.4.0
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 0.4.0
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rails
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ">="
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '6.0'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ">="
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '6.0'
|
41
|
+
description: Provides Rails applications with standard styles, including a responsive
|
42
|
+
grid.
|
43
|
+
email:
|
44
|
+
- lukas.diener@hotmail.com
|
45
|
+
executables: []
|
46
|
+
extensions: []
|
47
|
+
extra_rdoc_files: []
|
48
|
+
files:
|
49
|
+
- ".rspec"
|
50
|
+
- ".standard.yml"
|
51
|
+
- Gemfile
|
52
|
+
- Gemfile.lock
|
53
|
+
- LICENSE.txt
|
54
|
+
- README.md
|
55
|
+
- Rakefile
|
56
|
+
- lib/codefabrik/styleguide.rb
|
57
|
+
- lib/codefabrik/styleguide/version.rb
|
58
|
+
- sig/codefabrik/styleguide.rbs
|
59
|
+
- vendor/assets/stylesheets/codefabrik/styleguide.scss
|
60
|
+
- vendor/assets/stylesheets/codefabrik/styleguide/01_reset.scss
|
61
|
+
- vendor/assets/stylesheets/codefabrik/styleguide/02_layout.scss
|
62
|
+
- vendor/assets/stylesheets/codefabrik/styleguide/03_grid.scss
|
63
|
+
- vendor/assets/stylesheets/codefabrik/styleguide/04_typo.scss
|
64
|
+
- vendor/assets/stylesheets/codefabrik/styleguide/05_buttons.scss
|
65
|
+
homepage: https://code-fabrik.ch
|
66
|
+
licenses:
|
67
|
+
- MIT
|
68
|
+
metadata:
|
69
|
+
allowed_push_host: https://rubygems.org
|
70
|
+
homepage_uri: https://code-fabrik.ch
|
71
|
+
source_code_uri: https://github.com/code-fabrik/styleguide
|
72
|
+
changelog_uri: https://github.com/code-fabrik/styleguide
|
73
|
+
post_install_message:
|
74
|
+
rdoc_options: []
|
75
|
+
require_paths:
|
76
|
+
- lib
|
77
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
78
|
+
requirements:
|
79
|
+
- - ">="
|
80
|
+
- !ruby/object:Gem::Version
|
81
|
+
version: 2.6.0
|
82
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
83
|
+
requirements:
|
84
|
+
- - ">="
|
85
|
+
- !ruby/object:Gem::Version
|
86
|
+
version: '0'
|
87
|
+
requirements: []
|
88
|
+
rubygems_version: 3.4.10
|
89
|
+
signing_key:
|
90
|
+
specification_version: 4
|
91
|
+
summary: Default styles for Rails applications.
|
92
|
+
test_files: []
|