brut 0.0.21 → 0.0.23

data/brut-css/src/css/typography.css

@@ -0,0 +1,519 @@
+/* Typography classes.  These allow you to control how text is displayed and rendered.  In particular, 
+ * this contains the modular scale of font sizes, but also contains many other text rendering options.
+ *
+ * @category typography
+ * @see "Web Fonts" https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts
+ * @see property-category:typography
+ */
+
+/* Font families for sans, serif, monospace, cursive, and fantasy.  The idea is that your design would not have more than one
+ * font of each type, so you'd set  custom properties with the fonts you like, then use e.g. `.ff-sans` anywhere you wanted
+ * Sans Serif and `ff-serif` anywhere you wanted yourt Serif font.
+ *
+ * @group font-family
+ * @see property-group:font-family
+ */
+
+/** Set the contents in the chosen sans-serif font 
+ * @see --ff-sans
+ * @example Typical
+ *    <p class="ff-sans">Things should be what they are</p>
+ */
+.ff-sans {
+  font-family: var(--ff-sans);
+}
+/** Set the contents in the chosen sans-serif font 
+ * @example
+ *    <p class="ff-serif">Things should be what they are</p>
+ */
+.ff-serif {
+  font-family: var(--ff-serif);
+}
+/** Set the contents in the chosen monospace font 
+ * @example
+ *    <p class="ff-mono">Things should be what they are</p>
+ */
+.ff-mono {
+  font-family: var(--ff-mono);
+}
+/** Set the contents in the chosen cursive/handwriting font 
+ * @example
+ *    <p class="ff-cursive">Things should be what they are</p>
+ */
+.ff-cursive {
+  font-family: var(--ff-cursive);
+}
+/** Set the contents in the chosen fantasy font 
+ * @example
+ *    <p class="ff-fantasy">Things should be what they are</p>
+ */
+.ff-fantasy {
+  font-family: var(--ff-fantasy);
+}
+
+/* The modular scale of font sizes.  This provides 10 total steps, which should give you enough font sizes for any needed.
+ * 0 is the smallest and 9 is the largest.
+ *
+ * @scale font-size
+ */
+
+/* The smallest font. Note that this is likely very small and not legible in all situations. It's here in case you really
+ * need something quite tiny, but try to use {f-1} if you can.
+ *
+ * @example
+ *     <p class="f-0">Things should be what they are</p>
+ */
+.f-0 {
+  font-size: var(--fs-0);
+}
+/** The second smallest font, which you should use general when you need something smaller than the body font.
+ *
+ * @example
+ *    <p class="f-1">Things should be what they are</p>
+ */
+.f-1 {
+  font-size: var(--fs-1);
+}
+/** The body font size, appropriate for all general text.  By default, this should be `1rem`, which will match the user
+ * agent's configured font size
+ *
+ * @example
+ *    <p class="f-2">Things should be what they are</p>
+ */
+.f-2 {
+  font-size: var(--fs-2);
+}
+/** Third step of the scale, one steps larger than the body font.
+ * @example
+ *     <p class="f-3">Things should be what they are</p>
+ */
+.f-3 {
+  font-size: var(--fs-3);
+}
+/** Fourth step of the scale, two steps larger than the body font.
+ * @example
+ *     <p class="f-4">Things should be what they are</p>
+ */
+.f-4 {
+  font-size: var(--fs-4);
+}
+/** Fifth step of the scale, three steps larger than the body font.
+ * @example
+ *     <p class="f-5">Things should be what they are</p>
+ */
+.f-5 {
+  font-size: var(--fs-5);
+}
+/** Sixth step of the scale, four steps larger than the body font.
+ * @example
+ *     <p class="f-6">Things should be what they are</p>
+ */
+.f-6 {
+  font-size: var(--fs-6);
+}
+/** Seventh step of the scale, five steps larger than the body font.
+ * @example
+ *     <p class="f-7">Things should be what they are</p>
+ */
+.f-7 {
+  font-size: var(--fs-7);
+}
+/** Eighth step of the scale, six steps larger than the body font.
+ * @example
+ *     <p class="f-8">Things should be what they are</p>
+ */
+.f-8 {
+  font-size: var(--fs-8);
+}
+/** Largest size font 
+ * @example
+ *     <p class="f-9">Things should be what they are</p>
+ */
+.f-9 {
+  font-size: var(--fs-9);
+}
+
+/* Font Weights.  These go from 1 to 9, representing 100's, along with a normal class to undo any font weight.
+ * Note that, depending on your font, not every weight will look distinct.
+ *
+ * @scale font-weights
+ */
+
+/* Normal font weight.
+ * @example
+ *     <p class="fw-normal">Things should be what they are</p>
+ */
+.fw-normal {
+  font-weight: normal;
+}
+/* Bold font weight.
+ * @example
+ *     <p class="fw-bold">Things should be what they are</p>
+ */
+.fw-bold {
+  font-weight: bold;
+}
+
+/* Lightest font weight.
+ * @example
+ *     <p class="fw-1">Things should be what they are</p>
+ */
+.fw-1 {
+  font-weight: 100;
+}
+/*
+ * @example
+ *     <p class="fw-2">Things should be what they are</p>
+ */
+.fw-2 {
+  font-weight: 200;
+}
+/*
+ * @example
+ *     <p class="fw-3">Things should be what they are</p>
+ */
+.fw-3 {
+  font-weight: 300;
+}
+/*
+ * @example
+ *     <p class="fw-4">Things should be what they are</p>
+ */
+.fw-4 {
+  font-weight: 400;
+}
+/*
+ * @example
+ *     <p class="fw-5">Things should be what they are</p>
+ */
+.fw-5 {
+  font-weight: 500;
+}
+/*
+ * @example
+ *     <p class="fw-6">Things should be what they are</p>
+ */
+.fw-6 {
+  font-weight: 600;
+}
+/*
+ * @example
+ *     <p class="fw-7">Things should be what they are</p>
+ */
+.fw-7 {
+  font-weight: 700;
+}
+/*
+ * @example
+ *     <p class="fw-8">Things should be what they are</p>
+ */
+.fw-8 {
+  font-weight: 800;
+}
+/* Heaviest font weight.
+ * @example
+ *     <p class="fw-9">Things should be what they are</p>
+ */
+.fw-9 {
+  font-weight: 900;
+}
+
+/* Font styles and variants.
+ *
+ * @group styles-variants
+ */
+
+/* Normal styling, typically roman.
+ * @example
+ *     <p class="fs-normal">Things should be what they are</p>
+ */
+.fs-normal {
+  font-style: normal;
+}
+
+/* Italic or slanted styling, depend on the font.
+ * @example
+ *     <p class="fs-italic">Things should be what they are</p>
+ */
+.fs-italic {
+  font-style: italic;
+}
+
+
+/* Small caps variant
+ * @example
+ *     <p class="fv-sc">Things should be what they are</p>
+ */
+.fv-sc {
+  font-variant: small-caps;
+}
+
+/* Normal variant
+ * @example
+ *     <p class="fv-normal">Things should be what they are</p>
+ */
+.fv-normal {
+  font-variant: normal;
+}
+
+
+/* Letterspacing/tracking.  This scale is semantic, since you likely don't need that many values
+ * to achnieve whatever design you are looking for.
+ *
+ * @group tracking
+ */
+
+/* Slightly increased spacing, useful for cleaning up all-caps titles.
+ * @example
+ *     <p class="tracked">Things should be what they are</p>
+ */
+.tracked {
+  letter-spacing: var(--ls-tracked);
+}
+/* Tight spacing.
+ * @example
+ *     <p class="tracked-tight">Things should be what they are</p>
+ */
+.tracked-tight {
+  letter-spacing: var(--ls-tight);
+}
+/* Significantly increased spacing, useful for special effects.
+ * @example
+ *     <p class="tracked-mega">Things should be what they are</p>
+ */
+.tracked-mega {
+  letter-spacing: var(--ls-mega);
+}
+
+/* Normal letter spacing.
+ * @example
+ *     <p class="tracked-none">Things should be what they are</p>
+ */
+.tracked-none {
+  letter-spacing: var(--ls-none);
+}
+
+
+
+
+/* Line heights/leading.  This is a semantic scale providing three useful values.
+ *
+ * @group leading Leading/Line Height
+ */
+/* No line height, for creating solid blocks of text.
+ * @example
+ *     <p class="lh-solid measure">
+ *       A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony.  Conversely, if two elements are unrelated, they should be quite clearly different.
+ *     </p>
+ */
+.lh-solid {
+  line-height: var(--lh-solid);
+}
+
+/* Leading appropriate for titles, which can be somewhat tighter than normal text.
+ * @example
+ *     <p class="lh-title measure">
+ *       A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony.  Conversely, if two elements are unrelated, they should be quite clearly different.
+ *     </p>
+ */
+.lh-title {
+  line-height: var(--lh-title);
+}
+
+/* Leading appropriate for copy or other longform text.
+ * @example
+ *     <p class="lh-copy measure">
+ *       A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony.  Conversely, if two elements are unrelated, they should be quite clearly different.
+ *     </p>
+ * @see p
+ */
+.lh-copy {
+  line-height: var(--lh-copy);
+}
+
+
+/* Text alignment.
+ *
+ * @group text-align
+ */
+/* Right alignment
+ * @example
+ *     <p class="w-100 tr">Things should be what they are</p>
+ */
+.tr {
+  text-align: right;
+}
+/* Center-aligned text.
+ * @example
+ *     <p class="w-100 tc">Things should be what they are</p>
+ */
+.tc {
+  text-align: center;
+}
+/* Left-aligned text.
+ * @example
+ *     <p class="w-100 tl">Things should be what they are</p>
+ */
+.tl {
+  text-align: left;
+}
+
+
+/* Text transformations.
+ *
+ * @group text-transform
+ */
+.ttn {
+  text-transform: none;
+}
+.ttu {
+  text-transform: uppercase;
+}
+.ttl {
+  text-transform: lowercase;
+}
+.ttc {
+  text-transform: capitalize;
+}
+.tdn {
+  text-decoration: none;
+}
+.tdu {
+  text-decoration: underline;
+}
+.u {
+  text-decoration: underline;
+}
+.tds {
+  text-decoration: line-through;
+}
+.tdo {
+  text-decoration: overline;
+}
+
+/* Text indents. This is a seven-step scale with -3 to positive 3.
+ * @scale indent
+ */
+.indent--3 {
+  text-indent: calc( -1 * var(--indent-3));
+}
+.indent--2 {
+  text-indent: calc( -1 * var(--indent-2));
+}
+.indent--1 {
+  text-indent: calc( -1 * var(--indent-1));
+}
+.indent-0 {
+  text-indent: 0;
+}
+.indent-1 {
+  text-indent: var(--indent-1);
+}
+.indent-2 {
+  text-indent: var(--indent-2);
+}
+.indent-3 {
+  text-indent: var(--indent-3);
+}
+
+/* Text overflow
+ *
+ * @group text-overflow
+ */
+.truncate {
+  text-overflow: ellipsis;
+}
+.clip {
+  text-overflow: clip;
+}
+
+
+/* Whitespace  
+ *
+ * @group whitespace
+ */
+.ws-normal {
+  white-space: normal;
+}
+.ws-nowrap {
+  white-space: nowrap;
+}
+.ws-pre {
+  white-space: pre;
+}
+
+/* Maximum widths useful for text blocks.
+ *
+ * @group measure Measure/Text Width
+ */
+
+/* A standard text width useful for any occassion. This should provide a comfortable reading experience for any font and
+ * size.
+ *
+ * @example
+ *     <p class="measure">
+ *       A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony.  Conversely, if two elements are unrelated, they should be quite clearly different.
+ *     </p>
+ */
+.measure {
+  max-width: var(--tw);
+}
+
+/* A slighter wider, but still readable width.
+ * @example
+ *     <p class="measure-wide">
+ *       A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony.  Conversely, if two elements are unrelated, they should be quite clearly different.
+ *     </p>
+ */
+.measure-wide {
+  max-width: var(--tw-wide);
+}
+
+/* A slighter narrower, but still readable width.
+ * @example
+ *     <p class="measure-narrow">
+ *       A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony.  Conversely, if two elements are unrelated, they should be quite clearly different.
+ *     </p>
+ */
+.measure-narrow {
+  max-width: var(--tw-narrow);
+}
+
+/* Aliases to save precious keystrokes.
+ *
+ * @group typography-aliases
+ */
+
+/* Set reasonable  typography for some text, namely, setting {measure} and {lh-copy} at the same time.
+ *
+ * @example
+ *     <div class="p">
+ *       A core tenet of design is that same should be same, while different be then different. Meaning: if two elements are intended to be the same sort of thing, or reference the same sort of information, they should have clear consonance and harmony.  Conversely, if two elements are unrelated, they should be quite clearly different.
+ *     </div>
+ */
+.p {
+  max-width: var(--tw);
+  line-height: var(--lh-copy);
+}
+
+/* Shorthand for a bold font.
+ * @example
+ *     <p class="b">Things should be what they are</p>
+ */
+.b {
+  font-weight: bold;
+}
+/* Shorthand for small-caps
+ * @example
+ *     <p class="sc">Things should be what they are</p>
+ */
+.sc {
+  font-variant: small-caps;
+}
+/* Shorthand for italic
+ * @example
+ *     <p class="i">Things should be what they are</p>
+ */
+.i {
+  font-style: italic;
+}

data/brut-css/src/css/utils.css

@@ -0,0 +1,104 @@
+/* Junk drawer of useful classes that don't fit anywhere else.
+ *
+ * @category junk-drawer
+ */
+
+/* Screen-reader help.
+ *
+ * @group screen-reader
+ */
+
+/* Indicate something is for screen-readers only. This is different from markup that is hidden or for decoration. This is
+ * markup that is needed for screen-reader-based visitors to understand something on the page, but that visitors
+ * using a more conventional browser don't need to see or can figure out from visual context.
+ */
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+/* Undo something that may have been removed by {sr-only}. */
+.undo-sr-only {
+  position: static;
+  padding: 0;
+  margin: 0;
+  clip: auto;
+  white-space: normal;
+  width: auto;
+  height: auto;
+  overflow: visible;
+}
+
+/* Debug utilities.  These can be useful to show outlines of various elements without having to navigate the browser's
+ * devtools.  You can combine {debug-red}, {debug-green}, and {debug-blue} to create outlines at different levels.
+ *
+ * @group debug
+ */
+
+/* Draw outlines around everything inside.
+ *
+ * @example
+ *     <div class="debug">
+ *       <p>
+ *       ere is the wrong way to do a big huge drop cap.
+ *       <span class="f-l f-4">H</span>
+ *       And some good-ole <span  class="h-5">inline bugs</span>, to boot!
+ *       </p>
+ *     </div>
+ *
+ */
+.debug * {
+  outline: 1px solid gold;
+}
+
+/* Draw outlines in red around everything inside.
+ *
+ * @example
+ *     <div class="debug-red">
+ *       <p>
+ *       ere is the wrong way to do a big huge drop cap.
+ *       <span class="f-l f-4">H</span>
+ *       And some good-ole <span  class="h-5">inline bugs</span>, to boot!
+ *       </p>
+ *     </div>
+ *
+ */
+.debug-red * {
+  outline: 1px solid red;
+}
+
+/* Draw outlines in green around everything inside.
+ *
+ * @example
+ *     <div class="debug-green">
+ *       <p>
+ *       ere is the wrong way to do a big huge drop cap.
+ *       <span class="f-l f-4">H</span>
+ *       And some good-ole <span  class="h-5">inline bugs</span>, to boot!
+ *       </p>
+ *     </div>
+ *
+ */
+.debug-green * {
+  outline: 1px solid green;
+}
+
+/* Draw outlines in blue around everything inside.
+ *
+ * @example
+ *     <div class="debug-blue">
+ *       <p>
+ *       ere is the wrong way to do a big huge drop cap.
+ *       <span class="f-l f-4">H</span>
+ *       And some good-ole <span  class="h-5">inline bugs</span>, to boot!
+ *       </p>
+ *     </div>
+ *
+ */
+.debug-blue * {
+  outline: 1px solid blue;
+}

data/brut-css/src/docs/1_getting-started/1_overview.md

@@ -0,0 +1,46 @@
+## Overview
+
+BrutCSS is a simple utility-based CSS library designed to support rapid prototyping and design directly in your HTML.  It is
+*not* designed to replace the use of CSS.
+
+BrutCSS has two parts: a design system based on CSS custom properties, and a set of single-purpose CSS classes you can use to
+bootstrap the design of your app.
+
+Using BrutCSS is like using any programming language: you use the low-level aspects of it—its classes—to do your work. As you
+notice duplication or areas in need of abstraction, you can use any tool at your disposal to do that. You may choose to
+create Phlex components to allow the re-use, or you may choose to use CSS classes that you create.
+
+### Example
+
+    <button class="db ph-3 pv-2 bg-white blue-400 b f-3 ba br-2 bc-blue-500">
+      Click Me
+    </button>
+
+<button class="db ph-3 pv-2 bg-white blue-400 b f-3 ba br-2 bc-blue-500">
+  Click Me
+</button>
+
+### Using the Design System
+
+    <button class="the-bluest-button">
+      Click Me
+    </button>
+
+    .the-bluest-button {
+      display: block;
+      padding-left: var(--sp-3);
+      padding-right: var(--sp-3);
+      padding-top: var(--sp-2);
+      padding-top: var(--sp-2);
+      color: var(--blue-400);
+      font-weight: bold
+      font-size: var(--fs-3);
+      border-style: solid
+      border-width: 1px;
+      border-radius: var(--bw-2)/
+      border-color: var(--blue-500);
+    }
+
+<button class="db ph-3 pv-2 bg-white blue-400 b f-3 ba br-2 bc-blue-500">
+  Click Me
+</button>

data/brut-css/src/docs/1_getting-started/2_installation.md

@@ -0,0 +1,25 @@
+## Installation
+
+BrutCSS is bundled with BrutRB, however you can install it via NPM:
+
+    npm install brut-css
+
+From there, you can use `@import` to bring it into your app:
+
+    @import "brut-css/dist/brut.css";
+
+You can also try it without installing by use `unpkg.com`:
+
+    <link rel="stylesheet"
+          href="https://unpkg.com/brut-css/dist/brut.css"/>
+
+**Note** the distributed files *are already minified*.
+
+### Other Files
+
+`brut.css` includes four breakpoints. You may want only 2, or only 1:
+
+* `brut.css` - default, "not small", "medium", and "large" (most features)
+* `brut-ns-only.css` - default and "not small"
+* `brut-thin.css` - default only (smallest)
+