Skip to content

Commit f60fd41

Browse files
author
Pascal Thormeier
committed
Add AwesomeAnalytics examples in chapter8.
1 parent 7b3bc28 commit f60fd41

36 files changed

+7604
-1
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
*/node_modules
22
chapter8/01_tailwind/dist/*
33
!chapter8/01_tailwind/dist/.gitkeep
4+
chapter8/AwesomeAnalytics/TailwindBased/assets/css/tailwind_output.css

‎chapter3/AwesomeAnalytics/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"name": "awesomeanalytics",
33
"version": "1.0.0",
44
"description": "Accompanying project for the CSS Grid book",
5-
"main": "index.js",
65
"scripts": {
76
"serve": "node ./node_modules/.bin/serve ."
87
},

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/brand.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
:root {
2+
--color-gray-0: #fff;
3+
--color-gray-1: #eee;
4+
--color-gray-2: #ccc;
5+
--color-gray-3: #999;
6+
--color-gray-4: #666;
7+
--color-gray-5: #333;
8+
--color-gray-6: #181818;
9+
10+
--color-brand-dark: #0008C1;
11+
--color-brand-light: #2146C7;
12+
--color-brand-alt-dark: #E6CBA8;
13+
--color-brand-alt-light: #FDF0E0;
14+
15+
--font-size-base: 16px;
16+
--font-size-xxl: 1.953rem;
17+
--font-size-xl: 1.563rem;
18+
--font-size-l: 1.25rem;
19+
--font-size-m: 1rem;
20+
--font-size-s: 0.8rem;
21+
--font-size-xs: 0.64rem;
22+
23+
--line-height-snug: 1.1;
24+
--line-height-standard: 1.3;
25+
--line-height_relaxed: 1.75;
26+
27+
--spacing-xxl: 64px;
28+
--spacing-xl: 32px;
29+
--spacing-l: 16px;
30+
--spacing-m: 8px;
31+
--spacing-s: 4px;
32+
--spacing-xs: 2px;
33+
34+
--border-standard: 1px solid var(--color-gray-3);
35+
}

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/chartbox.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.chart-box {
2+
background-color: var(--color-gray-0);
3+
border: var(--border-standard);
4+
padding: var(--spacing-l);
5+
6+
min-width: 0;
7+
min-height: 0;
8+
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
.chart-box header {
14+
display: flex;
15+
justify-content: space-between;
16+
text-transform: capitalize
17+
}
18+
19+
.chart-box .chart-container {
20+
margin: var(--spacing-m);
21+
flex: 1 1 1px;
22+
}

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/general.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
html, body {
2+
max-width: 100vw;
3+
}
4+
5+
body {
6+
min-height: 100vh;
7+
}

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/grid.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.body {
2+
display: grid;
3+
4+
grid-template:
5+
"header header " min-content;
6+
"sidebar content" auto;
7+
8+
grid-template-columns: auto 1fr;
9+
}
10+
11+
.page-header {
12+
grid-area: header;
13+
}
14+
15+
.main-page-content {
16+
display: grid;
17+
column-gap: var(--spacing-l);
18+
row-gap: var(--spacing-l);
19+
20+
grid-template-columns: 1fr 1fr 1fr 1fr;
21+
grid-auto-rows: 400px;
22+
grid-auto-flow: row dense;
23+
}
24+
25+
.chart-box-wide {
26+
grid-column: span 2
27+
}
28+
29+
.chart-box-tall {
30+
grid-row: span 2
31+
}

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/icons.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "../../node_modules/@fontsource/material-icons/index.css";
2+
@import "../../node_modules/@fontsource/material-icons-outlined/index.css";

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/main-page-content.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.main-page-content {
2+
background-color: var(--color-gray-1);
3+
padding: var(--spacing-l);
4+
}

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/page-header.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.page-header {
2+
padding: var(--spacing-l);
3+
display: flex;
4+
align-items: center;
5+
justify-content: space-between;
6+
border-bottom: var(--border-standard);
7+
}
8+
9+
.page-title {
10+
display: flex;
11+
align-items: center;
12+
}
13+
14+
.page-title .material-icons-outlined {
15+
margin-right: var(--spacing-m);
16+
}

‎chapter8/AwesomeAnalytics/BootstrapBased/assets/css/sidebar.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.sidebar {
2+
border-right: var(--border-standard);
3+
}
4+
5+
.sidebar li {
6+
line-height: var(--line-height-snug);
7+
}
8+
9+
.sidebar li a {
10+
padding: var(--spacing-m);
11+
}
12+
13+
.sidebar li.active a {
14+
background-color: var(--color-brand-light);
15+
}
16+
17+
.sidebar li.active a,
18+
.sidebar li.active a:visited,
19+
.sidebar li.active a:link,
20+
.sidebar li.active a:hover {
21+
color: var(--color-gray-0);
22+
}
23+
24+
.sidebar .group li:first-child {
25+
border-top: var(--border-standard);
26+
}
27+
28+
.sidebar .group li:last-child {
29+
border-bottom: var(--border-standard);
30+
}
31+
32+
.sidebar .text {
33+
max-width: 400px;
34+
transition: all ease-in-out .2s;
35+
white-space: nowrap;
36+
overflow: hidden;
37+
}
38+
.sidebar .icon {
39+
transition: all ease-in-out .2s;
40+
}
41+
42+
.sidebar.collapsed .icon {
43+
margin-right: 0;
44+
}
45+
.sidebar.collapsed .text {
46+
max-width: 0;
47+
}
48+
49+
.sidebar .collapse-icon {
50+
display: block;
51+
}
52+
.sidebar .expand-icon {
53+
display: none;
54+
}
55+
56+
.sidebar.collapsed .collapse-icon {
57+
display: none;
58+
}
59+
.sidebar.collapsed .expand-icon {
60+
display: block;
61+
}
62+
63+
/* Bootstrap, being an opinionated framework, sets some unnecessary spacings - we get rid of them here */
64+
.sidebar {
65+
padding-left: 0 !important;
66+
padding-right: 0 !important;
67+
}
68+
.sidebar ul {
69+
padding-left: 0 !important;
70+
}

0 commit comments

Comments
 (0)