Skip to content

Commit c707861

Browse files
runemadsenrunemadsen
committed
examples done
1 parent 7a53b68 commit c707861

28 files changed

+252
-254
lines changed

‎docs/css.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22

33
## Using the grid system
44

5-
The CSS grid system in the website uses flexbox to achieve a 8-column layout, reflecting the 8-column grid in the logo system. It consists of a number of mixins (using PostCSS mixins) and CSS variables.
5+
The CSS grid system in the website uses flexbox to achieve a 8-column layout, reflecting the 8-column grid in the logo system. It consists of two classes and a number of CSS variables.
66

77
To create a column layout:
88

9-
1. Add a class to the parent element and use `@mixin grid;` in the CSS of that class.
10-
2. On the child elements that need to be shown in columns, use `@mixin column` in the same way. You can pass the number of columns that the element should span such as `@mixin column 4` or `@mixin column 7`.
11-
3. Whn you want to change the column widths in responsive designs, use the `var(--col1)` – `var(--col8)` variables. You can also use the mixins for this, but it will add repetitive CSS to the final CSS file and using the variables is encouraged.
9+
1. Import the `grid.module.css` file in your React component and add the `.grid` class to the element that needs to have columns.
10+
2. On the child elements that need to be shown in columns, use the `.col` class alongside a custom class that sets the `flex-basis` property using the CSS variables `var(--col1)` – `var(--col8)`. You can code responsive designs by reassigning the `var(--col1)` – `var(--col8)` variables.
11+
12+
The `.grid` class can be used on either a `.col` element or on a child of a `.col` element for nested grids.

‎src/components/CategoryNav.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import React from 'react';
22
import { Link } from 'gatsby';
3+
import classnames from 'classnames';
34

45
import css from './CategoryNav.module.css';
6+
import grid from '../styles/grid.module.css';
57

68
const CategoryNav = ({ categories }) => {
79
return (
8-
<div className={css.root}>
9-
<h4 className={css.heading}>Shortcuts</h4>
10-
<ul className={css.list}>
10+
<div className={classnames(grid.col, grid.grid, css.root)}>
11+
<h4 className={classnames(grid.col, css.heading)}>Shortcuts</h4>
12+
<ul className={classnames(grid.col, grid.grid, css.list)}>
1113
{categories.map((category, key) => (
12-
<li className={css.item} key={`category-navitem-${key}`}>
14+
<li
15+
className={classnames(grid.col, css.item)}
16+
key={`category-navitem-${key}`}>
1317
<div className={css.line} />
1418
<Link className={css.itemLink} to={`#${category}`}>
1519
{category.replace(/_/g, ' ')}

‎src/components/CategoryNav.module.css

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
.root {
2-
@mixin column;
3-
@mixin nest;
2+
flex-basis: var(--col8);
43
}
54

65
.heading {
7-
@mixin column 6;
6+
flex-basis: var(--col6);
87
margin-top: var(--margin-half);
98
}
109

1110
.list {
11+
flex-basis: var(--col6);
1212
margin: 0;
1313
list-style: none;
14-
@mixin column 6;
15-
@mixin nest;
1614
}
1715

1816
.item {
19-
@mixin column 2;
17+
flex-basis: var(--col2);
2018
display: flex;
2119

2220
& .line {

‎src/components/ExamplesList.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ const ExamplesList = ({ tree }) => {
2323
const sortedTree = useTreeSort(tree, `order`, curated);
2424

2525
return (
26-
<div className={css.root}>
26+
<div className={classnames(grid.col, css.root)}>
2727
{Object.keys(sortedTree).map((category) => (
28-
<div className={css.category} key={`category-${category}`}>
29-
<h2 className={css.categoryName}>{category}</h2>
28+
<div
29+
className={classnames(grid.grid, css.category)}
30+
key={`category-${category}`}>
31+
<h2 className={classnames(grid.col, css.categoryName)}>{category}</h2>
3032
<div className={css.toggleButton}>
3133
<ToggleButton
3234
defaultLabel="A-Z"
@@ -36,15 +38,17 @@ const ExamplesList = ({ tree }) => {
3638
onToggle={handleToggle}
3739
/>
3840
</div>
39-
<p className={css.categoryDescription}>
41+
<p className={classnames(grid.col, css.categoryDescription)}>
4042
{category === 'topic'
4143
? intl.formatMessage({ id: 'topicExamples' })
4244
: intl.formatMessage({ id: 'basicExamples' })}
4345
</p>
4446
{Object.keys(sortedTree[category]).map((subcategory) => (
4547
<Fragment key={`subcategory-${subcategory}`}>
46-
<h3 className={css.subcategoryName}>{subcategory}</h3>
47-
<ul className={css.examples}>
48+
<h3 className={classnames(grid.col, css.subcategoryName)}>
49+
{subcategory}
50+
</h3>
51+
<ul className={classnames(grid.col, grid.grid, css.examples)}>
4852
{sortedTree[category][subcategory].map((item, key) => (
4953
<ExampleItem
5054
node={item}
@@ -63,7 +67,7 @@ const ExamplesList = ({ tree }) => {
6367

6468
export const ExampleItem = memo(({ node, locale }) => {
6569
return (
66-
<li className={grid.col}>
70+
<li className={classnames(grid.col, css.item)}>
6771
<Link to={node.path} language={locale}>
6872
{node.image && (
6973
<Img className={css.cover} fluid={node.image.childImageSharp.fluid} />

‎src/components/ExamplesList.module.css

Lines changed: 24 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,62 @@
11
.root {
2+
flex-basis: var(--col8);
23
}
34

45
.category {
5-
@mixin nestedGrid;
66
& > h2 {
77
text-transform: capitalize;
88
}
99
}
1010

1111
.categoryName {
12-
@mixin column 6;
12+
flex-basis: var(--col6);
13+
margin-bottom: 0;
14+
margin-top: var(--margin-half);
1315
}
1416

1517
.toggleButton {
1618
flex: 0 0 200px;
19+
margin-top: var(--margin-half);
1720
}
1821

1922
.categoryDescription {
20-
@mixin column;
23+
flex-basis: var(--col8);
24+
margin-bottom: var(--margin);
2125
}
2226

2327
.subcategoryName {
24-
@mixin column 1;
28+
flex-basis: var(--col1);
2529
}
2630

2731
.examples {
28-
@mixin column 7;
32+
flex-basis: var(--col7);
2933
}
3034

31-
/* .subcategory {
32-
display: flex;
33-
flex-direction: row;
34-
margin-bottom: 30px;
35+
.cover {
3536
width: 100%;
37+
margin-bottom: 10px;
38+
}
3639

37-
& h3 {
38-
flex-basis: var(--col1);
39-
margin: 0;
40-
border-right: solid 6px var(--lightgray);
41-
font-size: var(--text-medium);
42-
text-transform: capitalize;
43-
}
40+
.item {
41+
flex-basis: calc(100% / 7);
4442

4543
& h4 {
4644
font-size: var(--text-regular);
4745
font-weight: 400;
4846
}
47+
}
4948

50-
& ul {
49+
@media (--reduced) {
50+
.subcategoryName {
5151
flex-basis: var(--col8);
5252
}
5353

54-
& ul > li {
55-
flex-basis: cols(1, 6);
56-
transition: 0.2 ease;
57-
}
58-
59-
& ul > li:hover .cover {
60-
opacity: 0.7;
61-
}
62-
63-
& ul > li:hover h4 {
64-
color: var(--processing-blue-mid);
54+
.examples {
55+
flex-basis: var(--col8);
6556
}
66-
} */
67-
68-
.cover {
69-
width: 100%;
70-
margin-bottom: 10px;
71-
}
7257

73-
@media (--reduced) {
74-
.subcategory {
75-
& h3 {
76-
flex-basis: var(--col2);
77-
}
78-
79-
& ul > li {
80-
flex-basis: var(--col2);
81-
}
58+
.item {
59+
flex-basis: var(--col2);
8260
}
8361
}
8462

@@ -91,22 +69,7 @@
9169
padding-right: var(--gutter);
9270
}
9371

94-
/* .subcategory {
95-
flex-wrap: wrap;
96-
97-
& h3 {
98-
border-right: none;
99-
padding-top: var(--vertical-gutter);
100-
padding-bottom: var(--margin);
101-
flex-basis: var(--col8);
102-
flex-wrap: wrap;
103-
}
104-
105-
& ul > li {
106-
flex-basis: var(--col4);
107-
& img {
108-
min-height: 120px;
109-
}
110-
}
111-
} */
72+
.item {
73+
flex-basis: var(--col3);
74+
}
11275
}

‎src/components/ReferenceItemList.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import classnames from 'classnames';
55

66
import CopyButton from './CopyButton';
77

8-
import grid from '../styles/grid.module.css';
98
import css from './ReferenceItemList.module.css';
9+
import grid from '../styles/grid.module.css';
1010

1111
export const CodeList = memo(
1212
({ items, variant, nameIsHtml, descriptionIsHtml }) => {
@@ -60,15 +60,15 @@ export const ExampleList = memo(({ examples }) => {
6060
<ul className={css.exampleList}>
6161
{examples.map((example, i) => {
6262
return (
63-
<li key={'ex' + i} className={classnames(grid.nest, css.item)}>
64-
<div className={classnames(grid.col, grid.leftBleed, css.code)}>
63+
<li key={'ex' + i} className={classnames(grid.grid, css.item)}>
64+
<div className={classnames(grid.col, css.code)}>
6565
<CopyButton text={example.code} />
6666
<pre>
6767
<code>{example.code}</code>
6868
</pre>
6969
</div>
7070
{example.image && (
71-
<div className={classnames(grid.col, grid.rightBleed, css.image)}>
71+
<div className={classnames(grid.col, css.image)}>
7272
<Img fluid={example.image.childImageSharp.fluid} />
7373
</div>
7474
)}

‎src/components/ReferenceItemList.module.css

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@
3030

3131
.codeList span b,
3232
.codeList span code {
33-
@mixin code;
33+
font-weight: normal;
34+
font-style: normal;
35+
font-family: var(--font-mono);
36+
font-size: 85%;
37+
background-color: var(--lightgray);
38+
padding: 0.1em 0.3em;
39+
border-radius: 6px;
40+
font-variant-ligatures: no-common-ligatures;
3441
}
3542

3643
/* Variant: reference */
@@ -50,10 +57,10 @@
5057
}
5158

5259
.exampleList .code {
53-
flex-basis: cols(4, 6);
60+
flex-basis: calc(100% / 6 * 4);
5461
position: relative;
5562
}
5663

5764
.exampleList .image {
58-
flex-basis: cols(2, 6);
65+
flex-basis: calc(100% / 6 * 2);
5966
}

‎src/components/ReferenceItemSection.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { memo } from 'react';
22
import classnames from 'classnames';
3-
import grid from '../styles/grid.module.css';
3+
44
import css from './ReferenceItemSection.module.css';
5+
import grid from '../styles/grid.module.css';
56

67
const Section = ({ title, children, columns = true }) => {
78
return (
89
<div
9-
className={classnames(grid.nest, css.root, {
10-
[css.columns]: columns,
10+
className={classnames(grid.grid, css.root, {
11+
[css.columns]: columns
1112
})}>
1213
<h4 className={classnames(grid.col, css.title)}>{title}</h4>
1314
<div className={classnames(grid.col, css.content)}>{children}</div>

‎src/components/ReferenceItemSection.module.css

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.root {
2-
flex-basis: cols(6, 6);
2+
flex-basis: 100%;
33
margin-bottom: var(--vertical-gutter);
44
}
55

@@ -10,11 +10,11 @@
1010

1111
.columns .title {
1212
white-space: nowrap;
13-
flex-basis: cols(1, 6);
13+
flex-basis: calc(100% / 6);
1414
}
1515

1616
.columns .content {
17-
flex-basis: cols(5, 6);
17+
flex-basis: calc(100% / 6 * 5);
1818
}
1919

2020
/* Basic styling for the heading and the description */
@@ -33,7 +33,14 @@
3333

3434
.content > p b,
3535
.content > p code {
36-
@mixin code;
36+
font-weight: normal;
37+
font-style: normal;
38+
font-family: var(--font-mono);
39+
font-size: 85%;
40+
background-color: var(--lightgray);
41+
padding: 0.1em 0.3em;
42+
border-radius: 6px;
43+
font-variant-ligatures: no-common-ligatures;
3744
}
3845

3946
@media (--reduced) {

0 commit comments

Comments
 (0)