codefabrik-styleguide 0.1.4 → 0.1.6

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ef08d6667ef9556d0be71b5e3476aab8270c3366386a7f96e46004808441b026
4
- data.tar.gz: 44d2aa3773c9e5b059fa757ed6fbbc803c4da957573cb81bf10e1b537e7fb745
3
+ metadata.gz: c48356f096ab8c77ab08f7a0dff5adb9c08c6030a91a96fb453777801e169b30
4
+ data.tar.gz: f13ac323d084d21effd2950f733b5367b22830f23145b2b60a473389933ebd09
5
5
  SHA512:
6
- metadata.gz: 89de3b1ff8fe3297cff783d6984d34345245a79d76381cfd021ef36d8530fc8e07b023597ae4c62a54b75dd5dded07e364b40a5d022a13f1ee7f1b313d44e7c9
7
- data.tar.gz: 78c9c4fd5a6665608af28a128700bc84df023704802690fd694858c8d47b44c69db72ae5b873f75fe8d19099918ce565752568f4cfdcc11a688762a02cec021a
6
+ metadata.gz: 8a2b27e3235525a615734aafd0e052f8207e1e14eae130cec2943340635378b16a137c1f85af931c73bc147767f83b939e48a3234db1523fbbe0a0f34b36b4f9
7
+ data.tar.gz: cda3bfefa5ee369994601242651753accbca77710ad6805b74923e5071d935da3c95b4c5985eaf6d8bf741903478ae0e4d38963da3791131e99c13c287d3dd37
data/Gemfile CHANGED
@@ -8,5 +8,3 @@ gemspec
8
8
  gem "rake", "~> 13.0"
9
9
 
10
10
  gem "rspec", "~> 3.0"
11
-
12
- gem "standard", "~> 1.3"
data/Gemfile.lock CHANGED
@@ -1,9 +1,11 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- codefabrik-styleguide (0.1.4)
4
+ codefabrik-styleguide (0.1.6)
5
5
  dartsass-rails (>= 0.4.0)
6
6
  rails (>= 6.0)
7
+ sassc (>= 2.4.0)
8
+ sinatra (>= 3.1.0)
7
9
 
8
10
  GEM
9
11
  remote: https://rubygems.org/
@@ -73,7 +75,6 @@ GEM
73
75
  i18n (>= 1.6, < 2)
74
76
  minitest (>= 5.1)
75
77
  tzinfo (~> 2.0)
76
- ast (2.4.2)
77
78
  builder (3.2.4)
78
79
  concurrent-ruby (1.2.2)
79
80
  crass (1.0.6)
@@ -83,14 +84,12 @@ GEM
83
84
  date (3.3.3)
84
85
  diff-lcs (1.5.0)
85
86
  erubi (1.12.0)
87
+ ffi (1.16.3)
86
88
  globalid (1.1.0)
87
89
  activesupport (>= 5.0)
88
90
  google-protobuf (3.23.4-x86_64-linux)
89
91
  i18n (1.14.1)
90
92
  concurrent-ruby (~> 1.0)
91
- json (2.6.3)
92
- language_server-protocol (3.17.0.3)
93
- lint_roller (1.1.0)
94
93
  loofah (2.21.3)
95
94
  crass (~> 1.0.2)
96
95
  nokogiri (>= 1.12.0)
@@ -103,6 +102,8 @@ GEM
103
102
  method_source (1.0.0)
104
103
  mini_mime (1.1.2)
105
104
  minitest (5.19.0)
105
+ mustermann (3.0.0)
106
+ ruby2_keywords (~> 0.0.1)
106
107
  net-imap (0.3.7)
107
108
  date
108
109
  net-protocol
@@ -115,12 +116,10 @@ GEM
115
116
  nio4r (2.5.9)
116
117
  nokogiri (1.15.3-x86_64-linux)
117
118
  racc (~> 1.4)
118
- parallel (1.23.0)
119
- parser (3.2.2.3)
120
- ast (~> 2.4.1)
121
- racc
122
119
  racc (1.7.1)
123
120
  rack (2.2.8)
121
+ rack-protection (3.1.0)
122
+ rack (~> 2.2, >= 2.2.4)
124
123
  rack-test (2.1.0)
125
124
  rack (>= 1.3)
126
125
  rails (7.0.6)
@@ -151,10 +150,7 @@ GEM
151
150
  rake (>= 12.2)
152
151
  thor (~> 1.0)
153
152
  zeitwerk (~> 2.5)
154
- rainbow (3.1.1)
155
153
  rake (13.0.6)
156
- regexp_parser (2.8.1)
157
- rexml (3.2.6)
158
154
  rspec (3.12.0)
159
155
  rspec-core (~> 3.12.0)
160
156
  rspec-expectations (~> 3.12.0)
@@ -168,41 +164,21 @@ GEM
168
164
  diff-lcs (>= 1.2.0, < 2.0)
169
165
  rspec-support (~> 3.12.0)
170
166
  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)
167
+ ruby2_keywords (0.0.5)
187
168
  sass-embedded (1.64.2-x86_64-linux-gnu)
188
169
  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)
170
+ sassc (2.4.0)
171
+ ffi (~> 1.9)
172
+ sinatra (3.1.0)
173
+ mustermann (~> 3.0)
174
+ rack (~> 2.2, >= 2.2.4)
175
+ rack-protection (= 3.1.0)
176
+ tilt (~> 2.0)
201
177
  thor (1.2.2)
178
+ tilt (2.3.0)
202
179
  timeout (0.4.0)
203
180
  tzinfo (2.0.6)
204
181
  concurrent-ruby (~> 1.0)
205
- unicode-display_width (2.4.2)
206
182
  websocket-driver (0.7.6)
207
183
  websocket-extensions (>= 0.1.0)
208
184
  websocket-extensions (0.1.5)
@@ -215,7 +191,6 @@ DEPENDENCIES
215
191
  codefabrik-styleguide!
216
192
  rake (~> 13.0)
217
193
  rspec (~> 3.0)
218
- standard (~> 1.3)
219
194
 
220
195
  BUNDLED WITH
221
196
  2.4.10
data/README.md CHANGED
@@ -30,15 +30,18 @@ above.
30
30
  The possible overrides are the following:
31
31
 
32
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
- $background_color: white;
41
- $font: 'sans-serif';
33
+ $media_breakpoint: 75rem !default;
34
+ $primary_color: #A0E7E5 !default;
35
+ $text_on_primary_color: black !default;
36
+ $secondary_color: #FFAEBC !default;
37
+ $text_on_secondary_color: black !default;
38
+ $border_color: #8f8f9d !default;
39
+ $default_distance: 1rem !default;
40
+ $background_color: #FDFDFD !default;
41
+ $background_color_dark: #212121 !default;
42
+ $font: 'sans-serif' !default;
43
+ $font_color: #333 !default;
44
+ $font_color_dark: #EFEFEF !default;
42
45
  ```
43
46
 
44
47
  ## Architecture
@@ -80,6 +83,9 @@ and `bottom`.
80
83
 
81
84
  ## Development
82
85
 
86
+ Run `ruby app.rb` and open [http://localhost:4567](http://localhost:4567) for a
87
+ live preview of the styles in your browser.
88
+
83
89
  After checking out the repo, run `bin/setup` to install dependencies. Then, run
84
90
  `rake spec` to run the tests. You can also run `bin/console` for an interactive
85
91
  prompt that will allow you to experiment.
data/Rakefile CHANGED
@@ -5,6 +5,40 @@ require "rspec/core/rake_task"
5
5
 
6
6
  RSpec::Core::RakeTask.new(:spec)
7
7
 
8
- require "standard/rake"
8
+ require 'sinatra'
9
+ require 'sassc'
9
10
 
10
- task default: %i[spec standard]
11
+ module ErbRender
12
+ include Sinatra::Templates
13
+ include Sinatra::Helpers
14
+
15
+ def settings
16
+ @settings ||= begin
17
+ settings = Sinatra::Application.settings
18
+ settings.root = "./"
19
+ settings
20
+ end
21
+ end
22
+
23
+ def template_cache
24
+ @template_cache ||= Tilt::Cache.new
25
+ end
26
+ end
27
+
28
+ class Builder
29
+ include ErbRender
30
+
31
+ def get_body
32
+ erb :index
33
+ end
34
+ end
35
+
36
+ task :generate_html do
37
+ require 'sinatra'
38
+ html_output = Builder.new.get_body
39
+ File.write('dist/index.html', html_output)
40
+
41
+ scss = File.read('vendor/assets/stylesheets/codefabrik/styleguide.scss')
42
+ css_output = SassC::Engine.new(scss, filename: 'vendor/assets/stylesheets/codefabrik/styleguide.scss', style: :compressed).render
43
+ File.write('dist/style.css', css_output)
44
+ end
data/app.rb ADDED
@@ -0,0 +1,16 @@
1
+ # frozen_string_literal: true
2
+
3
+ require 'sinatra'
4
+ require 'sassc'
5
+
6
+ get '/' do
7
+ erb :index
8
+ end
9
+
10
+ get '/style.css' do
11
+ data = File.read('vendor/assets/stylesheets/codefabrik/styleguide.scss')
12
+ content_type 'text/css'
13
+ return SassC::Engine.new(data,
14
+ filename: 'vendor/assets/stylesheets/codefabrik/styleguide.scss',
15
+ style: :compressed).render
16
+ end
data/dist/.gitkeep ADDED
File without changes
@@ -2,6 +2,6 @@
2
2
 
3
3
  module Codefabrik
4
4
  module Styleguide
5
- VERSION = "0.1.4"
5
+ VERSION = "0.1.6"
6
6
  end
7
7
  end
@@ -1,4 +1,12 @@
1
- header {
1
+ body {
2
+ background-color: $background_color;
3
+
4
+ @media (prefers-color-scheme: dark) {
5
+ background-color: $background_color_dark;
6
+ }
7
+ }
8
+
9
+ header, footer {
2
10
  width: 100%;
3
11
  background-color: $primary_color_light;
4
12
  color: $text_on_primary_color;
@@ -35,7 +43,7 @@ header {
35
43
  }
36
44
  }
37
45
 
38
- .wrapper {
46
+ main {
39
47
  width: calc(100% - 2 * $default_distance);
40
48
  margin: 0 $default_distance;
41
49
  margin-top: $default_distance;
@@ -44,12 +52,13 @@ header {
44
52
  @media screen and (min-width: $media_breakpoint) {
45
53
  width: $media_breakpoint;
46
54
  margin: 0 auto;
55
+ margin-top: $default_distance;
47
56
  }
48
57
  }
49
58
 
50
59
  // Side by side layout
51
60
  @media screen and (min-width: $media_breakpoint) {
52
- body {
61
+ body.side-by-side {
53
62
  display: flex;
54
63
 
55
64
  .sidebar {
@@ -72,7 +81,7 @@ header {
72
81
  }
73
82
  }
74
83
 
75
- .wrapper {
84
+ main {
76
85
  flex: 1;
77
86
  margin: 2vh;
78
87
  }
@@ -1,5 +1,10 @@
1
1
  body {
2
2
  font-family: $font;
3
+ color: $font_color;
4
+
5
+ @media (prefers-color-scheme: dark) {
6
+ color: $font_color_dark;
7
+ }
3
8
  }
4
9
 
5
10
  p {
@@ -7,12 +12,20 @@ p {
7
12
  line-height: 1.6;
8
13
  text-rendering: optimizeLegibility;
9
14
  font-size: 1 * $default_distance;
15
+ text-wrap: balance;
16
+ hyphens: auto;
17
+ }
18
+
19
+ li {
20
+ line-height: 1.4;
10
21
  }
11
22
 
12
23
  a {
13
24
  line-height: inherit;
14
25
  color: $primary_color;
15
26
  font-size: 1 * $default_distance;
27
+ text-underline-offset: $default_distance * 0.15;
28
+ text-decoration-thickness: $default_distance * 0.08;
16
29
  }
17
30
 
18
31
  h1, h2, h3, h4, h5, h6 {
@@ -23,34 +36,34 @@ h1, h2, h3, h4, h5, h6 {
23
36
  }
24
37
 
25
38
  h1 {
26
- font-size: 1.5 * $default_distance;
39
+ font-size: 1.3 * $default_distance;
27
40
 
28
41
  @media print, screen and (min-width: $media_breakpoint) {
29
- font-size: 3 * $default_distance;
42
+ font-size: 2 * $default_distance;
30
43
  }
31
44
  }
32
45
 
33
46
  h2 {
34
- font-size: 1.25 * $default_distance;
47
+ font-size: 1.2 * $default_distance;
35
48
 
36
49
  @media print, screen and (min-width: $media_breakpoint) {
37
- font-size: 2.5 * $default_distance;
50
+ font-size: 1.8 * $default_distance;
38
51
  }
39
52
  }
40
53
 
41
54
  h3 {
42
- font-size: 1.2 * $default_distance;
55
+ font-size: 1.1 * $default_distance;
43
56
 
44
57
  @media print, screen and (min-width: $media_breakpoint) {
45
- font-size: 2 * $default_distance;
58
+ font-size: 1.6 * $default_distance;
46
59
  }
47
60
  }
48
61
 
49
62
  h4 {
50
- font-size: 1.1 * $default_distance;
63
+ font-size: $default_distance;
51
64
 
52
65
  @media print, screen and (min-width: $media_breakpoint) {
53
- font-size: 1.5 * $default_distance;
66
+ font-size: 1.4 * $default_distance;
54
67
  }
55
68
  }
56
69
 
@@ -58,7 +71,7 @@ h5 {
58
71
  font-size: $default_distance;
59
72
 
60
73
  @media print, screen and (min-width: $media_breakpoint) {
61
- font-size: 1.25 * $default_distance;
74
+ font-size: 1.2 * $default_distance;
62
75
  }
63
76
  }
64
77
 
@@ -1,4 +1,4 @@
1
- .btn, .button {
1
+ @mixin button {
2
2
  display: inline-block;
3
3
  text-decoration: none;
4
4
  border: none;
@@ -9,11 +9,11 @@
9
9
  font-size: 0.8 * $default_distance;
10
10
 
11
11
  &:hover {
12
- background-color: darken($primary_color, 15%);
12
+ background-color: scale-color($primary_color, $lightness: -15%);
13
13
  }
14
14
 
15
15
  &:active {
16
- background-color: darken($primary_color, 30%);
16
+ background-color: scale-color($primary_color, $lightness: -30%);
17
17
  }
18
18
 
19
19
  &.small {
@@ -32,7 +32,7 @@
32
32
  color: $primary_color;
33
33
 
34
34
  &:hover {
35
- background-color: darken(white, 5%);
35
+ background-color: scale-color(white, $lightness: -5%);
36
36
  }
37
37
  }
38
38
 
@@ -40,3 +40,7 @@
40
40
  border: none;
41
41
  }
42
42
  }
43
+
44
+ .btn, .button {
45
+ @include button;
46
+ }
@@ -6,14 +6,24 @@ form .input, form input[type=submit] {
6
6
  display: none;
7
7
  }
8
8
 
9
- input, select {
9
+ input, select, textarea {
10
10
  padding: 0.5em;
11
11
  color: $text_on_primary_color;
12
12
  width: 100%;
13
+ font-family: $font;
14
+ font-size: 0.8rem;
15
+ border: 1px solid $border_color;
16
+ border-radius: 2px;
17
+ color: $font_color;
13
18
 
14
19
  @media screen and (min-width: $media_breakpoint) {
15
20
  width: 500px;
16
21
  }
22
+
23
+ @media (prefers-color-scheme: dark) {
24
+ background-color: scale-color($background_color_dark, $lightness: 3%);
25
+ color: $font_color_dark;
26
+ }
17
27
  }
18
28
 
19
29
  label:not(.checkbox) {
@@ -74,9 +84,14 @@ form {
74
84
  }
75
85
 
76
86
  span.error {
77
- background-color: $warning_color;
78
- margin-left: 0.5em;
87
+ display: block;
88
+ background-color: $error_color;
79
89
  padding: 0.3em;
90
+
91
+ @media screen and (min-width: $media_breakpoint) {
92
+ display: inline;
93
+ margin-left: 0.5em;
94
+ }
80
95
  }
81
96
 
82
97
  p.info {
@@ -14,29 +14,81 @@ summary {
14
14
  }
15
15
 
16
16
  .pagy-nav {
17
- margin-top: $default_distance;
17
+ display: flex;
18
18
 
19
- span {
20
- display: inline-block;
21
- background-color: $primary_color;
22
- border: 1px solid $primary_color;
19
+ .page {
20
+ margin-right: 0.25rem;
21
+ position: relative;
22
+
23
+ background-color: $background_color;
24
+ border: 2px solid transparent;
23
25
 
24
26
  a {
25
- display: inline-block;
26
- padding: 1rem;
27
27
  color: $text_on_primary_color;
28
28
  text-decoration: none;
29
- }
30
-
31
- &.disabled {
32
29
  padding: 1rem;
33
- background-color: #DDD;
30
+ display: block;
34
31
  }
35
32
 
36
33
  &.active {
37
- padding: 1rem;
38
- background-color: transparent;
39
- border: 1px solid $text_on_primary_color;
34
+ border: 2px solid $primary_color;
35
+ }
36
+
37
+ &.finish {
38
+ @include button;
39
+ padding: 0;
40
40
  }
41
+
42
+ .indicator.badge {
43
+ background-color: white;
44
+ width: 0.3rem;
45
+ height: 0.3rem;
46
+ border-radius: 0.15rem;
47
+ position: absolute;
48
+ top: 0.25rem;
49
+ right: 0.25rem;
50
+
51
+ &.bad {
52
+ background-color: $error_color;
53
+ }
54
+
55
+ &.medium {
56
+ background-color: $warning_color;
57
+ }
58
+
59
+ &.good {
60
+ background-color: $success_color;
61
+ }
62
+ }
63
+ }
64
+ }
65
+
66
+ section.card {
67
+ border: 1px solid $border_color;
68
+ padding: 1rem;
69
+ border-radius: 0.3rem;
70
+
71
+ &[data-status=pending], &[data-status=warn], &[data-status=medium] {
72
+ border-left: 5px solid $warning_color;
73
+ }
74
+
75
+ &[data-status=error], &[data-status=bad] {
76
+ border-left: 5px solid $error_color;
77
+ }
78
+
79
+ &[data-status=saved], &[data-status=good] {
80
+ border-left: 5px solid $success_color;
81
+ }
82
+ }
83
+
84
+ .breadcrumbs {
85
+ width: 100%;
86
+ border: 2px solid $border_color;
87
+ padding: 1rem;
88
+
89
+ .separator {
90
+ color: $border_color;
91
+ font-size: 0.7rem;
92
+ margin: 0 0.5rem;
41
93
  }
42
94
  }
@@ -1,16 +1,21 @@
1
1
  $media_breakpoint: 75rem !default;
2
- $primary_color: red !default;
3
- $text_on_primary_color: blue !default;
4
- $secondary_color: pink !default;
2
+ $primary_color: #A0E7E5 !default;
3
+ $text_on_primary_color: black !default;
4
+ $secondary_color: #FFAEBC !default;
5
5
  $text_on_secondary_color: black !default;
6
- $border_color: green !default;
6
+ $border_color: #8f8f9d !default;
7
7
  $default_distance: 1rem !default;
8
- $background_color: white !default;
8
+ $background_color: #FDFDFD !default;
9
+ $background_color_dark: #212121 !default;
9
10
  $font: 'sans-serif' !default;
11
+ $font_color: #333 !default;
12
+ $font_color_dark: #EFEFEF !default;
10
13
 
11
- $warning_color: lighten(red, 40%);
14
+ $error_color: scale-color(red, $lightness: 50%);
15
+ $warning_color: scale-color(orange, $lightness: 50%);
16
+ $success_color: scale-color(green, $lightness: 20%);
12
17
 
13
- $primary_color_light: lighten($primary_color, 10%);
18
+ $primary_color_light: scale-color($primary_color, $lightness: 0%);
14
19
 
15
20
  @import 'styleguide/01_reset';
16
21
  @import 'styleguide/02_layout';
data/views/card.erb ADDED
@@ -0,0 +1,6 @@
1
+ <section class="card" data-status="<%= status || 'good' %>">
2
+ <h2><%= title || 'Card title' %></h2>
3
+ <section class="card-body">
4
+ <%= content || 'Card content' %>
5
+ </section>
6
+ </section>
data/views/index.erb ADDED
@@ -0,0 +1,118 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Codefabrik Styleguide</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
+ <body>
10
+ <header>
11
+ <h1>Codefabrik Styleguide</h1>
12
+ </header>
13
+
14
+ <main>
15
+ <div class="breadcrumbs mb-1">
16
+ <a href="javascript:void(0)">Prüfungen</a><span class="separator">&#9654;</span>
17
+ <a href="javascript:void(0)">Englisch L2</a><span class="separator">&#9654;</span>
18
+ <a href="javascript:void(0)">Fragenübersicht</a><span class="separator">&#9654;</span>
19
+ Bewertung
20
+ </div>
21
+
22
+ <div class="grid grid-d-2">
23
+ <%= erb :card, locals: {
24
+ title: 'Success card',
25
+ content: "<pre><code>#{CGI::escapeHTML erb(:card, locals: { title: 'Title', content: 'Content', status: 'medium' })}</code></pre>",
26
+ status: 'good' } %>
27
+ <%= erb :card, locals: { title: 'Medium card', content: 'Bla', status: 'medium' } %>
28
+ <%= erb :card, locals: { title: 'Bad card', content: 'Bla', status: 'bad' } %>
29
+ <%= erb :card, locals: { title: 'Neutral card', content: 'Bla', status: '' } %>
30
+ </div>
31
+
32
+
33
+ <form>
34
+ <div class="input string required">
35
+ <label class="string required" for="input1">String input</label>
36
+ <input
37
+ id="input1"
38
+ class="string required"
39
+ type="text"
40
+ placeholder="Placeholder"
41
+ />
42
+ </div>
43
+ <div class="input numeric required">
44
+ <label class="numeric required" for="input2">Number input</label>
45
+ <input id="input2" class="numeric required" type="number" />
46
+ <span class="error">Error message</span>
47
+ </div>
48
+ <div class="input select required">
49
+ <label class="select required" for="input3">Select input</label>
50
+ <select id="input3" class="select required">
51
+ <option>Test1</option>
52
+ <option>Test2</option>
53
+ <option>Test3</option>
54
+ </select>
55
+ </div>
56
+ <div class="input string required">
57
+ <label class="string required" for="input4">Textarea</label>
58
+ <textarea id="input4" class="string required" type="text">Default value</textarea>
59
+ </div>
60
+ <input type="submit" value="Save" class="btn" />
61
+ </form>
62
+
63
+ <h1>Heading 1</h1>
64
+ <p>Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis, Nam aliquando elitr Etiam consetetur. Fringilla lucilius mel adipiscing rebum. Sit nulla Integer ad volumus, dicta scriptorem viderer lobortis est Utinam, enim commune corrumpit Aenean erat tellus. Metus sed amet dolore justo, gubergren sed. </p>
65
+ <h2>Heading 2</h2>
66
+ <p>Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis, Nam aliquando elitr Etiam consetetur. Fringilla lucilius mel adipiscing rebum. Sit nulla Integer ad volumus, dicta scriptorem viderer lobortis est Utinam, enim commune corrumpit Aenean erat tellus. Metus sed amet dolore justo, gubergren sed. </p>
67
+ <h3>Heading 3</h3>
68
+ <p>Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis, Nam aliquando elitr Etiam consetetur. Fringilla lucilius mel adipiscing rebum. Sit nulla Integer ad volumus, dicta scriptorem viderer lobortis est Utinam, enim commune corrumpit Aenean erat tellus. Metus sed amet dolore justo, gubergren sed. </p>
69
+ <h4>Heading 4</h4>
70
+ <p>Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis, Nam aliquando elitr Etiam consetetur. Fringilla lucilius mel adipiscing rebum. Sit nulla Integer ad volumus, dicta scriptorem viderer lobortis est Utinam, enim commune corrumpit Aenean erat tellus. Metus sed amet dolore justo, gubergren sed. </p>
71
+ <h5>Heading 5</h5>
72
+ <p>Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis, Nam aliquando elitr Etiam consetetur. Fringilla lucilius mel adipiscing rebum. Sit nulla Integer ad volumus, dicta scriptorem viderer lobortis est Utinam, enim commune corrumpit Aenean erat tellus. Metus sed amet dolore justo, gubergren sed. </p>
73
+ <h6>Heading 6</h6>
74
+ <p>Lorem ipsum sapientem ne neque dolor erat,eros solet invidunt duo Quisque aliquid leo. Pretium patrioque sociis eu nihil Cum enim ad, ipsum alii vidisse justo id. Option porttitor diam voluptua. Cu Eam augue dolor dolores quis, Nam aliquando elitr Etiam consetetur. Fringilla lucilius mel adipiscing rebum. Sit nulla Integer ad volumus, dicta scriptorem viderer lobortis est Utinam, enim commune corrumpit Aenean erat tellus. Metus sed amet dolore justo, gubergren sed. </p>
75
+
76
+ <p>You can reach Michael at his website: <a href="https://example.com">Website</a>.</p>
77
+
78
+
79
+ <p>Apollo astronauts:</p>
80
+
81
+ <ul>
82
+ <li>Neil Armstrong</li>
83
+ <li>Alan Bean</li>
84
+ <li>Peter Conrad</li>
85
+ <li>Edgar Mitchell</li>
86
+ <li>Alan Shepard</li>
87
+ </ul>
88
+ </main>
89
+
90
+ <footer class="mt-3">
91
+ <div class="pagy-nav">
92
+ <div class="page ">
93
+ <a href="javascript:void(0)">1</a>
94
+ <div class="indicator badge good"></div>
95
+ </div>
96
+ <div class="page">
97
+ <a href="javascript:void(0)">2</a>
98
+ <div class="indicator badge good"></div>
99
+ </div>
100
+ <div class="page active">
101
+ <a href="javascript:void(0)">4</a>
102
+ <div class="indicator badge medium"></div>
103
+ </div>
104
+ <div class="page">
105
+ <a href="javascript:void(0)">5</a>
106
+ <div class="indicator badge bad"></div>
107
+ </div>
108
+ <div class="page">
109
+ <a href="javascript:void(0)">6</a>
110
+ <div class="indicator badge bad"></div>
111
+ </div>
112
+ <div class="page finish">
113
+ <a href="javascript:void(0)">Abschluss</a>
114
+ </div>
115
+ </div>
116
+ </footer>
117
+ </body>
118
+ </html>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: codefabrik-styleguide
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.4
4
+ version: 0.1.6
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lukas_Skywalker
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2023-10-03 00:00:00.000000000 Z
11
+ date: 2023-11-12 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: dartsass-rails
@@ -38,6 +38,34 @@ dependencies:
38
38
  - - ">="
39
39
  - !ruby/object:Gem::Version
40
40
  version: '6.0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: sassc
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - ">="
46
+ - !ruby/object:Gem::Version
47
+ version: 2.4.0
48
+ type: :runtime
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ">="
53
+ - !ruby/object:Gem::Version
54
+ version: 2.4.0
55
+ - !ruby/object:Gem::Dependency
56
+ name: sinatra
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - ">="
60
+ - !ruby/object:Gem::Version
61
+ version: 3.1.0
62
+ type: :runtime
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - ">="
67
+ - !ruby/object:Gem::Version
68
+ version: 3.1.0
41
69
  description: Provides Rails applications with standard styles, including a responsive
42
70
  grid.
43
71
  email:
@@ -47,12 +75,13 @@ extensions: []
47
75
  extra_rdoc_files: []
48
76
  files:
49
77
  - ".rspec"
50
- - ".standard.yml"
51
78
  - Gemfile
52
79
  - Gemfile.lock
53
80
  - LICENSE.txt
54
81
  - README.md
55
82
  - Rakefile
83
+ - app.rb
84
+ - dist/.gitkeep
56
85
  - lib/codefabrik/styleguide.rb
57
86
  - lib/codefabrik/styleguide/version.rb
58
87
  - sig/codefabrik/styleguide.rbs
@@ -65,6 +94,8 @@ files:
65
94
  - vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss
66
95
  - vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss
67
96
  - vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss
97
+ - views/card.erb
98
+ - views/index.erb
68
99
  homepage: https://code-fabrik.ch
69
100
  licenses:
70
101
  - MIT
data/.standard.yml DELETED
@@ -1,7 +0,0 @@
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