diff --git a/packages/grid/README.md b/packages/grid/README.md index 904daf7340ed..397187405ff4 100644 --- a/packages/grid/README.md +++ b/packages/grid/README.md @@ -70,6 +70,71 @@ The `.bx--col-sm-1` class names tells us that this `
` should only span one column at our `sm` breakpoint. By default, as we scale beyond the breakpoint the layout will still take up a percentage of the overall width. +## Experimental CSS Grid Usage + +_More examples and documentation can be found on this +[live demo website](https://carbon-elements.netlify.com/grid/examples/css-grid/)._ + +There is an experimental implementation of the Grid built using CSS Grid instead +of flexbox. This implementation ships with a 16 column grid. + +`@carbon/grid` has two primitive class types to use in order to structure your +application. They include: + +- `.#{$prefix}--css-grid` - defines the overall grid context and sets some + useful attributes like width and margin +- `.#{$prefix}--col-span-*` - used to define individual columns + +You can use a combination of these classes to build a layout. For example, if we +wanted a 4 column layout we could use the following markup: + +```html +
+
+
+
+
+
+``` + +While this layout can work for some grid usage scenarios, we probably will want +more control over how many columns our layout will span at each given +breakpoint. + +By default, this uses the breakpoints defined in `@carbon/grid`. There are five +breakpoints: `sm`, `md`, `lg`, `xlg`, and `max`. You can use each one in +combination with a column to specify the number of columns to span at a given +breakpoint. For example, if we wanted four columns to change widths or be hidden +at various breakpoints we could use the following markup: + +```html +
+
+

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 6 of 16

+
+
+

Small: Span 2 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

+
+
+

Small: Span 0 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

+
+
+

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 4 of 16

+
+
+``` + +The `.cds--sm:col-span-2` class names tells us that this `
` should only +span two columns at our `sm` breakpoint. + ## 📚 Examples If you're looking for more examples on how to use `@carbon/grid`, we have some diff --git a/packages/grid/examples/css-grid/.yarn/install-state.gz b/packages/grid/examples/css-grid/.yarn/install-state.gz index 29d82e4aa782..bea3c38e3654 100644 Binary files a/packages/grid/examples/css-grid/.yarn/install-state.gz and b/packages/grid/examples/css-grid/.yarn/install-state.gz differ diff --git a/packages/grid/examples/css-grid/package.json b/packages/grid/examples/css-grid/package.json index bfbf08cdcd38..ad132b2cec5d 100644 --- a/packages/grid/examples/css-grid/package.json +++ b/packages/grid/examples/css-grid/package.json @@ -9,7 +9,6 @@ "@carbon/colors": "link:../../../colors", "@carbon/grid": "link:../../", "carbon-components": "link:../../../components", - "carbon-components-react": "link:../../../react", "next": "^10.0.7", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/packages/grid/examples/css-grid/src/pages/index.js b/packages/grid/examples/css-grid/src/pages/index.js index c2fc57f6299a..38c4d4b7105a 100644 --- a/packages/grid/examples/css-grid/src/pages/index.js +++ b/packages/grid/examples/css-grid/src/pages/index.js @@ -1,172 +1,177 @@ export default function IndexPage() { return ( <> -

CSS Grid Demo

+

Experimental CSS Grid

-

CSS Grid

-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
-
-
+

Wide

+
+
+
+
+
+
+
-

Responsive

+

Narrow

+
+
+
+
+
+
-
-
-
25%
-
25%
-
25%
-
25%
-
- Responsive -
+ +
+

Condensed

+
+
+
+
+
-
+ +
-

Offset

-
-
-
Start 8
-
Start 7
-
Start 6
-
Start 5
-
Start 4
-
Start 3
-
Start 2
-
Start 1
-
- Start 4, End 7 -
-
-
+

Full Width

+
+
+
+
+
+
+
-

Gap (condensed, narrow, no gutters)

-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+

Responsive

+
+
+

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 6 of 16

-
-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+
+

Small: Span 2 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

-
-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+
+

Small: Span 0 of 4

+

Medium: Span 2 of 8

+

Large: Span 3 of 16

-
-
-
-

Gutter helpers

-
-
-
- Span 1 -
-
- Span 2 -
-
- Span 1 -
-
- Span 1 -
+
+

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 4 of 16

-
+
+

Subgrid

-
-
-
-
-
- 25% +
+
+

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 3 of 16

+
+
+

Small: Span 2 of 4

+

Medium: Span 4 of 8

+

Large: Span 10 of 16

+
+
+

sm=1

md=1

lg=2

+
+
+

sm=1

md=1

lg=2

+
+
+

sm=0

md=1

lg=1

+
+
+

sm=0

md=1

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

sm=0

md=0

lg=1

+
+
+

Small: Span 0 of 4

+

Medium: Span 0 of 8

+

Large: Span 3 of 16

+
+
-

Relative

-
-
-
-
100%
-
-
-
75%
-
-
-
25%
+

Mixed Grid Modes

+
+
+
+
+

narrow

+
-
-
-
50%
-
-
-
50%
+
+
+
+

condensed

+
-
-
-
25%
+
+
+
+

condensed

+
-
-
75%
+
+
+
+
+

narrow

+
+ +
+

Offset

+
+
+
+
+
+
+
+ +
+

Auto Columns

+
+
+
+
+
+
+
+
+
+
+
); } diff --git a/packages/grid/examples/css-grid/src/pages/layouts.js b/packages/grid/examples/css-grid/src/pages/layouts.js deleted file mode 100644 index a4b8219e36c9..000000000000 --- a/packages/grid/examples/css-grid/src/pages/layouts.js +++ /dev/null @@ -1,259 +0,0 @@ -import Head from 'next/head'; - -export default function LayoutsPage() { - return ( -
- - - - -

Grid Layout Examples

-

Below are some simple examples intended to be an entrypoint into using the Carbon CSS Grid

- -

Wide (default)

-
-
-
-

Title

-
-
-

Title

-
-
-

Title

-
-
-

Title

-
-
-
- -

Wide (12 column)

-
-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-
- -

Narrow

-
-
- {/* - All columns get a negative margin, a 'hang by default', placing the left edge of the container in the gutter. - Text must manually be given an additional .bx--gutter-start class applying padding-left to align text the column definition. - Container elements should have padding built in (like Tile) so that type aligns as expected. - */} -
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-
- -

Condensed

-
-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
-

Some text

-
-
- {/* The row-gap property provides consistent vertical guttering */} -
-
- {/* The row-gap property provides consistent vertical guttering */} -
-
-
- -

Wide parent grid, Wide & Narrow children subgrids

-
-
-
-

Wide

-
-
-
-

Narrow

-
-
-
-
- -

Wide parent grid, Wide & Condensed children subgrids

-
-
-
-

Wide

-
-
-
-

Condensed

-
-
-
-
- - -

Wide parent grid, Narrow & Condensed children subgrids

-
-
-
-
-

Narrow

-
-
-
-
-

Condensed

-
-
-
-
-

Condensed

-
-
-
-
-

Narrow

-
-
-
-
- - -

Narrow parent grid, Wide & Condensed children subgrids

-
-
-
-
-

Wide subgrid

-
-
-
-
-

Condensed subgrid

-
-
-
-
-

Condensed subgrid

-
-
-
-
-

Wide subgrid

-
-
-
-
- -

Condensed parent grid, Narrow & Wide children subgrids

-
-
-
-
-

Narrow subgrid

-
-
-
-
-

Wide subgrid

-
-
-
-
-

Wide subgrid

-
-
-
-
-

Narrow subgrid

-
-
-
-
- -

How deep can we nest?

-
-
- -
-
-

50% width subgrid configured with col-span-percent classes (This can only have 2 subgrids. grid -> subgrid -> subgrid)

-
-

50% second level subgrid

-

50% second level subgrid

-
-
-
- -
-
-

8 column subgrid, configured with col-span classes

-
-
second subgrid, 2 columns wide
-
second subgrid, 2 columns wide
-
- -
-
-

second subgrid, 8 columns wide

-
-
-

third subgrid, 4 columns wide

-
-
fourth subgrid
-
-
-
-
-
-
-
-
-
-
- Technically, infinitely -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ); -} diff --git a/packages/grid/examples/css-grid/src/scss/_reset.scss b/packages/grid/examples/css-grid/src/scss/_reset.scss index 5d3cfbdef6c5..905dcdb2dd54 100644 --- a/packages/grid/examples/css-grid/src/scss/_reset.scss +++ b/packages/grid/examples/css-grid/src/scss/_reset.scss @@ -20,5 +20,7 @@ html, body { body { margin: 0; + font-family: 'IBM Plex Mono', monospace; + padding: 1rem; } diff --git a/packages/grid/examples/css-grid/src/styles.scss b/packages/grid/examples/css-grid/src/styles.scss index 50ebde1ad956..53c3d9bc7f30 100644 --- a/packages/grid/examples/css-grid/src/styles.scss +++ b/packages/grid/examples/css-grid/src/styles.scss @@ -11,50 +11,48 @@ @import '@carbon/layout/scss/spacing'; @import '@carbon/type/scss/styles'; -.example > .bx--css-grid, -.example > .bx--css-grid--12 { - // background-color: #d0e2ff; - border: 1px dashed black; -} +@import '~carbon-components/scss/globals/scss/vars'; -.example .bx--subgrid, -.subgrid { - background-color: rgba(#ffe056, 0.25); - outline: 1px solid #ffe056; +// Grid +.bx--css-grid { + background-color: $blue-20; + outline: 1px dashed $blue-40; } -.example .content, -.column { - background-color: #edf4ff; - outline: 1px solid #a6c8ff; +.bx--css-grid.bx--css-grid--narrow { + background-color: $teal-20; + outline: 1px dashed $teal-40; } -.example .content { - min-height: 80px; +.bx--css-grid.bx--css-grid--condensed { + background-color: $purple-20; + outline: 1px dashed $purple-40; } -h2, h3, p { - $heading-spacing: $carbon--layout-01; +// Only use background for subgrid example, not other subgrids in "mixed modes" example or others +.bx--subgrid.example { + background-color: $green-20; +} - margin-top: $heading-spacing; - margin-bottom: $heading-spacing; +// Columns +.bx--css-grid > [class*='col'], +.bx--subgrid > [class*='col'] { + min-height: 80px; } -h2 { - @include carbon--type-style($name: productive-heading-03); +.bx--css-grid > [class*='col'] { + background: $blue-10; } -h3 { - @include carbon--type-style($name: productive-heading-01); +.bx--subgrid > [class*='col'] { + background: $green-10; + outline: 1px dashed $green-30; } -p { - @include carbon--type-style($name: body-short-02); +.bx--css-grid.bx--css-grid--narrow > [class*='col'] { + background: $teal-10; } -.content-focused { - display: grid; - grid-template-columns: max-content 1fr; - grid-column-gap: var(--cds-grid-gutter); - grid-row-gap: var(--cds-grid-margin); +.bx--css-grid.bx--css-grid--condensed > [class*='col'] { + background: $purple-10; } \ No newline at end of file diff --git a/packages/grid/examples/css-grid/yarn.lock b/packages/grid/examples/css-grid/yarn.lock index 76aa8aadfbf9..d85f32ae7b3c 100644 --- a/packages/grid/examples/css-grid/yarn.lock +++ b/packages/grid/examples/css-grid/yarn.lock @@ -562,12 +562,6 @@ __metadata: languageName: node linkType: hard -"carbon-components-react@link:../../../react::locator=grid-examples-css-grid%40workspace%3A.": - version: 0.0.0-use.local - resolution: "carbon-components-react@link:../../../react::locator=grid-examples-css-grid%40workspace%3A." - languageName: node - linkType: soft - "carbon-components@link:../../../components::locator=grid-examples-css-grid%40workspace%3A.": version: 0.0.0-use.local resolution: "carbon-components@link:../../../components::locator=grid-examples-css-grid%40workspace%3A." @@ -1268,7 +1262,6 @@ fsevents@~2.3.1: "@carbon/colors": "link:../../../colors" "@carbon/grid": "link:../../" carbon-components: "link:../../../components" - carbon-components-react: "link:../../../react" next: ^10.0.7 react: ^17.0.1 react-dom: ^17.0.1 diff --git a/packages/grid/examples/preview/.yarn/install-state.gz b/packages/grid/examples/preview/.yarn/install-state.gz new file mode 100644 index 000000000000..42aa909bd82b Binary files /dev/null and b/packages/grid/examples/preview/.yarn/install-state.gz differ diff --git a/tasks/examples.js b/tasks/examples.js index abff4eae2dd8..448d831da585 100644 --- a/tasks/examples.js +++ b/tasks/examples.js @@ -30,7 +30,6 @@ const IGNORE_EXAMPLE_DIRS = new Set([ 'vue-cli', 'storybook', 'sass-modules', - 'css-grid', ]); /**