baseline-scss 0.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 9755d89b7b2d330d040774fd5989a2238d978db2abf8e8c101a4022d6f92d877
+  data.tar.gz: 9dfc6ae6d7ac0567c0429e2504dff8f7dc72b672c2757c5f2ccaa53a5a4261b1
+SHA512:
+  metadata.gz: 5e039450b77684a327d072edbd14ba6aa3eda1a0abd5b15d7b4f15ca36823579141894d2aeed93aeaaadd47e514206a8671ee69b4c761cb4b1332defe47dc670
+  data.tar.gz: 26c8ace3bfc321f7324025f9f2b94e7c0c5ca5ad200165eceedb262b503f690019e7d1874d3f724ef05560437ecce3c93a9ac6019144e7d3120a446631092dba

data/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2023 David Susco
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

data/lib/baseline-scss.rb

@@ -0,0 +1 @@
+require 'baseline_scss'

data/lib/baseline_scss/version.rb

@@ -0,0 +1,3 @@
+module BaselineScss
+  VERSION = '0.3.0'.freeze
+end

data/lib/baseline_scss.rb

@@ -0,0 +1,41 @@
+module BaselineScss
+  if defined?(Jekyll)
+    Jekyll::Command.class_eval do
+      class << self
+        def configuration_from_options(options)
+          return options if options.is_a?(Jekyll::Configuration)
+
+          options = Jekyll.configuration(options)
+
+          begin
+            options['sass']['load_paths'] << File.expand_path('../src', __dir__)
+          rescue
+            options.merge!({ 'sass' => { 'load_paths' => [File.expand_path('../src', __dir__)] } })
+          end
+
+          options
+        end
+      end
+    end
+  elsif defined?(Rails) && defined?(Rails::Engine)
+    class Engine < ::Rails::Engine
+      initializer 'baseline-scss.paths', group: :all do |app|
+        app.config.assets.paths << File.expand_path('../src', __dir__)
+      end
+    end
+  else
+    begin
+      require 'sass'
+
+      Sass.load_paths << File.expand_path('../src', __dir__)
+    rescue LoadError
+    end
+
+    begin
+      require 'sassc'
+
+      SassC.load_paths << File.expand_path('../src', __dir__)
+    rescue LoadError
+    end
+  end
+end

data/src/_content.scss

@@ -0,0 +1,7 @@
+@import 'content/_buttons';
+@import 'content/_code';
+@import 'content/_forms';
+@import 'content/_lists';
+@import 'content/_multimedia';
+@import 'content/_tables';
+@import 'content/_typography';

data/src/_helpers.scss

@@ -0,0 +1,49 @@
+._clearfix {
+  @include clearfix();
+}
+
+._margin_bottom {
+  margin-bottom: var(--_);
+}
+._no_margin_bottom {
+  margin-bottom: 0;
+}
+
+._responsive_table_wrapper {
+  margin-bottom: var(--_);
+  overflow-x: auto;
+
+  > table:last-child {
+    margin-bottom: 0;
+  }
+}
+
+._sr_only {
+  @include sr_only();
+}
+._sr_only_focusable {
+  @include sr_only_focusable();
+}
+
+._text_left {
+  text-align: left;
+}
+._text_right {
+  text-align: right;
+}
+._text_center {
+  text-align: center;
+}
+._text_justify {
+  text-align: justify;
+}
+
+._text_capitalize {
+  text-transform: capitalize;
+}
+._text_uppercase {
+  text-transform: uppercase;
+}
+._text_lowercase {
+  text-transform: lowercase;
+}

data/src/_mixins.scss

@@ -0,0 +1,7 @@
+@import 'mixins/_';
+@import 'mixins/_after_border';
+@import 'mixins/_clearfix';
+@import 'mixins/_font_awesome';
+@import 'mixins/_max_width_container';
+@import 'mixins/_outline';
+@import 'mixins/_sr_only';

data/src/_reboot.scss

@@ -0,0 +1,227 @@
+@at-root {
+  @-ms-viewport {
+    width: device-width; // Honor viewport meta in IE10+.
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+::-moz-selection,
+::selection {
+  text-shadow: none; // Remove text-shadow in selection highlight.
+}
+
+[hidden] {
+  display: none !important;
+}
+
+[tabindex]:not([tabindex^='-']):focus {
+  @include outline();
+}
+// Don't outline elements that programmatically receive focus but wouldn't normally show an outline.
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+html {
+  font-size: x-small; // 1rem == 10px
+}
+
+body {
+  @include _();
+
+  background-color: var(--body_background_color); // Best practice.
+  color: var(--body_color);
+  font-family: var(--font_family);
+  font-weight: normal;
+  text-align: left;
+
+  -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
+  -webkit-tap-highlight-color: rgba(#000, 0); // Change the default tap highlight to be completely transparent in iOS.
+}
+
+article,
+aside,
+canvas,
+details,
+dialog,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+  display: block;
+}
+
+iframe {
+  border: 0;
+  vertical-align: middle;
+}
+
+summary {
+  cursor: pointer;
+}
+
+// Code
+code {
+  word-wrap: break-word;
+
+  a > & {
+    color: inherit; // Avoid broken underline and more when inside anchors.
+  }
+}
+
+pre {
+  display: block;
+  overflow: auto;
+  -ms-overflow-style: scrollbar; // Force scrollbar in IE11+/Edge.
+
+  code {
+    color: inherit;
+    font-size: inherit;
+    word-break: normal;
+  }
+}
+
+// Forms
+fieldset {
+  border: 0; // Don't affect page layout.
+  min-width: 0; // Behave like a standard block element.
+}
+
+label {
+  display: inline-block; // Allow labels to use `margin` for spacing.
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  line-height: inherit;
+  vertical-align: bottom; // Make's elments behave better height-wise.
+}
+
+#{$all-buttons} {
+  &:focus:not(:focus-visible) {
+    outline: 0; // Explicitly remove focus outline in Chromium.
+  }
+
+  &:not(:disabled) {
+    cursor: pointer; // Add "hand" cursor to non-disabled button elements.
+  }
+}
+
+[role="button"] {
+  cursor: pointer; // Set the cursor for non-`<button>` buttons.
+}
+
+[type="search"] {
+  outline-offset: -.2rem;
+}
+
+output {
+  display: inline-block;
+}
+
+select {
+  word-wrap: normal; // Remove the inheritance of word-wrap in Safari.
+
+  &:disabled {
+    opacity: 1; // Undo the opacity change from Chrome.
+  }
+}
+
+textarea {
+  resize: vertical; // Don't break its (horizontal) containers.
+}
+
+::file-selector-button {
+  font: inherit; // Inherit font family and line height for file input buttons.
+  -webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
+}
+
+::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-minute,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-year-field {
+  padding: 0;
+}
+
+// Lists
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}
+
+// Multimedia
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle; // Remove gap between the bottom of their containers.
+}
+
+svg {
+  overflow: hidden; // Workaround for the SVG overflow bug in IE10/11.
+}
+
+// Tables
+table {
+  border-collapse: collapse; // Prevent double borders.
+}
+
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+th {
+  font-weight: inherit;
+  text-align: inherit; // Matches default `<td>` alignment.
+  text-align: -webkit-match-parent; // Fix alignment for Safari.
+}
+
+// Typography
+address {
+  font-style: normal;
+  line-height: inherit;
+}
+
+hr {
+  box-sizing: border-box;
+}
+
+a:not([href]):not([tabindex]):focus {
+  outline: 0; // Plain anchors don't need an outline.
+}
+
+abbr[title] {
+  cursor: help; // Add explicit cursor to indicate changed behavior.
+  text-decoration-skip-ink: none; // Prevent the text-decoration to be skipped.
+}

data/src/_variables.scss

@@ -0,0 +1,149 @@
+$_: 1.2rem !default;
+$_half_ceil: calc(ceil(calc($_ / 2 * 10)) / 10) !default;
+$_half_floor: $_ - $_half_ceil !default;
+
+:root {
+  --_: #{$_};
+  --_half_ceil: #{$_half_ceil};
+  --_half_floor: #{$_half_floor};
+
+  // Fonts
+  --font_family_sans: sans-serif;
+  --font_family_serif: serif;
+  --font_family_mono: monospace;
+
+  --font_family: var(--font_family_sans);
+  --font_family_h: var(--font_family_sans);
+  --font_family_code: var(--font_family_mono);
+
+  --font_weight: normal;
+  --font_weight_bold: bold;
+  --font_weight_h: var(--font_weight_bold);
+
+  --font_size: 1.6rem;
+  --font_size_lines: 2;
+  --font_size_code: 1.5rem;
+  --font_size_code_lines: 2;
+  --font_size_h1: 3.2rem;
+  --font_size_h1_lines: 3;
+  --font_size_h2: 2.8rem;
+  --font_size_h2_lines: 3;
+  --font_size_h3: 2.4rem;
+  --font_size_h3_lines: 2;
+  --font_size_h4: 2rem;
+  --font_size_h4_lines: 2;
+  --font_size_h5: 1.6rem;
+  --font_size_h5_lines: 2;
+  --font_size_h6: 1.2rem;
+  --font_size_h6_lines: 1;
+  --font_size_large: 125%;
+  --font_size_small: 75%;
+
+  // Colors
+  --body_background_color: #fff;
+  --body_color: #000;
+
+  --create_background_color: #cfc;
+  --create_border_color: #3c3;
+  --update_background_color: #cff;
+  --update_border_color: #3cc;
+  --destroy_background_color: #fcc;
+  --destroy_border_color: #c33;
+
+  // Outline
+  --outline_color: #9cf;
+  --outline_offset: .2rem;
+  --outline_style: auto;
+  --outline_width: .2rem;
+
+  // Containers
+  --container_padding: 2rem;
+  --container_max_width: 100%;
+
+  // Buttons
+  --button_background_color: #efefef;
+  --button_background_color_hover: #e5e5e5;
+  --button_background_color_focus: var(--button_background_color);
+  --button_background_color_active: #f5f5f5;
+  --button_background_color_disabled: #eee;
+
+  --button_border_color: #767676;
+  --button_border_color_hover: #4f4f4f;
+  --button_border_color_focus: var(--button_border_color);
+  --button_border_color_active: #8d8d8d;
+  --button_border_color_disabled: #d0d0d0;
+
+  --button_border_style: solid;
+
+  --button_border_radius: .3rem;
+
+  --button_border_width: .1rem;
+
+  --button_color: var(--body_color);
+  --button_color_hover: var(--button_color);
+  --button_color_focus: var(--button_color);
+  --button_color_active: var(--button_color);
+  --button_color_disabled: #b3b3b3;
+
+  --button_height: calc(2 * var(--_));
+
+  --button_padding: 0 .5em;
+
+  // Forms
+  --fieldset_padding_h: 1rem;
+
+  --legend_padding_h: 0 .5rem;
+
+  --input_background_color: var(--body_background_color);
+  --input_background_color_hover: var(--input_background_color);
+  --input_background_color_focus: var(--input_background_color);
+  --input_background_color_active: var(--input_background_color);
+  --input_background_color_disabled: #eee;
+
+  --input_border_color: #767676;
+  --input_border_color_hover: #4f4f4f;
+  --input_border_color_focus: var(--input_border_color);
+  --input_border_color_active: #8d8d8d;
+  --input_border_color_disabled: #d0d0d0;
+
+  --input_border_style: inset;
+
+  --input_border_radius: 0;
+
+  --input_border_width: .1rem;
+
+  --input_color: var(--body_color);
+  --input_color_hover: var(--input_color);
+  --input_color_focus: var(--input_color);
+  --input_color_active: var(--input_color);
+  --input_color_disabled: #b3b3b3;
+
+  --input_height: calc(var(--_) * 2);
+
+  --input_padding: 0 .25em;
+
+  --textarea_padding_h: .25em;
+
+  // Lists
+  --dl_margin_l: 1.5em;
+  --list_padding_l: 1.5em;
+
+  // Tables
+  --table_cell_padding: 0 .25em;
+
+  // Typography
+  --blockquote_margin_h: 2rem;
+
+  --hr_border_color: var(--body_color);
+  --hr_border_style: solid;
+  --hr_border_width: .1rem;
+  --hr_height: var(--_);
+
+  --link_color: #00e;
+  --link_visited_color: #528;
+  --link_hover_color: #00f;
+  --link_focus_color: var(--link_hover_color);
+  --link_active_color: var(--link_hover_color);
+
+  --mark_background_color: #ff0;
+}

data/src/_vendors.scss

@@ -0,0 +1,3 @@
+@import 'vendors/_bourbon';
+@import 'vendors/_include-media';
+@import 'vendors/normalize';

data/src/baseline.scss

@@ -0,0 +1,8 @@
+@import '_vendors';
+
+@import '_variables';
+@import '_mixins';
+
+@import '_reboot';
+@import '_content';
+@import '_helpers';

data/src/content/_buttons.scss

@@ -0,0 +1,37 @@
+#{$all-buttons} {
+  background-color: var(--button_background_color);
+  border: var(--button_border_width) var(--button_border_style) var(--button_border_color);
+  border-radius: var(--button_border_radius);
+  color: var(--button_color);
+  height: var(--button_height);
+  line-height: 1;
+  padding: var(--button_padding);
+
+  &:hover {
+    background-color: var(--button_background_color_hover);
+    border-color: var(--button_border_color_hover);
+    color: var(--button_color_hover);
+  }
+
+  &:focus {
+    @include outline();
+
+    background-color: var(--button_background_color_focus);
+    border-color: var(--button_border_color_focus);
+    color: var(--button_color_focus);
+  }
+
+  &:active {
+    background-color: var(--button_background_color_active);
+    border-color: var(--button_border_color_active);
+    color: var(--button_color_active);
+  }
+
+  &:disabled {
+    background-color: var(--button_background_color_disabled);
+    border-color: var(--button_border_color_disabled);
+    color: var(--button_color_disabled);
+    pointer-events: none;
+  }
+}
+

data/src/content/_code.scss

@@ -0,0 +1,15 @@
+pre {
+  @include _(var(--font_size_code), var(--font_size_code_lines));
+  @include margin(0 null var(--_));
+
+  font-family: var(--font_family_code);
+}
+
+code,
+kbd,
+samp {
+  font-family: var(--font_family_code);
+  font-size: var(--font_size_code);
+  vertical-align: bottom;
+}
+

data/src/content/_forms.scss

@@ -0,0 +1,88 @@
+form {
+  margin: 0 0 var(--_);
+}
+
+fieldset {
+  @include after_border();
+
+  border: 0;
+  padding: var(--_) var(--fieldset_padding_h);
+  margin: 0 0 var(--_);
+
+  &::after {
+    top: calc(-1 * var(--_));
+    z-index: -1;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+legend {
+  background-color: var(--body_background_color);
+  padding: var(--legend_padding_h);
+}
+
+#{$all-text-inputs},
+select {
+  background-color: var(--input_background_color);
+  border: var(--input_border_width) var(--input_border_style) var(--input_border_color);
+  border-radius: var(--input_border_radius);
+  color: var(--input_color);
+  height: var(--input_height);
+
+  &:hover {
+    background-color: var(--input_background_color_hover);
+    border-color: var(--input_border_color_hover);
+    color: var(--input_color_hover);
+  }
+
+  &:focus {
+    @include outline();
+
+    background-color: var(--input_background_color_focus);
+    border-color: var(--input_border_color_focus);
+    color: var(--input_color_focus);
+  }
+
+  &:active {
+    background-color: var(--input_background_color_active);
+    border-color: var(--input_border_color_active);
+    color: var(--input_color_active);
+  }
+
+  &:disabled {
+    background-color: var(--input_background_color_disabled);
+    border-color: var(--input_border_color_disabled);
+    color: var(--input_color_disabled);
+    pointer-events: none;
+  }
+}
+
+#{$all-text-inputs} {
+  padding: var(--input_padding);
+}
+
+input[type='checkbox'],
+input[type='radio'],
+input[type='range'] {
+  &:focus {
+    @include outline();
+  }
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  vertical-align: baseline;
+}
+
+input[type='range'] {
+  vertical-align: text-top;
+}
+
+textarea {
+  height: auto;
+  padding: calc(var(--_half_ceil) - var(--input_border_width)) var(--textarea_padding_h) calc(var(--_half_floor) - var(--input_border_width));
+}
+

data/src/content/_lists.scss

@@ -0,0 +1,15 @@
+dl, ol, ul {
+  @include margin(0 null var(--_));
+
+  & & {
+    margin-bottom: 0;
+  }
+}
+
+dl dl {
+  margin-left: var(--dl_margin_l);
+}
+
+ol, ul {
+  padding-left: var(--list_padding_l);
+}

data/src/content/_multimedia.scss

@@ -0,0 +1,8 @@
+figure {
+  margin: 0 0 var(--_);
+}
+
+img {
+  display: inline-block;
+  max-width: 100%;
+}