Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(grid): add CSS Grid Experiment #7851

Merged
merged 25 commits into from
Mar 18, 2021
Merged

feat(grid): add CSS Grid Experiment #7851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
7af42a6
chore: check-in work
joshblack Feb 18, 2021
dc50eb5
chore: check-in work
joshblack Feb 19, 2021
0d28a80
chore: check-in work
joshblack Feb 19, 2021
21ef342
Merge branch 'master' into experiment/add-css-grid
joshblack Feb 19, 2021
dace3f9
chore: check-in work
joshblack Feb 19, 2021
22a0395
Merge branch 'experiment/add-css-grid' of github.com:joshblack/carbon…
joshblack Feb 19, 2021
45900e0
feat(grid): add gutter helpers for css grid
joshblack Feb 23, 2021
0f35660
Merge branch 'master' into experiment/add-css-grid
joshblack Mar 1, 2021
38c9982
feat(cssgrid): support mixing modes with subgrid, add layout examples
tay1orjones Mar 8, 2021
4cccd8c
Merge branch 'experiment/add-css-grid' of https://github.com/joshblac…
tay1orjones Mar 8, 2021
2201614
Merge branch 'main' into experiment/add-css-grid
tay1orjones Mar 8, 2021
b3aa9fe
Merge branch 'main' into experiment/add-css-grid
joshblack Mar 9, 2021
a81b182
fix(cssgrid): add condensed grid vertical guttering with row-gap
tay1orjones Mar 9, 2021
ef15eef
fix(grid): add build command for css-grid example
tay1orjones Mar 16, 2021
e997818
fix(grid): correct build output directory
tay1orjones Mar 16, 2021
243778e
Merge branch 'main' into experiment/add-css-grid
tay1orjones Mar 16, 2021
9932c30
fix(grid): css grid examples static build and directory output
tay1orjones Mar 16, 2021
376d01a
Merge branch 'experiment/add-css-grid' of https://github.com/joshblac…
tay1orjones Mar 16, 2021
71e7d6e
fix(examples): check for .DS_Store
tay1orjones Mar 17, 2021
da43ac7
chore(grid): remove yarn install state
joshblack Mar 17, 2021
4080f84
chore(grid): add gitignore for yarn install files
joshblack Mar 17, 2021
9107290
Merge branch 'main' into experiment/add-css-grid
joshblack Mar 17, 2021
33af8e7
chore(grid): update example base path
joshblack Mar 17, 2021
b1ce112
fix(cssgrid): correct the margin for narrow grid on small screens
tay1orjones Mar 18, 2021
89fc252
Merge branch 'main' into experiment/add-css-grid
tay1orjones Mar 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/grid/examples/css-grid/.yarn/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# https://yarnpkg.com/advanced/qa#which-files-should-be-gitignored
build-state.yml
install-state.gz

2 changes: 2 additions & 0 deletions packages/grid/examples/css-grid/.yarnrc.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
enableGlobalCache: true
nodeLinker: node-modules
1 change: 1 addition & 0 deletions packages/grid/examples/css-grid/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# css-grid
11 changes: 11 additions & 0 deletions packages/grid/examples/css-grid/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
const { PHASE_PRODUCTION_BUILD } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
if (phase === PHASE_PRODUCTION_BUILD) {
return {
basePath: '/grid/examples/css-grid',
}
}

return defaultConfig;
}
18 changes: 18 additions & 0 deletions packages/grid/examples/css-grid/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"name": "grid-examples-css-grid",
"private": true,
"scripts": {
"develop": "next",
"build": "next build && next export -o build"
},
"dependencies": {
"@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",
"sass": "^1.32.7"
}
}
13 changes: 13 additions & 0 deletions packages/grid/examples/css-grid/src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Link from 'next/link';

export function Header({ children, ...rest }) {
return <header {...rest} className="cds-header bx--align-items-center">{children}</header>;
}

export function HeaderLabel({ children, ...rest }) {
return (
<Link {...rest} href="/">
<a className="bx--col-span-2 cds-header-label">{children}</a>
</Link>
);
}
5 changes: 5 additions & 0 deletions packages/grid/examples/css-grid/src/pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import '../styles.scss';

export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
172 changes: 172 additions & 0 deletions packages/grid/examples/css-grid/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
export default function IndexPage() {
return (
<>
<h1>CSS Grid Demo</h1>
<section>
<h2>CSS Grid</h2>
<article className="example">
<div className="bx--css-grid">
<div className="content">
Span 1
</div>
<div className="content bx--col-span-2">
Span 2
</div>
<div className="content">
Span 1
</div>
<div className="content">
Span 1
</div>
</div>
</article>
</section>
<section>
<h2>Responsive</h2>
</section>
<article className="example">
<div className="bx--css-grid">
<div className="content bx--col-span-1 bx--md:col-span-2 bx--lg:col-span-4">25%</div>
<div className="content bx--col-span-1 bx--md:col-span-2 bx--lg:col-span-4">25%</div>
<div className="content bx--col-span-1 bx--md:col-span-2 bx--lg:col-span-4">25%</div>
<div className="content bx--col-span-1 bx--md:col-span-2 bx--lg:col-span-4">25%</div>
<div className="content bx--col-span-4 bx--md:col-span-6 bx--lg:col-span-12 bx--xlg:col-span-10 bx--max:col-span-8">
Responsive
</div>
</div>
</article>
<section>
<h2>Offset</h2>
<article className="example">
<div className="bx--css-grid">
<div className="content bx--col-start-8">Start 8</div>
<div className="content bx--col-start-7 bx--col-span-2">Start 7</div>
<div className="content bx--col-start-6 bx--col-span-3">Start 6</div>
<div className="content bx--col-start-5 bx--col-span-4">Start 5</div>
<div className="content bx--col-start-4 bx--col-span-5">Start 4</div>
<div className="content bx--col-start-3 bx--col-span-6">Start 3</div>
<div className="content bx--col-start-2 bx--col-span-7">Start 2</div>
<div className="content bx--col-start-1 bx--col-span-8">Start 1</div>
<div className="content bx--col-start-4 bx--col-end-7">
Start 4, End 7
</div>
</div>
</article>
</section>
<section>
<h2>Gap (condensed, narrow, no gutters)</h2>
<article className="example">
<div className="bx--css-grid bx--css-grid--condensed">
<div className="content">
Span 1
</div>
<div className="content bx--col-span-2">
Span 2
</div>
<div className="content">
Span 1
</div>
<div className="content">
Span 1
</div>
</div>
</article>
<article className="example">
<div className="bx--css-grid bx--css-grid--narrow">
<div className="content bx--col-span-1">
Span 1
</div>
<div className="content bx--col-span-2">
Span 2
</div>
<div className="content bx--col-span-1">
Span 1
</div>
<div className="content bx--col-span-1">
Span 1
</div>
</div>
</article>
<article className="example">
<div className="bx--css-grid bx--css-grid--no-gutter">
<div className="content">
Span 1
</div>
<div className="content bx--col-span-2">
Span 2
</div>
<div className="content">
Span 1
</div>
<div className="content">
Span 1
</div>
</div>
</article>
</section>
<section>
<h2>Gutter helpers</h2>
<article className="example">
<div className="bx--css-grid bx--css-grid--no-gutter">
<div className="content bx--gutter-start">
Span 1
</div>
<div className="content bx--col-span-2 bx--gutter-end">
Span 2
</div>
<div className="content bx--gutter-start">
Span 1
</div>
<div className="content bx--gutter-end">
Span 1
</div>
</div>
</article>
</section>
<section>
<h2>Subgrid</h2>
<div className="example">
<div className="bx--css-grid">
<div className="bx--col-span-75 bx--subgrid">
</div>
<div className="content bx--col-span-25">
25%
</div>
</div>
</div>
</section>
<section>
<h2>Relative</h2>
<div className="example">
<div className="bx--css-grid">
<div className="bx--col-span-100">
<div className="content">100%</div>
</div>
<div className="bx--col-span-75">
<div className="content">75%</div>
</div>
<div className="bx--col-span-25">
<div className="content">25%</div>
</div>
</div>
<div className="bx--css-grid">
<div className="bx--col-span-50">
<div className="content">50%</div>
</div>
<div className="bx--col-span-50">
<div className="content">50%</div>
</div>
</div>
<div className="bx--css-grid">
<div className="bx--col-span-25">
<div className="content">25%</div>
</div>
<div className="bx--col-span-75">
<div className="content">75%</div>
</div>
</div>
</div>
</section>
</>
);
}
Loading