@uqds/layout 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,42 @@
+# `@uqds/layout`
+
+> layout component
+
+## Usage
+
+### Installation
+
+With Yarn:
+
+```shell
+yarn add @uqds/layout
+```
+
+With NPM:
+
+```shell
+npm i @uqds/layout
+```
+
+### CSS
+
+Sass:
+
+```scss
+@import "@uqds/layout/src/scss/main.scss";
+```
+
+Postcss:
+
+```css
+@import "@uqds/layout";
+```
+
+---
+
+## Dependency graph
+
+```shell
+@uqds/layout
+├─ @uqds/core
+```

package/dist/css/main.css

@@ -0,0 +1 @@
+html{font-size:100%;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5;color:#2b2a29;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--container-max-width: 1204px;--layout-gap: 2rem;--section-gap: 6rem}@media(max-width: 63.9375rem){:root{--layout-gap: 1.5rem;--section-gap: 4.5rem}}.uq-container{width:100%;max-width:var(--container-max-width);padding-left:var(--layout-gap);padding-right:var(--layout-gap);margin-left:auto;margin-right:auto}.uq-sections{display:flex;flex-direction:column;gap:var(--section-gap)}.uq-sidebar-layout{display:flex;flex-direction:column;gap:var(--section-gap)}@media(min-width: 64rem){.uq-sidebar-layout{display:grid;gap:0;grid-template-columns:261px minmax(32px, 80px) minmax(667px, 1fr)}}.uq-sidebar-layout__sidebar{grid-column:1/span 1}.uq-sidebar-layout__main{grid-column:3/span 1}.uq-card-grid{display:grid;gap:var(--layout-gap);grid-template-columns:repeat(12, 1fr);container-type:inline-size}.uq-card-grid>*{grid-column:auto/span 12}@container (width > 460px){.uq-card-grid--target-2x>*{grid-column:auto/span 6}}@container (width > 460px){.uq-card-grid--target-3x>*{grid-column:auto/span 6}}@container (width > 667px){.uq-card-grid--target-3x>*{grid-column:auto/span 4}}@container (width > 460px){.uq-card-grid--target-4x>*{grid-column:auto/span 6}}@container (width > 667px){.uq-card-grid--target-4x>*{grid-column:auto/span 4}}@container (width > 799px){.uq-card-grid--target-4x>*{grid-column:auto/span 3}}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@uqds/layout",
+  "version": "1.0.0-alpha.1",
+  "description": "Grid CSS",
+  "keywords": [
+    "uqds",
+    "uq",
+    "University of Queensland",
+    "design system",
+    "scss",
+    "sass",
+    "css",
+    "grid"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "University of Queensland",
+    "email": "webservices@uq.edu.au",
+    "url": "https://uq.edu.au"
+  },
+  "homepage": "https://github.com/uq-its-ss/design-system#readme",
+  "license": "ISC",
+  "directories": {
+    "lib": "src"
+  },
+  "files": [
+    "src/*",
+    "dist/*"
+  ],
+  "style": "dist/css/main.css",
+  "scripts": {
+    "prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uq-its-ss/design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/uq-its-ss/design-system/issues"
+  },
+  "dependencies": {
+    "@uqds/core": "^1.1.1"
+  },
+  "gitHead": "ed118d06dc24d9cf7f0a5e9d24b8da30591098b3"
+}

package/src/scss/_card-grid.scss

@@ -0,0 +1,49 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "global" as *;
+
+.uq-card-grid {
+  display: grid;
+  gap: var(--layout-gap);
+  grid-template-columns: repeat(12, 1fr);
+  container-type: inline-size;
+
+  & > * {
+    grid-column: auto / span 12;
+  }
+}
+
+.uq-card-grid--target-2x {
+  & > * {
+    @container (width > #{$card-grid-container-sm}) {
+      grid-column: auto / span 6;
+    }
+  }
+}
+
+.uq-card-grid--target-3x {
+  & > * {
+    @container (width > #{$card-grid-container-sm}) {
+      grid-column: auto / span 6;
+    }
+
+    @container (width > #{$card-grid-container-md}) {
+      grid-column: auto / span 4;
+    }
+  }
+}
+
+.uq-card-grid--target-4x {
+  & > * {
+    @container (width > #{$card-grid-container-sm}) {
+      grid-column: auto / span 6;
+    }
+
+    @container (width > #{$card-grid-container-md}) {
+      grid-column: auto / span 4;
+    }
+
+    @container (width > #{$card-grid-container-lg}) {
+      grid-column: auto / span 3;
+    }
+  }
+}

package/src/scss/_container.scss

@@ -0,0 +1,8 @@
+.uq-container {
+  width: 100%;
+  max-width: var(--container-max-width);
+  padding-left: var(--layout-gap);
+  padding-right: var(--layout-gap);
+  margin-left: auto;
+  margin-right: auto;
+}

package/src/scss/_custom-properties.scss

@@ -0,0 +1,16 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "global" as *;
+
+:root {
+  --container-max-width: #{$container-max-width};
+  --layout-gap: #{core.$space-xl};
+  --section-gap: 6rem;
+}
+
+// Resize custom properties for tablet/mobile.
+@media #{core.$screen-lg-down} {
+  :root {
+    --layout-gap: #{core.$space-l};
+    --section-gap: #{core.$space-uul};
+  }
+}

package/src/scss/_global.scss

@@ -0,0 +1,9 @@
+@use "@uqds/core/src/scss/global" as core;
+
+// The container max-width includes the desktop page gutters.
+$container-max-width: 32px + 1140px + 32px;
+
+// Container query sizes for card-grid.
+$card-grid-container-sm: 460px;
+$card-grid-container-md: 667px;
+$card-grid-container-lg: 799px;

package/src/scss/_sections.scss

@@ -0,0 +1,5 @@
+.uq-sections {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-gap);
+}

package/src/scss/_sidebar-layout.scss

@@ -0,0 +1,21 @@
+@use "@uqds/core/src/scss/global" as core;
+
+.uq-sidebar-layout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--section-gap);
+
+  @media #{core.$screen-lg-up} {
+    display: grid;
+    gap: 0;
+    grid-template-columns: 261px minmax(32px, 80px) minmax(667px, 1fr);
+  }
+}
+
+.uq-sidebar-layout__sidebar {
+  grid-column: 1 / span 1;
+}
+
+.uq-sidebar-layout__main {
+  grid-column: 3 / span 1;
+}

package/src/scss/main.scss

@@ -0,0 +1,5 @@
+@use "custom-properties";
+@use "container";
+@use "sections";
+@use "sidebar-layout";
+@use "card-grid";