brut 0.0.20 → 0.0.22

data/brut-css/src/css/dimensions.css

@@ -0,0 +1,548 @@
+/* Dimensions, namely width and height. These are all using an 8-step scale with 1 being
+ * the smallest width and 8 the largest.  These scales use the {property-scale:widths-heights} scale, which, by default, is
+ * double the respective value from {property-scale:spacing}.  This should result in harmonious designs that align on a
+ * grid.
+ *
+ * There are also percentage-based scales where the value in the class is the percentage, with the addition of `third` and
+ * `two-thirds`.
+ *
+ * @category dimensions
+ */
+
+/* Numeric/fixed widths.
+ * @scale widths
+ */
+.w-1 {
+  width: var(--wh-1);
+}
+.w-2 {
+  width: var(--wh-2);
+}
+.w-3 {
+  width: var(--wh-3);
+}
+.w-4 {
+  width: var(--wh-4);
+}
+.w-5 {
+  width: var(--wh-5);
+}
+.w-6 {
+  width: var(--wh-6);
+}
+.w-7 {
+  width: var(--wh-7);
+}
+.w-8 {
+  width: var(--wh-8);
+}
+
+/* Percentage widths.
+ * @scale width-percent
+ */
+.w-10 {
+  width: 10%;
+}
+.w-20 {
+  width: 20%;
+}
+.w-25 {
+  width: 25%;
+}
+.w-30 {
+  width: 30%;
+}
+.w-40 {
+  width: 40%;
+}
+.w-50 {
+  width: 50%;
+}
+.w-60 {
+  width: 60%;
+}
+.w-70 {
+  width: 70%;
+}
+.w-75 {
+  width: 75%;
+}
+.w-80 {
+  width: 80%;
+}
+.w-90 {
+  width: 90%;
+}
+.w-100 {
+  width: 100%;
+}
+.w-third {
+  width: calc(100% / 3);
+}
+.w-two-thirds {
+  width: calc(100% / 1.5);
+}
+
+/* View-width percentage widths
+ * @scale width-view-width
+ */
+.w-10vw {
+  width: 10vw;
+}
+.w-20vw {
+  width: 20vw;
+}
+.w-30vw {
+  width: 30vw;
+}
+.w-40vw {
+  width: 40vw;
+}
+.w-50vw {
+  width: 50vw;
+}
+.w-60vw {
+  width: 60vw;
+}
+.w-70vw {
+  width: 70vw;
+}
+.w-80vw {
+  width: 80vw;
+}
+.w-90vw {
+  width: 90vw;
+}
+.w-100vw {
+  width: 100vw;
+}
+.w-auto {
+  width: auto;
+}
+/* Numeric/fixed maximum widths.
+ * @grouping max-width
+ */
+.mw-1 {
+  max-width: var(--wh-1);
+}
+.mw-2 {
+  max-width: var(--wh-2);
+}
+.mw-3 {
+  max-width: var(--wh-3);
+}
+.mw-4 {
+  max-width: var(--wh-4);
+}
+.mw-5 {
+  max-width: var(--wh-5);
+}
+.mw-6 {
+  max-width: var(--wh-6);
+}
+.mw-7 {
+  max-width: var(--wh-7);
+}
+.mw-8 {
+  max-width: var(--wh-8);
+}
+/* Percentage-based maximum widths.
+ * @grouping max-width-percent
+ */
+.mw-10 {
+  max-width: 10%;
+}
+.mw-20 {
+  max-width: 20%;
+}
+.mw-25 {
+  max-width: 25%;
+}
+.mw-30 {
+  max-width: 30%;
+}
+.mw-40 {
+  max-width: 40%;
+}
+.mw-50 {
+  max-width: 50%;
+}
+.mw-60 {
+  max-width: 60%;
+}
+.mw-70 {
+  max-width: 70%;
+}
+.mw-75 {
+  max-width: 75%;
+}
+.mw-80 {
+  max-width: 80%;
+}
+.mw-90 {
+  max-width: 90%;
+}
+.mw-100 {
+  max-width: 100%;
+}
+.mw-third {
+  max-width: calc(100% / 3);
+}
+.mw-two-thirds {
+  max-width: calc(100% / 1.5);
+}
+/* View-width percentage maximum widths
+ * @scale width-view-max-width
+ */
+.mw-10vw {
+  max-width: 10vw;
+}
+.mw-20vw {
+  max-width: 20vw;
+}
+.mw-30vw {
+  max-width: 30vw;
+}
+.mw-40vw {
+  max-width: 40vw;
+}
+.mw-50vw {
+  max-width: 50vw;
+}
+.mw-60vw {
+  max-width: 60vw;
+}
+.mw-70vw {
+  max-width: 70vw;
+}
+.mw-80vw {
+  max-width: 80vw;
+}
+.mw-90vw {
+  max-width: 90vw;
+}
+.mw-100vw {
+  max-width: 100vw;
+}
+
+/* Numeric/fixed minimum widths
+ * @scale min-width
+ */
+.minw-1 {
+  min-width: var(--wh-1);
+}
+.minw-2 {
+  min-width: var(--wh-2);
+}
+.minw-3 {
+  min-width: var(--wh-3);
+}
+.minw-4 {
+  min-width: var(--wh-4);
+}
+.minw-5 {
+  min-width: var(--wh-5);
+}
+.minw-6 {
+  min-width: var(--wh-6);
+}
+.minw-7 {
+  min-width: var(--wh-7);
+}
+.minw-8 {
+  min-width: var(--wh-8);
+}
+/* Percentage-based minimum widths
+ * @scale min-width-percent
+ */
+.minw-10 {
+  min-width: 10%;
+}
+.minw-20 {
+  min-width: 20%;
+}
+.minw-25 {
+  min-width: 25%;
+}
+.minw-30 {
+  min-width: 30%;
+}
+.minw-40 {
+  min-width: 40%;
+}
+.minw-50 {
+  min-width: 50%;
+}
+.minw-60 {
+  min-width: 60%;
+}
+.minw-70 {
+  min-width: 70%;
+}
+.minw-75 {
+  min-width: 75%;
+}
+.minw-80 {
+  min-width: 80%;
+}
+.minw-90 {
+  min-width: 90%;
+}
+.minw-100 {
+  min-width: 100%;
+}
+.minw-third {
+  min-width: calc(100% / 3);
+}
+.minw-two-thirds {
+  min-width: calc(100% / 1.5);
+}
+/* View-width-based minimum widths
+ * @scale min-width-view-width
+ */
+.minw-10vw {
+  min-width: 10vw;
+}
+.minw-20vw {
+  min-width: 20vw;
+}
+.minw-30vw {
+  min-width: 30vw;
+}
+.minw-40vw {
+  min-width: 40vw;
+}
+.minw-50vw {
+  min-width: 50vw;
+}
+.minw-60vw {
+  min-width: 60vw;
+}
+.minw-70vw {
+  min-width: 70vw;
+}
+.minw-80vw {
+  min-width: 80vw;
+}
+.minw-90vw {
+  min-width: 90vw;
+}
+.minw-100vw {
+  min-width: 100vw;
+}
+.minw-auto {
+  min-width: auto;
+}
+/* Numeric/fixed heights.
+ * @scale heights
+ */
+.h-1 {
+  height: var(--wh-1);
+}
+.h-2 {
+  height: var(--wh-2);
+}
+.h-3 {
+  height: var(--wh-3);
+}
+.h-4 {
+  height: var(--wh-4);
+}
+.h-5 {
+  height: var(--wh-5);
+}
+.h-6 {
+  height: var(--wh-6);
+}
+.h-7 {
+  height: var(--wh-7);
+}
+.h-8 {
+  height: var(--wh-8);
+}
+/* Percentage heights.
+ * @scale height-percent
+ */
+.h-10 {
+  height: 10%;
+}
+.h-20 {
+  height: 20%;
+}
+.h-25 {
+  height: 25%;
+}
+.h-30 {
+  height: 30%;
+}
+.h-40 {
+  height: 40%;
+}
+.h-50 {
+  height: 50%;
+}
+.h-60 {
+  height: 60%;
+}
+.h-70 {
+  height: 70%;
+}
+.h-75 {
+  height: 75%;
+}
+.h-80 {
+  height: 80%;
+}
+.h-90 {
+  height: 90%;
+}
+.h-100 {
+  height: 100%;
+}
+.h-third {
+  height: calc(100% / 3);
+}
+.h-two-thirds {
+  height: calc(100% / 1.5);
+}
+/* View-height percentage heights
+ * @scale height-view-height
+ */
+.h-10vh {
+  height: 10vh;
+}
+.h-20vh {
+  height: 20vh;
+}
+.h-30vh {
+  height: 30vh;
+}
+.h-40vh {
+  height: 40vh;
+}
+.h-50vh {
+  height: 50vh;
+}
+.h-60vh {
+  height: 60vh;
+}
+.h-70vh {
+  height: 70vh;
+}
+.h-80vh {
+  height: 80vh;
+}
+.h-90vh {
+  height: 90vh;
+}
+.h-100vh {
+  height: 100vh;
+}
+.h-auto {
+  height: auto;
+}
+/* Numeric/fixed maximum heights.
+ * @grouping max-height
+ */
+.max-height-1 {
+  max-height: var(--wh-1);
+}
+.max-height-2 {
+  max-height: var(--wh-2);
+}
+.max-height-3 {
+  max-height: var(--wh-3);
+}
+.max-height-4 {
+  max-height: var(--wh-4);
+}
+.max-height-5 {
+  max-height: var(--wh-5);
+}
+.max-height-6 {
+  max-height: var(--wh-6);
+}
+.max-height-7 {
+  max-height: var(--wh-7);
+}
+.max-height-8 {
+  max-height: var(--wh-8);
+}
+/* Percentage-based maximum heights.
+ * @grouping max-height-percent
+ */
+.max-height-10 {
+  max-height: 10%;
+}
+.max-height-20 {
+  max-height: 20%;
+}
+.max-height-25 {
+  max-height: 25%;
+}
+.max-height-30 {
+  max-height: 30%;
+}
+.max-height-40 {
+  max-height: 40%;
+}
+.max-height-50 {
+  max-height: 50%;
+}
+.max-height-60 {
+  max-height: 60%;
+}
+.max-height-70 {
+  max-height: 70%;
+}
+.max-height-75 {
+  max-height: 75%;
+}
+.max-height-80 {
+  max-height: 80%;
+}
+.max-height-90 {
+  max-height: 90%;
+}
+.max-height-100 {
+  max-height: 100%;
+}
+.max-height-third {
+  max-height: calc(100% / 3);
+}
+.max-height-two-thirds {
+  max-height: calc(100% / 1.5);
+}
+/* View-height percentage maximum heights
+ * @scale height-view-max-height
+ */
+.max-height-10vh {
+  max-height: 10vh;
+}
+.max-height-20vh {
+  max-height: 20vh;
+}
+.max-height-30vh {
+  max-height: 30vh;
+}
+.max-height-40vh {
+  max-height: 40vh;
+}
+.max-height-50vh {
+  max-height: 50vh;
+}
+.max-height-60vh {
+  max-height: 60vh;
+}
+.max-height-70vh {
+  max-height: 70vh;
+}
+.max-height-80vh {
+  max-height: 80vh;
+}
+.max-height-90vh {
+  max-height: 90vh;
+}
+.max-height-100vh {
+  max-height: 100vh;
+}

data/brut-css/src/css/flex.css

@@ -0,0 +1,179 @@
+/* Flexbox utilities.  These should allow most Flex layouts without having to write CSS.
+ *
+ * @category flex
+ * @see class-group:display
+ */
+
+/* General flex-establishing classes.
+ *
+ * @group flex-general
+ */
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+.flex-none {
+  flex: none;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-row {
+  flex-direction: row;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+/* Item alignment, most useful with flexbox
+ *
+ * @group item-alignment
+ */
+.items-start {
+  align-items: flex-start;
+}
+.items-end {
+  align-items: flex-end;
+}
+.items-center {
+  align-items: center;
+}
+.items-baseline {
+  align-items: baseline;
+}
+.items-stretch {
+  align-items: stretch;
+}
+
+/* Self alignment, most useful with flexbox
+ *
+ * @group self-aligment
+ */
+.self-start {
+  align-self: flex-start;
+}
+.self-end {
+  align-self: flex-end;
+}
+.self-center {
+  align-self: center;
+}
+.self-baseline {
+  align-self: baseline;
+}
+.self-stretch {
+  align-self: stretch;
+}
+
+/* Justify content, most useful with flexbox
+ *
+ * @group justify-content
+ */
+.justify-start {
+  justify-content: start;
+}
+.justify-end {
+  justify-content: end;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-around {
+  justify-content: space-around;
+}
+.justify-stretch {
+  justify-content: stretch;
+}
+/* Align content, most useful with flexbox
+ *
+ * @group align-content
+ */
+.content-start {
+  align-content: start;
+}
+.content-end {
+  align-content: end;
+}
+.content-center {
+  align-content: center;
+}
+.content-between {
+  align-content: space-between;
+}
+.content-around {
+  align-content: space-around;
+}
+.content-stretch {
+  align-content: stretch;
+}
+/* Flex grow, using a six-step scale.
+ *
+ * @scale flex-grow
+ */
+.flex-grow-0 {
+  flex-grow: 0;
+}
+.flex-grow-1 {
+  flex-grow: 1;
+}
+.flex-grow-2 {
+  flex-grow: 2;
+}
+.flex-grow-3 {
+  flex-grow: 3;
+}
+.flex-grow-4 {
+  flex-grow: 4;
+}
+.flex-grow-5 {
+  flex-grow: 5;
+}
+/* Flex shrink, using a six-step scale.
+ *
+ * @scale flex-grow
+ */
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+.flex-shrink-1 {
+  flex-shrink: 1;
+}
+.flex-shrink-2 {
+  flex-shrink: 2;
+}
+.flex-shrink-3 {
+  flex-shrink: 3;
+}
+.flex-shrink-4 {
+  flex-shrink: 4;
+}
+.flex-shrink-5 {
+  flex-shrink: 5;
+}
+/* Flex basis.
+ *
+ * @group flex-basis
+ */
+.flex-basis-0 {
+  flex-basis: 0;
+}
+.flex-basis-auto {
+  flex-basis: auto;
+}
+.flex-basis-max {
+  flex-basis: max-content;
+}
+.flex-basis-min {
+  flex-basis: min-content;
+}
+.flex-basis-fit {
+  flex-basis: fit-content;
+}

data/brut-css/src/css/index.css

@@ -0,0 +1,13 @@
+@import "properties/index.css";
+@import "reset.css";
+@import "appearance.css";
+@import "border.css";
+@import "colors.css";
+@import "dimensions.css";
+@import "flex.css";
+@import "layout.css";
+@import "list.css";
+@import "positioning.css";
+@import "spacing.css";
+@import "typography.css";
+@import "utils.css";