breakouts 0.0.7 → 0.0.9

package/README.md

@@ -14,6 +14,14 @@ It provides utilities for containers, full-bleed sections, breakout content, and
 npm install breakouts
 ```
 
+In your SCSS entry point:
+
+```scss
+@use 'breakouts' as *;
+```
+
+Note: breakouts automatically forwards all core modules from src/index.scss. You can also import individual modules as needed for tree-shaking.
+
 ## 📦 Framework Structure
 
 Breakouts includes a small set of layout-focused utility classes to help you build responsive and consistent page structures.

package/dist/breakouts.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/theme/_colors.scss","../src/base/_reset.scss","../src/base/_typography.scss","../src/layout/_container.scss","../src/layout/_full-bleed.scss","../src/layout/_breakouts.scss","../src/layout/_grid.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;IACI;IACA;IACA;IACA;IACA;IACA;;;AAKR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;ACxEJ;AACA;AAAA;AAAA;EAGI;EACA;EACA;;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;ACJJ;EACI,aAde;EAef,WAba;EAcb,aAbe;EAcf;EACA;EACA;;;AAMA;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AALJ;EACI,WApBG;EAqBH;EACA;EACA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;;AAEA;EACI;;;AC9CR;EACI;EACA;EACA;;;ACHJ;EACI;EACA;EACA;;;ACHJ;EACI;EACA;;;ACFJ;EACI;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA,uBACI;EACJ;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;;;AAIR;EACI","file":"breakouts.css"}

package/dist/breakouts.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/theme/_colors.scss","../src/base/_reset.scss","../src/base/_typography.scss","../src/layout/_container.scss","../src/layout/_full-bleed.scss","../src/layout/_breakouts.scss","../src/layout/_grid.scss"],"names":[],"mappings":"AAGA,MACI,4BACA,yBACA,sBACA,uBACA,yBACA,2BAIJ,kBAEI,4BACA,yBACA,sBACA,uBACA,yBACA,2BAIJ,oBAEI,4BACA,yBACA,sBACA,uBACA,yBACA,2BAIJ,mCACI,6BACI,4BACA,yBACA,sBACA,uBACA,yBACA,4BAKR,eACI,yCAGJ,YACI,sCAGJ,YACI,sCAGJ,cACI,wCAGJ,WACI,wBAGJ,iBACI,8BAGJ,YACI,yBCvEJ,qBAGI,sBACA,SACA,UAGJ,UAEI,SACA,UACA,WACA,kBAGJ,KACI,aACA,iCACA,gBCJJ,KACI,YAde,qBAef,UAba,KAcb,YAbe,IAcf,wBACA,yCACA,SAMA,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,OAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,QAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,SAqBH,gBACA,mBACA,gBACA,wBALJ,GACI,UApBG,KAqBH,gBACA,mBACA,gBACA,wBAIR,EACI,cAGJ,EACI,2BACA,0BAEA,QACI,6BC9CR,WACI,mBACA,gBACA,oBCHJ,YACI,YACA,gBACA,2BCHJ,UACI,YACA,sCCFJ,MACI,8BACA,gCACA,2BACA,0BACA,4CAIJ,gBACI,aACA,sBACI,iNACJ,eAGJ,SACI,oBAGJ,QACI,mBAGJ,SACI,oBAGJ,MACI,iBAIJ,MACI,aACA,2EACA,eAEA,QACI,cAIR,cACI","file":"breakouts.min.css"}

package/package.json

@@ -1,11 +1,12 @@
 {
     "name": "breakouts",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "description": "A personal SCSS/CSS layout utility framework.",
     "main": "dist/breakouts.css",
     "files": [
-        "dist/breakouts.css",
-        "dist/breakouts.min.css"
+        "breakouts.scss",
+        "src/",
+        "dist/"
     ],
     "scripts": {
         "build": "sass src/_index.scss dist/breakouts.css --style=expanded && sass src/_index.scss dist/breakouts.min.css --style=compressed && cp dist/breakouts.css docs/breakouts.css",

package/src/_index.scss

@@ -0,0 +1,12 @@
+// Theme and configurable variables
+@forward 'theme/colors';
+
+// Base styles
+@forward 'base/reset';
+@forward 'base/typography';
+
+// Layout utilities
+@forward 'layout/container';
+@forward 'layout/full-bleed';
+@forward 'layout/breakouts';
+@forward 'layout/grid';

package/src/base/_reset.scss

@@ -0,0 +1,22 @@
+/* Basic reset */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    overflow-x: hidden;
+}
+
+body {
+    padding: 2rem;
+    font-family: system-ui, sans-serif;
+    line-height: 1.6;
+}

package/src/base/_typography.scss

@@ -0,0 +1,49 @@
+// src/base/_typography.scss
+
+// Default font settings
+$font-family-base: system-ui,
+sans-serif !default;
+$font-size-base: 1rem !default;
+$line-height-base: 1.6 !default;
+
+// Heading scale
+$headings: (h1: 2.25rem,
+    h2: 1.75rem,
+    h3: 1.5rem,
+    h4: 1.25rem,
+    h5: 1.125rem,
+    h6: 1rem) !default;
+
+body {
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+    color: var(--color-text);
+    background-color: var(--color-background);
+    margin: 0;
+}
+
+// Headings
+@each $heading,
+$size in $headings {
+    #{$heading} {
+        font-size: $size;
+        line-height: 1.2;
+        margin: 2rem 0 1rem;
+        font-weight: 600;
+        color: var(--color-text);
+    }
+}
+
+p {
+    margin: 1rem 0;
+}
+
+a {
+    color: var(--color-primary);
+    text-decoration: underline;
+
+    &:hover {
+        color: var(--color-secondary);
+    }
+}

package/src/breakouts.scss

@@ -0,0 +1 @@
+@forward 'src/index';

package/src/layout/_breakouts.scss

@@ -0,0 +1,4 @@
+.breakout {
+    width: 100vw;
+    margin-left: calc(-1 * (100vw - 100%) / 2);
+}

package/src/layout/_container.scss

@@ -0,0 +1,5 @@
+.container {
+    margin-inline: auto;
+    max-width: 72rem;
+    padding-inline: 1rem;
+}

package/src/layout/_full-bleed.scss

@@ -0,0 +1,5 @@
+.full-bleed {
+    width: 100vw;
+    margin-left: 50%;
+    transform: translateX(-50%);
+}

package/src/layout/_grid.scss

@@ -0,0 +1,46 @@
+:root {
+    --gap: clamp(1rem, 6vw, 3rem);
+    --full: minmax(var(--gap), 1fr);
+    --feature: minmax(0, 5rem);
+    --popout: minmax(0, 2rem);
+    --content: min(50ch, 100% - var(--gap) * 2);
+}
+
+// Breakouts Grid (named lines)
+.breakouts-grid {
+    display: grid;
+    grid-template-columns:
+        [full-start] var(--full) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] var(--full) [full-end];
+    gap: var(--gap);
+}
+
+.content {
+    grid-column: content;
+}
+
+.popout {
+    grid-column: popout;
+}
+
+.feature {
+    grid-column: feature;
+}
+
+.full {
+    grid-column: full;
+}
+
+// Standard Grid (for .grid and .grid--full compatibility)
+.grid {
+    display: grid;
+    grid-template-columns: 1fr minmax(0, var(--container-max-width, 64rem)) 1fr;
+    gap: var(--gap);
+
+    >* {
+        grid-column: 2;
+    }
+}
+
+.grid--full>* {
+    grid-column: 1 / -1;
+}

package/src/theme/_colors.scss

@@ -0,0 +1,74 @@
+// src/theme/_colors.scss
+
+// Default (light mode)
+:root {
+    --color-background: #ffffff;
+    --color-surface: #f0f0f0;
+    --color-text: #111111;
+    --color-muted: #666666;
+    --color-primary: #0055ff;
+    --color-secondary: #0033aa;
+}
+
+// Forced dark mode
+.dark,
+.dark :root {
+    --color-background: #111111;
+    --color-surface: #1a1a1a;
+    --color-text: #eeeeee;
+    --color-muted: #aaaaaa;
+    --color-primary: #88b0ff;
+    --color-secondary: #cdd9ff;
+}
+
+// Forced light mode
+.light,
+.light :root {
+    --color-background: #ffffff;
+    --color-surface: #f0f0f0;
+    --color-text: #111111;
+    --color-muted: #666666;
+    --color-primary: #0055ff;
+    --color-secondary: #0033aa;
+}
+
+// Automatic dark mode (only if not forcing)
+@media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+        --color-background: #111111;
+        --color-surface: #1a1a1a;
+        --color-text: #eeeeee;
+        --color-muted: #aaaaaa;
+        --color-primary: #88b0ff;
+        --color-secondary: #cdd9ff;
+    }
+}
+
+// Utility classes
+.bg-background {
+    background-color: var(--color-background);
+}
+
+.bg-surface {
+    background-color: var(--color-surface);
+}
+
+.bg-primary {
+    background-color: var(--color-primary);
+}
+
+.bg-secondary {
+    background-color: var(--color-secondary);
+}
+
+.text-text {
+    color: var(--color-text);
+}
+
+.text-background {
+    color: var(--color-background);
+}
+
+.text-muted {
+    color: var(--color-muted);
+}