cacao-css 3.20.0 → 4.0.0

package/imports.css

@@ -0,0 +1,282 @@
+/* =========================================================================== *\
+    Cacao CSS
+    
+    To be included by a project to selectively include modules.
+    
+    Ideally located at "my-project/src/css/main.css".
+    
+    Most imports are commented out by default. You should uncomment
+    modules that your project needs. This keeps the CSS lean and mean.
+\* =========================================================================== */
+
+/* stylelint-disable */
+
+/* Config */
+@import '../../node_modules/cacao-css/src/config.css';
+
+/* Reset */
+@import '../../node_modules/cacao-css/src/reset/reset.css';
+
+/* Base */
+@import '../../node_modules/cacao-css/src/base/base.css';
+
+/* Aspect Ratios */
+@import '../../node_modules/cacao-css/src/aspect/aspect.css';
+
+/* Embed */
+@import '../../node_modules/cacao-css/src/embed/embed.css';
+
+/* Images */
+@import '../../node_modules/cacao-css/src/image/image.css';
+
+/* Fit */
+/* @import '../../node_modules/cacao-css/src/fit/fit.css'; */
+
+/* Links */
+/* @import '../../node_modules/cacao-css/src/links/links.css'; */
+
+/* Spacing */
+/* @import '../../node_modules/cacao-css/src/spacing/spacing.css'; */
+
+/* Size */
+/* @import '../../node_modules/cacao-css/src/size/core/size.css'; */
+
+/* Size (sm) */
+/* @import '../../node_modules/cacao-css/src/size/sm/size.css'; */
+
+/* Size (md) */
+/* @import '../../node_modules/cacao-css/src/size/md/size.css'; */
+
+/* Size (lg) */
+/* @import '../../node_modules/cacao-css/src/size/lg/size.css'; */
+
+/* Size (xl) */
+/* @import '../../node_modules/cacao-css/src/size/xl/size.css'; */
+
+/* Typography */
+/* @import '../../node_modules/cacao-css/src/typography/align.css'; */
+/* @import '../../node_modules/cacao-css/src/typography/transform.css'; */
+/* @import '../../node_modules/cacao-css/src/typography/weight.css'; */
+
+/* Gutter */
+@import '../../node_modules/cacao-css/src/gutter/core/all.css';
+@import '../../node_modules/cacao-css/src/gutter/core/horizontal.css';
+@import '../../node_modules/cacao-css/src/gutter/core/vertical.css';
+
+/* Gutter (sm) */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/sm/vertical.css'; */
+
+/* Gutter (md) */
+/* @import '../../node_modules/cacao-css/src/gutter/md/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/md/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/md/vertical.css'; */
+
+/* Gutter (lg) */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/lg/vertical.css'; */
+
+/* Gutter (xl) */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/all.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/gutter/xl/vertical.css'; */
+
+/* Display */
+/* @import '../../node_modules/cacao-css/src/display/core/align.css'; */
+@import '../../node_modules/cacao-css/src/display/core/display.css';
+/* @import '../../node_modules/cacao-css/src/display/core/flex.css'; */
+/* @import '../../node_modules/cacao-css/src/display/core/justify.css'; */
+/* @import '../../node_modules/cacao-css/src/display/core/order.css'; */
+
+/* Display (sm) */
+/* @import '../../node_modules/cacao-css/src/display/sm/align.css'; */
+/* @import '../../node_modules/cacao-css/src/display/sm/display.css'; */
+/* @import '../../node_modules/cacao-css/src/display/sm/flex.css'; */
+/* @import '../../node_modules/cacao-css/src/display/sm/justify.css'; */
+/* @import '../../node_modules/cacao-css/src/display/sm/order.css'; */
+
+/* Display (md) */
+/* @import '../../node_modules/cacao-css/src/display/md/align.css'; */
+/* @import '../../node_modules/cacao-css/src/display/md/display.css'; */
+/* @import '../../node_modules/cacao-css/src/display/md/flex.css'; */
+/* @import '../../node_modules/cacao-css/src/display/md/justify.css'; */
+/* @import '../../node_modules/cacao-css/src/display/md/order.css'; */
+
+/* Display (lg) */
+/* @import '../../node_modules/cacao-css/src/display/lg/align.css'; */
+/* @import '../../node_modules/cacao-css/src/display/lg/display.css'; */
+/* @import '../../node_modules/cacao-css/src/display/lg/flex.css'; */
+/* @import '../../node_modules/cacao-css/src/display/lg/justify.css'; */
+/* @import '../../node_modules/cacao-css/src/display/lg/order.css'; */
+
+/* Display (xl) */
+/* @import '../../node_modules/cacao-css/src/display/xl/align.css'; */
+/* @import '../../node_modules/cacao-css/src/display/xl/display.css'; */
+/* @import '../../node_modules/cacao-css/src/display/xl/flex.css'; */
+/* @import '../../node_modules/cacao-css/src/display/xl/justify.css'; */
+/* @import '../../node_modules/cacao-css/src/display/xl/order.css'; */
+
+/* Grid */
+@import '../../node_modules/cacao-css/src/grid/grid.css';
+@import '../../node_modules/cacao-css/src/grid/core/col-1.css';
+@import '../../node_modules/cacao-css/src/grid/core/col-2.css';
+/* @import '../../node_modules/cacao-css/src/grid/core/col-3.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-4.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-5.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-6.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-7.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-8.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-9.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-10.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-11.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/core/col-12.css'; */
+
+/* Grid (sm) */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-1.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-2.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-3.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-4.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-5.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-6.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-7.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-8.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-9.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-10.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-11.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/sm/col-12.css'; */
+
+/* Grid (md) */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-1.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-2.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-3.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-4.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-5.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-6.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-7.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-8.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-9.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-10.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-11.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/md/col-12.css'; */
+
+/* Grid (lg) */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-1.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-2.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-3.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-4.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-5.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-6.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-7.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-8.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-9.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-10.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-11.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/lg/col-12.css'; */
+
+/* Grid (xl) */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-1.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-2.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-3.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-4.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-5.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-6.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-7.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-8.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-9.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-10.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-11.css'; */
+/* @import '../../node_modules/cacao-css/src/grid/xl/col-12.css'; */
+
+/* Margin */
+/* @import '../../node_modules/cacao-css/src/margin/core/all.css'; */
+@import '../../node_modules/cacao-css/src/margin/core/bottom.css';
+@import '../../node_modules/cacao-css/src/margin/core/end.css';
+@import '../../node_modules/cacao-css/src/margin/core/horizontal.css';
+@import '../../node_modules/cacao-css/src/margin/core/start.css';
+@import '../../node_modules/cacao-css/src/margin/core/top.css';
+@import '../../node_modules/cacao-css/src/margin/core/vertical.css';
+
+/* Margin (sm) */
+/* @import '../../node_modules/cacao-css/src/margin/sm/all.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/sm/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/sm/end.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/sm/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/sm/start.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/sm/top.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/sm/vertical.css'; */
+
+/* Margin (md) */
+/* @import '../../node_modules/cacao-css/src/margin/md/all.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/md/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/md/end.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/md/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/md/start.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/md/top.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/md/vertical.css'; */
+
+/* Margin (lg) */
+/* @import '../../node_modules/cacao-css/src/margin/lg/all.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/lg/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/lg/end.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/lg/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/lg/start.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/lg/top.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/lg/vertical.css'; */
+
+/* Margin (xl) */
+/* @import '../../node_modules/cacao-css/src/margin/xl/all.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/xl/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/xl/end.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/xl/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/xl/start.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/xl/top.css'; */
+/* @import '../../node_modules/cacao-css/src/margin/xl/vertical.css'; */
+
+/* Padding */
+/* @import '../../node_modules/cacao-css/src/padding/core/all.css'; */
+@import '../../node_modules/cacao-css/src/padding/core/bottom.css';
+@import '../../node_modules/cacao-css/src/padding/core/end.css';
+@import '../../node_modules/cacao-css/src/padding/core/horizontal.css';
+@import '../../node_modules/cacao-css/src/padding/core/start.css';
+@import '../../node_modules/cacao-css/src/padding/core/top.css';
+@import '../../node_modules/cacao-css/src/padding/core/vertical.css';
+
+/* Padding (sm) */
+/* @import '../../node_modules/cacao-css/src/padding/sm/all.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/sm/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/sm/end.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/sm/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/sm/start.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/sm/top.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/sm/vertical.css'; */
+
+/* Padding (md) */
+/* @import '../../node_modules/cacao-css/src/padding/md/all.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/md/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/md/end.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/md/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/md/start.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/md/top.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/md/vertical.css'; */
+
+/* Padding (lg) */
+/* @import '../../node_modules/cacao-css/src/padding/lg/all.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/lg/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/lg/end.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/lg/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/lg/start.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/lg/top.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/lg/vertical.css'; */
+
+/* Padding (xl) */
+/* @import '../../node_modules/cacao-css/src/padding/xl/all.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/xl/bottom.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/xl/end.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/xl/horizontal.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/xl/start.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/xl/top.css'; */
+/* @import '../../node_modules/cacao-css/src/padding/xl/vertical.css'; */
+
+/* stylelint-enable */

package/package.json

@@ -1,8 +1,7 @@
 {
     "name": "cacao-css",
-    "description": "A set of composable CSS modules that provide a solid foundation for starting a new project.",
-    "version": "3.20.0",
-    "main": "gulfile.js",
+    "description": "A set of composable CSS utilities that provide a solid foundation for starting a new project.",
+    "version": "4.0.0",
     "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
     "license": "MIT",
     "repository": {
@@ -10,54 +9,6 @@
         "url": "git://github.com/aptuitiv/cacao.git"
     },
     "copyright": "Aptuitiv, Inc",
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "Explorer >= 8",
-        "Android >= 4.3"
-    ],
-    "devDependencies": {
-        "chalk": "^4.1.0",
-        "del": "^5.1.0",
-        "fancy-log": "^1.3.3",
-        "glob-watcher": "^5.0.5",
-        "gulp": "^4.0.2",
-        "gulp-cached": "^1.1.1",
-        "gulp-changed": "^4.0.2",
-        "gulp-changed-in-place": "^2.3.0",
-        "gulp-clean-css": "^4.3.0",
-        "gulp-concat": "^2.6.1",
-        "gulp-fontello": "^0.5.1",
-        "gulp-header": "^2.0.9",
-        "gulp-image": "^6.2.1",
-        "gulp-load-plugins": "^2.0.4",
-        "gulp-newer": "^1.4.0",
-        "gulp-plumber": "^1.2.1",
-        "gulp-postcss": "^8.0.0",
-        "gulp-remember": "^1.0.1",
-        "gulp-rename": "^2.0.0",
-        "gulp-stylelint": "^13.0.0",
-        "gulp-svgmin": "^3.0.0",
-        "gulp-svgstore": "^7.0.1",
-        "gulp-tap": "^2.0.0",
-        "gulp-uglify": "^3.0.2",
-        "merge-stream": "^2.0.0",
-        "moment": "^2.27.0",
-        "penthouse": "^2.3.1",
-        "postcss-cssnext": "^3.1.0",
-        "postcss-import": "^12.0.1",
-        "require-glob": "^3.2.0",
-        "run-sequence": "^2.2.1",
-        "stylelint-order": "^4.1.0",
-        "stylelint-selector-bem-pattern": "^2.1.0"
-    },
-    "dependencies": {
-        "normalize.css": "^8.0.1"
-    },
-    "scripts": {
-        "start": "gulp",
-        "build": "gulp build"
-    },
     "bugs": {
         "email": "support@aptuitiv.com"
     }

package/src/aspect/aspect.css

@@ -0,0 +1,23 @@
+/* =========================================================================== *\
+    Aspect Ratio Utilities
+\* =========================================================================== */
+
+.aspect-1-1 {
+    aspect-ratio: 1 / 1;
+}
+
+.aspect-2-1 {
+    aspect-ratio: 2 / 1;
+}
+
+.aspect-4-3 {
+    aspect-ratio: 4 / 3;
+}
+
+.aspect-16-9 {
+    aspect-ratio: 16 / 9;
+}
+
+.aspect-21-9 {
+    aspect-ratio: 21 / 9;
+}

package/src/base/base.css

@@ -0,0 +1,44 @@
+/* =========================================================================== *\
+    Reasonable Base Defaults
+\* =========================================================================== */
+
+/**
+ * Add smooth scrolling by default.
+ * Disable it for those who prefer reduced motion
+ * See https://ashleemboyer.com/accessible-smooth-scroll-to-top-buttons-with-little-code
+ */
+
+html {
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+/**
+ * Make all buttons look clickable
+ */
+
+button {
+    cursor: pointer;
+}
+
+/**
+ * Always hide an element with the `hidden` HTML attribute (from PureCSS).
+ */
+
+[hidden] {
+    display: none !important;
+}
+
+/**
+ * Remove the focus outline for mouse uses but preserve for keyboard users with :focus-visible
+ * See https://twitter.com/LeaVerou/status/1045768279753666562
+ * See https://css-tricks.com/the-focus-visible-trick/
+ */
+:focus:not(:focus-visible) {
+    outline: none;
+}

package/src/config.css

@@ -0,0 +1,8 @@
+/* =========================================================================== *\
+    Cacao Configuration
+\* =========================================================================== */
+
+@custom-media --c-bp-sm (min-width: 36em);
+@custom-media --c-bp-md (min-width: 48em);
+@custom-media --c-bp-lg (min-width: 64em);
+@custom-media --c-bp-xl (min-width: 80em);

package/src/display/core/align.css

@@ -0,0 +1,15 @@
+/* =========================================================================== *\
+    Alignment Utilities
+\* =========================================================================== */
+
+.align-start {
+    align-items: flex-start;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.align-end {
+    align-items: flex-end;
+}

package/src/display/core/display.css

@@ -0,0 +1,33 @@
+/* =========================================================================== *\
+    Display Utilities
+\* =========================================================================== */
+
+.flex {
+    display: flex;
+}
+
+.flex-inline {
+    display: inline-flex;
+}
+
+.block {
+    display: block;
+}
+
+.inline {
+    display: inline;
+}
+
+.hidden {
+    display: none;
+}
+
+.visually-hidden {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+}

package/src/display/core/flex.css

@@ -0,0 +1,19 @@
+/* =========================================================================== *\
+    Flexbox Utilities
+\* =========================================================================== */
+
+.flex-row {
+    flex-direction: row;
+}
+
+.flex-reverse {
+    flex-direction: row-reverse;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.flex-col-reverse {
+    flex-direction: column-reverse;
+}

package/src/display/core/justify.css

@@ -0,0 +1,23 @@
+/* =========================================================================== *\
+    Justification Utilities
+\* =========================================================================== */
+
+.justify-start {
+    justify-content: flex-start;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-around {
+    justify-content: space-around;
+}

package/src/display/core/order.css

@@ -0,0 +1,23 @@
+/* =========================================================================== *\
+    Order Utilities
+\* =========================================================================== */
+
+.order-1 {
+    order: 1;
+}
+
+.order-2 {
+    order: 2;
+}
+
+.order-3 {
+    order: 3;
+}
+
+.order-4 {
+    order: 4;
+}
+
+.order-5 {
+    order: 5;
+}

package/src/display/lg/align.css

@@ -0,0 +1,17 @@
+/* =========================================================================== *\
+    Alignment Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .align-start-lg {
+        align-items: flex-start;
+    }
+    
+    .align-center-lg {
+        align-items: center;
+    }
+    
+    .align-end-lg {
+        align-items: flex-end;
+    }
+}

package/src/display/lg/display.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+    Display Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .flex-lg {
+        display: flex;
+    }
+    
+    .flex-inline-lg {
+        display: inline-flex;
+    }
+    
+    .block-lg {
+        display: block;
+    }
+    
+    .inline-lg {
+        display: inline;
+    }
+    
+    .hidden-lg {
+        display: none;
+    }
+}

package/src/display/lg/flex.css

@@ -0,0 +1,21 @@
+/* =========================================================================== *\
+    Flexbox Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .flex-row-lg {
+        flex-direction: row;
+    }
+    
+    .flex-reverse-lg {
+        flex-direction: row-reverse;
+    }
+    
+    .flex-col-lg {
+        flex-direction: column;
+    }
+    
+    .flex-col-reverse-lg {
+        flex-direction: column-reverse;
+    }
+}

package/src/display/lg/justify.css

@@ -0,0 +1,25 @@
+/* =========================================================================== *\
+    Justification Utilities
+\* =========================================================================== */
+
+@media (--c-bp-lg) {
+    .justify-start-lg {
+        justify-content: flex-start;
+    }
+    
+    .justify-center-lg {
+        justify-content: center;
+    }
+    
+    .justify-end-lg {
+        justify-content: flex-end;
+    }
+    
+    .justify-between-lg {
+        justify-content: space-between;
+    }
+    
+    .justify-around-lg {
+        justify-content: space-around;
+    }
+}