codefabrik-styleguide 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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
@@ -0,0 +1,3 @@
1
+ --format documentation
2
+ --color
3
+ --require spec_helper
data/.standard.yml ADDED
@@ -0,0 +1,7 @@
1
+ # For available configuration options, see:
2
+ # https://github.com/testdouble/standard
3
+ ruby_version: 2.6
4
+
5
+ ignore:
6
+ - 'codefabrik-styleguide.gemspec':
7
+ - Style/StringLiterals
data/Gemfile ADDED
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ source "https://rubygems.org"
4
+
5
+ # Specify your gem's dependencies in codefabrik-styleguide.gemspec
6
+ gemspec
7
+
8
+ gem "rake", "~> 13.0"
9
+
10
+ gem "rspec", "~> 3.0"
11
+
12
+ gem "standard", "~> 1.3"
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,10 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "bundler/gem_tasks"
4
+ require "rspec/core/rake_task"
5
+
6
+ RSpec::Core::RakeTask.new(:spec)
7
+
8
+ require "standard/rake"
9
+
10
+ task default: %i[spec standard]
@@ -0,0 +1,7 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Codefabrik
4
+ module Styleguide
5
+ VERSION = "0.1.0"
6
+ end
7
+ end
@@ -0,0 +1,13 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "rails/engine"
4
+ require_relative "styleguide/version"
5
+
6
+ module Codefabrik
7
+ module Styleguide
8
+ class Error < StandardError; end
9
+
10
+ class Engine < ::Rails::Engine
11
+ end
12
+ end
13
+ end
@@ -0,0 +1,6 @@
1
+ module Codefabrik
2
+ module Styleguide
3
+ VERSION: String
4
+ # See the writing guide of rbs: https://github.com/ruby/rbs#guides
5
+ end
6
+ end
@@ -0,0 +1,12 @@
1
+ body {
2
+ margin: 0;
3
+ line-height: 1;
4
+ -moz-osx-font-smoothing: grayscale;
5
+ -webkit-font-smoothing: antialiased;
6
+ }
7
+
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ }
@@ -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: []