codefabrik-styleguide 0.1.3 → 0.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b4a38bd9a57198bfcb7666e6ac457fea5281354ff0a12413fd0aec3c6dc11ca8
-  data.tar.gz: 4616a98f1b703427ebfa884012a0a2d76d6ff08943a6b1765d8e1e4b528b34cf
+  metadata.gz: dcdb54ed08fcade851e3650f15ca42bc000550dfdd43159955e3a0c082a17194
+  data.tar.gz: 4b2205505b19317fbf5c0b6e2e604d826ee043be1a0941b6ee74e22f61ebb994
 SHA512:
-  metadata.gz: e18036508519f26901be6c131a7b3a2d2e6ef03582f60e90257f38ac8526d370553e011fba213476e16b41870e3f2ef257b525b063630ea8dab43a16a56a630c
-  data.tar.gz: a1e410246186b0530c1887c296dcd80e891daf02da88d2d14995dfa643f3613f5537e7dc0be04f26be2fca45351e3408ac8fb7f406c7accbfb0dbdda8e4219fc
+  metadata.gz: c98b8e3029bb78378d5dab9c6715e1720ed08fdf8b4ee13a48437460c4d36574c04040e039bcfdb4a997fa1a71316717397380148a7d213a9efa3206adf19593
+  data.tar.gz: 7e6dc3e6e9cad8c49e6f929ce65ac8922ba963610ddfd41a96a5e14d42416dab503723824307807d59195060ac93b97f1fabc30134bd96974bb2e7f7c03f6e35

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.3)
+    codefabrik-styleguide (0.1.5)
       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.3"
+    VERSION = "0.1.5"
   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;
   }
 }
 
@@ -95,3 +108,7 @@ blockquote {
   background-color: $primary_color;
   color: $text_on_primary_color;
 }
+
+ul {
+  margin-left: 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

@@ -3,17 +3,27 @@ form .input, form input[type=submit] {
   margin-bottom: $default_distance;
 
   &.hidden {
-    margin: 0;
+    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) {
@@ -57,6 +67,7 @@ form {
   .nested-fields {
     border: 1px solid $primary_color;
     padding: 0.5 * $default_distance;
+    padding-bottom: 0;
     margin-bottom: 0.5 * $default_distance;
 
     .input:first-child {
@@ -73,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 {
@@ -85,6 +101,10 @@ form {
       content: '\1f6c8';
     }
   }
+
+  input[type=submit] {
+    margin-top: 0;
+  }
 }
 
 p + .btn, p + form.button_to, form + form.button_to {

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

@@ -0,0 +1,82 @@
+.progress {
+  width: 100%;
+  border: 1px solid $primary_color;
+}
+
+.progress__inner {
+  background-color: $primary_color;
+  padding: 0.2em;
+}
+
+summary {
+  cursor: pointer;
+  margin-bottom: 0.5em;
+}
+
+.pagy-nav {
+  display: flex;
+
+  .page {
+    margin-right: 0.25rem;
+    position: relative;
+
+    background-color: $background_color;
+    border: 2px solid transparent;
+
+    a {
+      color: $text_on_primary_color;
+      text-decoration: none;
+      padding: 1rem;
+      display: block;
+    }
+
+    &.active {
+      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;
+  }
+}

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';
@@ -19,3 +24,4 @@ $primary_color_light: lighten($primary_color, 10%);
 @import 'styleguide/05_buttons';
 @import 'styleguide/06_tables';
 @import 'styleguide/07_forms';
+@import 'styleguide/08_components';

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,111 @@
+<!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="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.3
+  version: 0.1.5
 platform: ruby
 authors:
 - Lukas_Skywalker
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2023-09-28 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
@@ -64,6 +93,9 @@ files:
 - vendor/assets/stylesheets/codefabrik/styleguide/05_buttons.scss
 - 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