unigrid.css 0.3.0

package/src/scss/_forms.scss

@@ -0,0 +1,192 @@
+// ==========================================================================
+// Unigrid CSS Framework — Forms (BEM)
+//
+// Block: .ug-form
+// Elements: __group, __label, __input, __select, __textarea, __checkbox,
+//           __radio, __help, __error
+// Modifiers: --inline, --disabled
+//            __input--sm, __input--lg
+// ==========================================================================
+
+@use "sass:color";
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-form {
+
+  // ---- Form Group (label + input pair) ----
+  &__group {
+    @include ug-rhythm-margin-bottom(0.5);
+  }
+
+  // ---- Label ----
+  &__label {
+    display: block;
+    @include ug-font-size("sm");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    @include ug-rhythm-margin-top(0.5);
+    margin-bottom: 0;
+    color: $ug-black;
+  }
+
+  // ---- Text Input, Email, Password, Number, etc. ----
+  &__input {
+    display: block;
+    width: 100%;
+    height: calc(var(--ug-leading) * 1.5);
+    padding: 0 calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("base");
+    font-family: inherit;
+    color: $ug-black;
+    background-color: $ug-white;
+    border: 1px solid $ug-light-gray;
+    transition: border-color 0.15s;
+
+    &::placeholder {
+      color: $ug-medium-gray;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $ug-black;
+    }
+
+    // Sizes
+    &--sm {
+      height: calc(var(--ug-leading) * 1);
+      @include ug-font-size("sm");
+    }
+
+    &--lg {
+      height: calc(var(--ug-leading) * 2);
+      @include ug-font-size("lg");
+    }
+  }
+
+  // ---- Select ----
+  &__select {
+    display: block;
+    width: 100%;
+    height: calc(var(--ug-leading) * 1.5);
+    padding: 0 calc(var(--ug-leading) * 1) 0 calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("base");
+    font-family: inherit;
+    color: $ug-black;
+    background-color: $ug-white;
+    border: 1px solid $ug-light-gray;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right calc(var(--ug-leading) * 0.5) center;
+    background-size: 12px;
+    transition: border-color 0.15s;
+
+    &:focus {
+      outline: none;
+      border-color: $ug-black;
+    }
+  }
+
+  // ---- Textarea ----
+  &__textarea {
+    display: block;
+    width: 100%;
+    min-height: calc(var(--ug-leading) * 4);
+    padding: calc(var(--ug-leading) * 0.5);
+    @include ug-font-size("base");
+    @include ug-rhythm-line-height(1);
+    font-family: inherit;
+    color: $ug-black;
+    background-color: $ug-white;
+    border: 1px solid $ug-light-gray;
+    resize: vertical;
+    transition: border-color 0.15s;
+
+    &::placeholder {
+      color: $ug-medium-gray;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $ug-black;
+    }
+  }
+
+  // ---- Checkbox & Radio ----
+  &__checkbox,
+  &__radio {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--ug-leading) * 0.5);
+    @include ug-rhythm-line-height(1);
+    @include ug-rhythm-margin-bottom(0.5);
+    cursor: pointer;
+
+    input {
+      width: 1em;
+      height: 1em;
+      margin: 0;
+      accent-color: $ug-black;
+      cursor: pointer;
+    }
+
+    span {
+      @include ug-font-size("base");
+      color: $ug-black;
+    }
+  }
+
+  // ---- Help Text ----
+  &__help {
+    @include ug-font-size("xs");
+    @include ug-rhythm-line-height(1);
+    color: $ug-medium-gray;
+    margin-top: calc(var(--ug-leading) * 0.25);
+  }
+
+  // ---- Error State ----
+  &__error {
+    @include ug-font-size("xs");
+    @include ug-rhythm-line-height(1);
+    color: $ug-red;
+    margin-top: calc(var(--ug-leading) * 0.25);
+  }
+
+  &__input:invalid,
+  &__textarea:invalid,
+  &__select:invalid {
+    border-color: $ug-red;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Inline form (horizontal layout)
+  &--inline {
+    display: flex;
+    align-items: flex-end;
+    gap: calc(var(--ug-leading) * 0.5);
+    flex-wrap: wrap;
+
+    .ug-form__group {
+      margin-bottom: 0;
+    }
+
+    .ug-form__input,
+    .ug-form__select {
+      width: auto;
+    }
+  }
+
+  // Disabled state
+  &--disabled,
+  &__input:disabled,
+  &__select:disabled,
+  &__textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}

package/src/scss/_grid.scss

@@ -0,0 +1,114 @@
+// ==========================================================================
+// Unigrid CSS Framework — Grid System (BEM)
+//
+// Block: .ug-grid
+// Elements: (children use .ug-grid__col-{n})
+// Modifiers: --no-gap, --dense, --rows
+// ==========================================================================
+
+// ---- Grid Block ----
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-grid {
+  display: grid;
+  grid-template-columns: repeat($ug-columns, 1fr);
+  gap: var(--ug-leading);
+  width: 100%;
+
+  // -- Modifiers --
+  &--no-gap {
+    gap: 0;
+  }
+
+  &--dense {
+    grid-auto-flow: dense;
+  }
+
+  &--rows {
+    grid-template-rows: repeat($ug-rows, 1fr);
+  }
+}
+
+// ---- Column Spans ----
+// .ug-col--{1-12}
+
+@for $i from 1 through $ug-columns {
+  .ug-col--#{$i} {
+    grid-column: span $i;
+  }
+}
+
+// ---- Column Start Positions ----
+// .ug-col--start-{1-12}
+
+@for $i from 1 through $ug-columns {
+  .ug-col--start-#{$i} {
+    grid-column-start: $i;
+  }
+}
+
+// ---- Row Spans ----
+// .ug-row--{1-10}
+
+@for $i from 1 through 10 {
+  .ug-row--#{$i} {
+    grid-row: span $i;
+  }
+}
+
+// ---- Row Start Positions ----
+// .ug-row--start-{1-10}
+
+@for $i from 1 through 10 {
+  .ug-row--start-#{$i} {
+    grid-row-start: $i;
+  }
+}
+
+// ---- Subgrid ----
+
+.ug-subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+
+  &--rows {
+    grid-template-rows: subgrid;
+  }
+}
+
+// ---- Responsive Column Spans ----
+// .ug-col--{bp}-{1-12}
+
+@each $bp-name, $bp-value in $ug-breakpoints {
+  @media (min-width: $bp-value) {
+    @for $i from 1 through $ug-columns {
+      .ug-col--#{$bp-name}-#{$i} {
+        grid-column: span $i;
+      }
+    }
+  }
+}
+
+// ---- Alignment Utilities ----
+
+.ug-align {
+  &--start { align-self: start; }
+  &--center { align-self: center; }
+  &--end { align-self: end; }
+  &--stretch { align-self: stretch; }
+}
+
+.ug-justify {
+  &--start { justify-self: start; }
+  &--center { justify-self: center; }
+  &--end { justify-self: end; }
+  &--stretch { justify-self: stretch; }
+}
+
+.ug-place--center {
+  align-self: center;
+  justify-self: center;
+}

package/src/scss/_header.scss

@@ -0,0 +1,169 @@
+// ==========================================================================
+// Unigrid CSS Framework — Header Bar (BEM)
+//
+// The signature black header band spanning the full broadside width.
+// Can embed a .ug-navbar inside for an integrated header+nav layout.
+//
+// Block: .ug-header
+// Elements: __logo, __title, __name, __subtitle, __nav
+// Modifiers: --compact, --brown, --full
+// ==========================================================================
+
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ug-leading);
+  background-color: $ug-black;
+  color: $ug-white;
+  padding: var(--ug-leading) calc(var(--ug-leading) * 1.5);
+  width: 100%;
+  grid-column: 1 / -1;
+  flex-wrap: wrap;
+
+  // -- Elements --
+  &__logo {
+    height: calc(var(--ug-leading) * 3);
+    flex-shrink: 0;
+
+    img,
+    svg {
+      height: 100%;
+      width: auto;
+    }
+  }
+
+  &__title {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    flex-shrink: 0;
+
+    h1, a {
+      @include ug-font-size("3xl");
+      @include ug-font-weight("bold");
+      @include ug-rhythm-line-height(2);
+      letter-spacing: -0.02em;
+      text-transform: none;
+      margin: 0;
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &__name {
+    @include ug-font-size("3xl");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(2);
+    letter-spacing: -0.02em;
+    margin: 0;
+    flex-shrink: 0;
+  }
+
+  &__subtitle {
+    @include ug-font-size("lg");
+    @include ug-font-weight("light");
+    @include ug-rhythm-line-height(1);
+    opacity: 0.85;
+    margin: 0;
+  }
+
+  // -- Embedded Navbar --
+  .ug-navbar {
+    flex: 1;
+    background: transparent;
+    border: none;
+    min-height: 0;
+
+    &__inner {
+      padding: 0;
+      max-width: none;
+      min-height: 0;
+      justify-content: flex-end;
+      align-items: flex-start;
+    }
+
+    &__brand {
+      display: none;
+    }
+
+    &__link {
+      color: rgba(255, 255, 255, 0.7);
+
+      &:hover {
+        color: $ug-white;
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      &--active {
+        color: $ug-white;
+      }
+    }
+
+    &__toggle {
+      color: $ug-white;
+    }
+
+    &__divider {
+      background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    &__menu {
+      @include ug-breakpoint-down("md") {
+        background-color: $ug-black;
+      }
+    }
+  }
+
+  // -- Modifiers --
+  &--compact {
+    padding: calc(var(--ug-leading) * 0.5) calc(var(--ug-leading) * 1.5);
+
+    .ug-header__logo {
+      width: auto;
+      height: calc(var(--ug-leading) * 2);
+    }
+
+    .ug-header__title h1,
+    .ug-header__title a,
+    .ug-header__name {
+      @include ug-font-size("2xl");
+      @include ug-rhythm-line-height(1);
+    }
+
+    .ug-header__subtitle {
+      @include ug-font-size("sm");
+      @include ug-rhythm-line-height(1);
+    }
+  }
+
+  &--brown {
+    background-color: $ug-brown;
+  }
+
+  &--full {
+    grid-column: 1 / -1;
+  }
+
+  // -- Responsive --
+  @include ug-breakpoint-down("md") {
+    &__title h1,
+    &__title a,
+    &__name {
+      @include ug-font-size("2xl");
+    }
+
+    &__subtitle {
+      @include ug-font-size("base");
+    }
+
+    &__logo {
+      width: 2.5rem;
+    }
+  }
+}