codefabrik-styleguide 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef08d6667ef9556d0be71b5e3476aab8270c3366386a7f96e46004808441b026
-  data.tar.gz: 44d2aa3773c9e5b059fa757ed6fbbc803c4da957573cb81bf10e1b537e7fb745
+  metadata.gz: c48356f096ab8c77ab08f7a0dff5adb9c08c6030a91a96fb453777801e169b30
+  data.tar.gz: f13ac323d084d21effd2950f733b5367b22830f23145b2b60a473389933ebd09
 SHA512:
-  metadata.gz: 89de3b1ff8fe3297cff783d6984d34345245a79d76381cfd021ef36d8530fc8e07b023597ae4c62a54b75dd5dded07e364b40a5d022a13f1ee7f1b313d44e7c9
-  data.tar.gz: 78c9c4fd5a6665608af28a128700bc84df023704802690fd694858c8d47b44c69db72ae5b873f75fe8d19099918ce565752568f4cfdcc11a688762a02cec021a
+  metadata.gz: 8a2b27e3235525a615734aafd0e052f8207e1e14eae130cec2943340635378b16a137c1f85af931c73bc147767f83b939e48a3234db1523fbbe0a0f34b36b4f9
+  data.tar.gz: cda3bfefa5ee369994601242651753accbca77710ad6805b74923e5071d935da3c95b4c5985eaf6d8bf741903478ae0e4d38963da3791131e99c13c287d3dd37

data/Gemfile

@@ -8,5 +8,3 @@ gemspec
 gem "rake", "~> 13.0"
 
 gem "rspec", "~> 3.0"
-
-gem "standard", "~> 1.3"

data/Gemfile.lock

@@ -1,9 +1,11 @@
 PATH
   remote: .
   specs:
-    codefabrik-styleguide (0.1.4)
+    codefabrik-styleguide (0.1.6)
       dartsass-rails (>= 0.4.0)
       rails (>= 6.0)
+      sassc (>= 2.4.0)
+      sinatra (>= 3.1.0)
 
 GEM
   remote: https://rubygems.org/
@@ -73,7 +75,6 @@ GEM
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
-    ast (2.4.2)
     builder (3.2.4)
     concurrent-ruby (1.2.2)
     crass (1.0.6)
@@ -83,14 +84,12 @@ GEM
     date (3.3.3)
     diff-lcs (1.5.0)
     erubi (1.12.0)
+    ffi (1.16.3)
     globalid (1.1.0)
       activesupport (>= 5.0)
     google-protobuf (3.23.4-x86_64-linux)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
-    json (2.6.3)
-    language_server-protocol (3.17.0.3)
-    lint_roller (1.1.0)
     loofah (2.21.3)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -103,6 +102,8 @@ GEM
     method_source (1.0.0)
     mini_mime (1.1.2)
     minitest (5.19.0)
+    mustermann (3.0.0)
+      ruby2_keywords (~> 0.0.1)
     net-imap (0.3.7)
       date
       net-protocol
@@ -115,12 +116,10 @@ GEM
     nio4r (2.5.9)
     nokogiri (1.15.3-x86_64-linux)
       racc (~> 1.4)
-    parallel (1.23.0)
-    parser (3.2.2.3)
-      ast (~> 2.4.1)
-      racc
     racc (1.7.1)
     rack (2.2.8)
+    rack-protection (3.1.0)
+      rack (~> 2.2, >= 2.2.4)
     rack-test (2.1.0)
       rack (>= 1.3)
     rails (7.0.6)
@@ -151,10 +150,7 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0)
       zeitwerk (~> 2.5)
-    rainbow (3.1.1)
     rake (13.0.6)
-    regexp_parser (2.8.1)
-    rexml (3.2.6)
     rspec (3.12.0)
       rspec-core (~> 3.12.0)
       rspec-expectations (~> 3.12.0)
@@ -168,41 +164,21 @@ GEM
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
     rspec-support (3.12.1)
-    rubocop (1.52.1)
-      json (~> 2.3)
-      parallel (~> 1.10)
-      parser (>= 3.2.2.3)
-      rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 1.8, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.28.0, < 2.0)
-      ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.29.0)
-      parser (>= 3.2.1.0)
-    rubocop-performance (1.18.0)
-      rubocop (>= 1.7.0, < 2.0)
-      rubocop-ast (>= 0.4.0)
-    ruby-progressbar (1.13.0)
+    ruby2_keywords (0.0.5)
     sass-embedded (1.64.2-x86_64-linux-gnu)
       google-protobuf (~> 3.23)
-    standard (1.30.1)
-      language_server-protocol (~> 3.17.0.2)
-      lint_roller (~> 1.0)
-      rubocop (~> 1.52.0)
-      standard-custom (~> 1.0.0)
-      standard-performance (~> 1.1.0)
-    standard-custom (1.0.2)
-      lint_roller (~> 1.0)
-      rubocop (~> 1.50)
-    standard-performance (1.1.2)
-      lint_roller (~> 1.1)
-      rubocop-performance (~> 1.18.0)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sinatra (3.1.0)
+      mustermann (~> 3.0)
+      rack (~> 2.2, >= 2.2.4)
+      rack-protection (= 3.1.0)
+      tilt (~> 2.0)
     thor (1.2.2)
+    tilt (2.3.0)
     timeout (0.4.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.4.2)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -215,7 +191,6 @@ DEPENDENCIES
   codefabrik-styleguide!
   rake (~> 13.0)
   rspec (~> 3.0)
-  standard (~> 1.3)
 
 BUNDLED WITH
    2.4.10

data/README.md

@@ -30,15 +30,18 @@ above.
 The possible overrides are the following:
 
 ```scss
-$media_breakpoint: 40em;
-$primary_color: red;
-$text_on_primary_color: blue;
-$secondary_color: pink;
-$text_on_secondary_color: black;
-$border_color: green;
-$default_distance: 1rem;
-$background_color: white;
-$font: 'sans-serif';
+$media_breakpoint: 75rem !default;
+$primary_color: #A0E7E5 !default;
+$text_on_primary_color: black !default;
+$secondary_color: #FFAEBC !default;
+$text_on_secondary_color: black !default;
+$border_color: #8f8f9d !default;
+$default_distance: 1rem !default;
+$background_color: #FDFDFD !default;
+$background_color_dark: #212121 !default;
+$font: 'sans-serif' !default;
+$font_color: #333 !default;
+$font_color_dark: #EFEFEF !default;
 ```
 
 ## Architecture
@@ -80,6 +83,9 @@ and `bottom`.
 
 ## Development
 
+Run `ruby app.rb` and open [http://localhost:4567](http://localhost:4567) for a
+live preview of the styles in your browser.
+
 After checking out the repo, run `bin/setup` to install dependencies. Then, run
 `rake spec` to run the tests. You can also run `bin/console` for an interactive
 prompt that will allow you to experiment.

data/Rakefile

@@ -5,6 +5,40 @@ require "rspec/core/rake_task"
 
 RSpec::Core::RakeTask.new(:spec)
 
-require "standard/rake"
+require 'sinatra'
+require 'sassc'
 
-task default: %i[spec standard]
+module ErbRender
+  include Sinatra::Templates
+  include Sinatra::Helpers
+
+  def settings
+    @settings ||= begin
+      settings = Sinatra::Application.settings
+      settings.root = "./"
+      settings
+    end
+  end
+
+  def template_cache
+    @template_cache ||= Tilt::Cache.new
+  end
+end
+
+class Builder
+  include ErbRender
+
+  def get_body
+    erb :index
+  end
+end
+
+task :generate_html do
+  require 'sinatra'
+  html_output = Builder.new.get_body
+  File.write('dist/index.html', html_output)
+
+  scss = File.read('vendor/assets/stylesheets/codefabrik/styleguide.scss')
+  css_output = SassC::Engine.new(scss, filename: 'vendor/assets/stylesheets/codefabrik/styleguide.scss', style: :compressed).render
+  File.write('dist/style.css', css_output)
+end

data/app.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require 'sinatra'
+require 'sassc'
+
+get '/' do
+  erb :index
+end
+
+get '/style.css' do
+  data = File.read('vendor/assets/stylesheets/codefabrik/styleguide.scss')
+  content_type 'text/css'
+  return SassC::Engine.new(data,
+                           filename: 'vendor/assets/stylesheets/codefabrik/styleguide.scss',
+                           style: :compressed).render
+end

data/lib/codefabrik/styleguide/version.rb

@@ -2,6 +2,6 @@
 
 module Codefabrik
   module Styleguide
-    VERSION = "0.1.4"
+    VERSION = "0.1.6"
   end
 end

data/vendor/assets/stylesheets/codefabrik/styleguide/02_layout.scss

@@ -1,4 +1,12 @@
-header {
+body {
+  background-color: $background_color;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: $background_color_dark;
+  }
+}
+
+header, footer {
   width: 100%;
   background-color: $primary_color_light;
   color: $text_on_primary_color;
@@ -35,7 +43,7 @@ header {
   }
 }
 
-.wrapper {
+main {
   width: calc(100% - 2 * $default_distance);
   margin: 0 $default_distance;
   margin-top: $default_distance;
@@ -44,12 +52,13 @@ header {
   @media screen and (min-width: $media_breakpoint) {
     width: $media_breakpoint;
     margin: 0 auto;
+    margin-top: $default_distance;
   }
 }
 
 // Side by side layout
 @media screen and (min-width: $media_breakpoint) {
-  body {
+  body.side-by-side {
     display: flex;
 
     .sidebar {
@@ -72,7 +81,7 @@ header {
       }
     }
 
-    .wrapper {
+    main {
       flex: 1;
       margin: 2vh;
     }

data/vendor/assets/stylesheets/codefabrik/styleguide/04_typo.scss

@@ -1,5 +1,10 @@
 body {
   font-family: $font;
+  color: $font_color;
+
+  @media (prefers-color-scheme: dark) {
+    color: $font_color_dark;
+  }
 }
 
 p {
@@ -7,12 +12,20 @@ p {
   line-height: 1.6;
   text-rendering: optimizeLegibility;
   font-size: 1 * $default_distance;
+  text-wrap: balance;
+  hyphens: auto;
+}
+
+li {
+  line-height: 1.4;
 }
 
 a {
   line-height: inherit;
   color: $primary_color;
   font-size: 1 * $default_distance;
+  text-underline-offset: $default_distance * 0.15;
+  text-decoration-thickness: $default_distance * 0.08;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -23,34 +36,34 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  font-size: 1.5 * $default_distance;
+  font-size: 1.3 * $default_distance;
 
   @media print, screen and (min-width: $media_breakpoint) {
-    font-size: 3 * $default_distance;
+    font-size: 2 * $default_distance;
   }
 }
 
 h2 {
-  font-size: 1.25 * $default_distance;
+  font-size: 1.2 * $default_distance;
 
   @media print, screen and (min-width: $media_breakpoint) {
-    font-size: 2.5 * $default_distance;
+    font-size: 1.8 * $default_distance;
   }
 }
 
 h3 {
-  font-size: 1.2 * $default_distance;
+  font-size: 1.1 * $default_distance;
 
   @media print, screen and (min-width: $media_breakpoint) {
-    font-size: 2 * $default_distance;
+    font-size: 1.6 * $default_distance;
   }
 }
 
 h4 {
-  font-size: 1.1 * $default_distance;
+  font-size: $default_distance;
 
   @media print, screen and (min-width: $media_breakpoint) {
-    font-size: 1.5 * $default_distance;
+    font-size: 1.4 * $default_distance;
   }
 }
 
@@ -58,7 +71,7 @@ h5 {
   font-size: $default_distance;
 
   @media print, screen and (min-width: $media_breakpoint) {
-    font-size: 1.25 * $default_distance;
+    font-size: 1.2 * $default_distance;
   }
 }
 

data/vendor/assets/stylesheets/codefabrik/styleguide/05_buttons.scss

@@ -1,4 +1,4 @@
-.btn, .button {
+@mixin button {
   display: inline-block;
   text-decoration: none;
   border: none;
@@ -9,11 +9,11 @@
   font-size: 0.8 * $default_distance;
 
   &:hover {
-    background-color: darken($primary_color, 15%);
+    background-color: scale-color($primary_color, $lightness: -15%);
   }
 
   &:active {
-    background-color: darken($primary_color, 30%);
+    background-color: scale-color($primary_color, $lightness: -30%);
   }
 
   &.small {
@@ -32,7 +32,7 @@
     color: $primary_color;
 
     &:hover {
-      background-color: darken(white, 5%);
+      background-color: scale-color(white, $lightness: -5%);
     }
   }
 
@@ -40,3 +40,7 @@
     border: none;
   }
 }
+
+.btn, .button {
+  @include button;
+}

data/vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss

@@ -6,14 +6,24 @@ form .input, form input[type=submit] {
     display: none;
   }
 
-  input, select {
+  input, select, textarea {
     padding: 0.5em;
     color: $text_on_primary_color;
     width: 100%;
+    font-family: $font;
+    font-size: 0.8rem;
+    border: 1px solid $border_color;
+    border-radius: 2px;
+    color: $font_color;
 
     @media screen and (min-width: $media_breakpoint) {
       width: 500px;
     }
+
+    @media (prefers-color-scheme: dark) {
+      background-color: scale-color($background_color_dark, $lightness: 3%);
+      color: $font_color_dark;
+    }
   }
 
   label:not(.checkbox) {
@@ -74,9 +84,14 @@ form {
   }
 
   span.error {
-    background-color: $warning_color;
-    margin-left: 0.5em;
+    display: block;
+    background-color: $error_color;
     padding: 0.3em;
+
+    @media screen and (min-width: $media_breakpoint) {
+      display: inline;
+      margin-left: 0.5em;
+    }
   }
 
   p.info {

data/vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss

@@ -14,29 +14,81 @@ summary {
 }
 
 .pagy-nav {
-  margin-top: $default_distance;
+  display: flex;
 
-  span {
-    display: inline-block;
-    background-color: $primary_color;
-    border: 1px solid $primary_color;
+  .page {
+    margin-right: 0.25rem;
+    position: relative;
+
+    background-color: $background_color;
+    border: 2px solid transparent;
 
     a {
-      display: inline-block;
-      padding: 1rem;
       color: $text_on_primary_color;
       text-decoration: none;
-    }
-
-    &.disabled {
       padding: 1rem;
-      background-color: #DDD;
+      display: block;
     }
 
     &.active {
-      padding: 1rem;
-      background-color: transparent;
-      border: 1px solid $text_on_primary_color;
+      border: 2px solid $primary_color;
+    }
+
+    &.finish {
+      @include button;
+      padding: 0;
     }
+
+    .indicator.badge {
+      background-color: white;
+      width: 0.3rem;
+      height: 0.3rem;
+      border-radius: 0.15rem;
+      position: absolute;
+      top: 0.25rem;
+      right: 0.25rem;
+
+      &.bad {
+        background-color: $error_color;
+      }
+
+      &.medium {
+        background-color: $warning_color;
+      }
+
+      &.good {
+        background-color: $success_color;
+      }
+    }
+  }
+}
+
+section.card {
+  border: 1px solid $border_color;
+  padding: 1rem;
+  border-radius: 0.3rem;
+
+  &[data-status=pending], &[data-status=warn], &[data-status=medium] {
+    border-left: 5px solid $warning_color;
+  }
+
+  &[data-status=error], &[data-status=bad] {
+    border-left: 5px solid $error_color;
+  }
+
+  &[data-status=saved], &[data-status=good] {
+    border-left: 5px solid $success_color;
+  }
+}
+
+.breadcrumbs {
+  width: 100%;
+  border: 2px solid $border_color;
+  padding: 1rem;
+
+  .separator {
+    color: $border_color;
+    font-size: 0.7rem;
+    margin: 0 0.5rem;
   }
 }

data/vendor/assets/stylesheets/codefabrik/styleguide.scss

@@ -1,16 +1,21 @@
 $media_breakpoint: 75rem !default;
-$primary_color: red !default;
-$text_on_primary_color: blue !default;
-$secondary_color: pink !default;
+$primary_color: #A0E7E5 !default;
+$text_on_primary_color: black !default;
+$secondary_color: #FFAEBC !default;
 $text_on_secondary_color: black !default;
-$border_color: green !default;
+$border_color: #8f8f9d !default;
 $default_distance: 1rem !default;
-$background_color: white !default;
+$background_color: #FDFDFD !default;
+$background_color_dark: #212121 !default;
 $font: 'sans-serif' !default;
+$font_color: #333 !default;
+$font_color_dark: #EFEFEF !default;
 
-$warning_color: lighten(red, 40%);
+$error_color: scale-color(red, $lightness: 50%);
+$warning_color: scale-color(orange, $lightness: 50%);
+$success_color: scale-color(green, $lightness: 20%);
 
-$primary_color_light: lighten($primary_color, 10%);
+$primary_color_light: scale-color($primary_color, $lightness: 0%);
 
 @import 'styleguide/01_reset';
 @import 'styleguide/02_layout';

data/views/card.erb

@@ -0,0 +1,6 @@
+<section class="card" data-status="<%= status || 'good' %>">
+  <h2><%= title || 'Card title' %></h2>
+  <section class="card-body">
+    <%= content || 'Card content' %>
+  </section>
+</section>

data/views/index.erb

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Codefabrik Styleguide</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Codefabrik Styleguide</h1>
+    </header>
+
+    <main>
+      <div class="breadcrumbs mb-1">
+        <a href="javascript:void(0)">Prüfungen</a><span class="separator">&#9654;</span>
+        <a href="javascript:void(0)">Englisch L2</a><span class="separator">&#9654;</span>
+        <a href="javascript:void(0)">Fragenübersicht</a><span class="separator">&#9654;</span>
+        Bewertung
+      </div>
+
+      <div class="grid grid-d-2">
+        <%= erb :card, locals: {
+          title: 'Success card',
+          content: "<pre><code>#{CGI::escapeHTML erb(:card, locals: { title: 'Title', content: 'Content', status: 'medium' })}</code></pre>",
+          status: 'good' } %>
+        <%= erb :card, locals: { title: 'Medium card', content: 'Bla', status: 'medium' } %>
+        <%= erb :card, locals: { title: 'Bad card', content: 'Bla', status: 'bad' } %>
+        <%= erb :card, locals: { title: 'Neutral card', content: 'Bla', status: '' } %>
+      </div>
+
+
+      <form>
+        <div class="input string required">
+          <label class="string required" for="input1">String input</label>
+          <input
+            id="input1"
+            class="string required"
+            type="text"
+            placeholder="Placeholder"
+          />
+        </div>
+        <div class="input numeric required">
+          <label class="numeric required" for="input2">Number input</label>
+          <input id="input2" class="numeric required" type="number" />
+          <span class="error">Error message</span>
+        </div>
+        <div class="input select required">
+          <label class="select required" for="input3">Select input</label>
+          <select id="input3" class="select required">
+            <option>Test1</option>
+            <option>Test2</option>
+            <option>Test3</option>
+          </select>
+        </div>
+        <div class="input string required">
+          <label class="string required" for="input4">Textarea</label>
+          <textarea id="input4" class="string required" type="text">Default value</textarea>
+        </div>
+        <input type="submit" value="Save" class="btn" />
+      </form>
+
+      <h1>Heading 1</h1>
+      <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>
+      <h2>Heading 2</h2>
+      <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>
+      <h3>Heading 3</h3>
+      <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>
+      <h4>Heading 4</h4>
+      <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>
+      <h5>Heading 5</h5>
+      <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>
+      <h6>Heading 6</h6>
+      <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>
+
+      <p>You can reach Michael at his website: <a href="https://example.com">Website</a>.</p>
+
+
+      <p>Apollo astronauts:</p>
+
+      <ul>
+        <li>Neil Armstrong</li>
+        <li>Alan Bean</li>
+        <li>Peter Conrad</li>
+        <li>Edgar Mitchell</li>
+        <li>Alan Shepard</li>
+      </ul>
+    </main>
+
+    <footer class="mt-3">
+      <div class="pagy-nav">
+        <div class="page ">
+          <a href="javascript:void(0)">1</a>
+          <div class="indicator badge good"></div>
+        </div>
+        <div class="page">
+          <a href="javascript:void(0)">2</a>
+          <div class="indicator badge good"></div>
+        </div>
+        <div class="page active">
+          <a href="javascript:void(0)">4</a>
+          <div class="indicator badge medium"></div>
+        </div>
+        <div class="page">
+          <a href="javascript:void(0)">5</a>
+          <div class="indicator badge bad"></div>
+        </div>
+        <div class="page">
+          <a href="javascript:void(0)">6</a>
+          <div class="indicator badge bad"></div>
+        </div>
+        <div class="page finish">
+          <a href="javascript:void(0)">Abschluss</a>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: codefabrik-styleguide
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.6
 platform: ruby
 authors:
 - Lukas_Skywalker
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-10-03 00:00:00.000000000 Z
+date: 2023-11-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: dartsass-rails
@@ -38,6 +38,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '6.0'
+- !ruby/object:Gem::Dependency
+  name: sassc
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.4.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.4.0
+- !ruby/object:Gem::Dependency
+  name: sinatra
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.1.0
 description: Provides Rails applications with standard styles, including a responsive
   grid.
 email:
@@ -47,12 +75,13 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".rspec"
-- ".standard.yml"
 - Gemfile
 - Gemfile.lock
 - LICENSE.txt
 - README.md
 - Rakefile
+- app.rb
+- dist/.gitkeep
 - lib/codefabrik/styleguide.rb
 - lib/codefabrik/styleguide/version.rb
 - sig/codefabrik/styleguide.rbs
@@ -65,6 +94,8 @@ files:
 - vendor/assets/stylesheets/codefabrik/styleguide/06_tables.scss
 - vendor/assets/stylesheets/codefabrik/styleguide/07_forms.scss
 - vendor/assets/stylesheets/codefabrik/styleguide/08_components.scss
+- views/card.erb
+- views/index.erb
 homepage: https://code-fabrik.ch
 licenses:
 - MIT

data/.standard.yml

@@ -1,7 +0,0 @@
-# For available configuration options, see:
-#   https://github.com/testdouble/standard
-ruby_version: 2.6
-
-ignore:
-  - 'codefabrik-styleguide.gemspec':
-    - Style/StringLiterals