Skip to content

Commit bf1f649

Browse files
fuzzzerdfuzzzerd
committed
break out to smaller files
1 parent 8d404f8 commit bf1f649

7 files changed

Lines changed: 153 additions & 152 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ The purpose of this CSS starter kit, is to provide a decent out of the box exper
1111
Take your pick. You have options:
1212

1313
- Copy the `.css` file and drop it in to your site as-is.
14-
- Grab the `.scss` file and incorporate that in your build process.
14+
- Grab the `.scss` files and incorporate that in your build process.
1515

1616
There isn't a wrong way to use it.
1717

@@ -26,7 +26,7 @@ choco install sass
2626
Once installed, you can run
2727

2828
```ps
29-
sass tinycss.scss tinycss.min.css --style compressed --watch
29+
sass tinycss.scss tinycss.min.css --style compressed
3030
```
3131

32-
to generate the files you see here, or use other cli options from sass to suit your specific needs.
32+
to generate the files you see here, or use other cli options from sass to suit your specific needs. Use the `--watch` parameter for ongoing development.

‎src/base.scss‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// todo: high-contrast: https://mwichary.medium.com/dark-theme-in-a-day-3518dde2955a
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
:root {
7+
--sans-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
8+
9+
--background: #fff;
10+
--accent-background: #dfe1e9;
11+
--text: #252525;
12+
--text-light: #585858;
13+
--border: #cecfd4;
14+
--accent: #fa986b;
15+
}
16+
17+
html {
18+
font-family: var(--sans-font);
19+
scroll-behavior: smooth;
20+
font-size: 16pt;
21+
color: var(--text);
22+
background: var(--background);
23+
}
24+
25+
html[data-theme="dark"] {
26+
--background: rgb(52, 51, 58);
27+
--accent-background: rgb(81, 79, 90);
28+
--text: #d8d8d8;
29+
--text-light: #ffffff;
30+
}
31+
32+
html.theme-switch,
33+
html.theme-switch *,
34+
html.theme-switch *:before,
35+
html.theme-switch *:after {
36+
transition: all 650ms !important;
37+
transition-delay: 0 !important;
38+
}
39+
40+
header {
41+
color: var(--text);
42+
}
43+
44+
footer {
45+
color: var(--text-light);
46+
}
47+
48+
body {
49+
padding: 0 1rem;
50+
}
51+
52+
a {
53+
color: #b44512;
54+
text-decoration: underline;
55+
&:visited {
56+
color: var(--text);
57+
text-decoration: dotted;
58+
}
59+
&:hover {
60+
color: var(--accent);
61+
text-decoration: none;
62+
}
63+
}

‎src/forms.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
input,
2+
select,
3+
textarea {
4+
font-size: inherit;
5+
font-family: inherit;
6+
padding: 0.5rem;
7+
margin-bottom: 0.5rem;
8+
color: var(--text);
9+
background-color: var(--background);
10+
width: 100%;
11+
display: inline-block;
12+
border: 1px solid var(--border);
13+
}
14+
15+
input[type="checkbox"],
16+
input[type="radio"] {
17+
width: auto;
18+
}

‎src/nav.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
nav {
2+
font-size: 1rem;
3+
line-height: 2;
4+
padding: 1rem 0 0 0;
5+
6+
align-content: space-around;
7+
align-items: baseline;
8+
display: flex;
9+
flex-direction: row;
10+
flex-wrap: wrap;
11+
justify-content: space-evenly;
12+
list-style-type: none;
13+
14+
a,
15+
a:visited {
16+
margin: 0 1rem 1rem 0;
17+
border: 1px solid var(--border);
18+
border-radius: 5px;
19+
color: var(--text);
20+
display: inline-block;
21+
padding: 0.1rem 1rem;
22+
text-decoration: none;
23+
&:hover {
24+
color: var(--accent);
25+
border-color: var(--accent);
26+
}
27+
}
28+
}

‎src/table.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// table style
2+
table {
3+
border-collapse: collapse;
4+
border-spacing: 0;
5+
margin: 1rem 0 1rem 0;
6+
width: 100%;
7+
th {
8+
color: var(--accent);
9+
font-weight: 600;
10+
text-align: left;
11+
}
12+
13+
td,
14+
th {
15+
padding: 0.75rem 0.75rem;
16+
}
17+
18+
thead {
19+
border-bottom: solid 2px var(--border);
20+
}
21+
22+
tbody {
23+
tr:nth-child(2n + 1) {
24+
background-color: var(--accent-background);
25+
}
26+
tr {
27+
border: solid 1px var(--border);
28+
border-left: 0;
29+
border-right: 0;
30+
}
31+
}
32+
33+
tfoot {
34+
border-top: solid 2px var(--border);
35+
}
36+
}

‎tinycss.min.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tinycss.scss‎

Lines changed: 4 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,6 @@
11
// tiny reset
2+
@use "src/base.scss";
23

3-
// todo: high-contrast: https://mwichary.medium.com/dark-theme-in-a-day-3518dde2955a
4-
* {
5-
box-sizing: border-box;
6-
}
7-
8-
:root {
9-
--sans-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
10-
11-
--background: #fff;
12-
--accent-background: #dfe1e9;
13-
--text: #252525;
14-
--text-light: #585858;
15-
--border: #cecfd4;
16-
--accent: #fa986b;
17-
}
18-
19-
html {
20-
font-family: var(--sans-font);
21-
scroll-behavior: smooth;
22-
font-size: 16pt;
23-
color: var(--text);
24-
background: var(--background);
25-
}
26-
27-
html[data-theme="dark"] {
28-
--background: rgb(52, 51, 58);
29-
--accent-background: rgb(81, 79, 90);
30-
--text: #d8d8d8;
31-
--text-light: #ffffff;
32-
}
33-
34-
html.theme-switch,
35-
html.theme-switch *,
36-
html.theme-switch *:before,
37-
html.theme-switch *:after {
38-
transition: all 650ms !important;
39-
transition-delay: 0 !important;
40-
}
41-
42-
header {
43-
color: var(--text);
44-
}
45-
46-
footer {
47-
color: var(--text-light);
48-
}
49-
50-
body {
51-
padding: 0 1rem;
52-
}
53-
54-
a {
55-
color: #b44512;
56-
text-decoration: underline;
57-
&:visited {
58-
color: var(--text);
59-
text-decoration: dotted;
60-
}
61-
&:hover {
62-
color: var(--accent);
63-
text-decoration: none;
64-
}
65-
}
66-
67-
nav {
68-
font-size: 1rem;
69-
line-height: 2;
70-
padding: 1rem 0 0 0;
71-
72-
align-content: space-around;
73-
align-items: baseline;
74-
display: flex;
75-
flex-direction: row;
76-
flex-wrap: wrap;
77-
justify-content: space-evenly;
78-
list-style-type: none;
79-
80-
a,
81-
a:visited {
82-
margin: 0 1rem 1rem 0;
83-
border: 1px solid var(--border);
84-
border-radius: 5px;
85-
color: var(--text);
86-
display: inline-block;
87-
padding: 0.1rem 1rem;
88-
text-decoration: none;
89-
&:hover {
90-
color: var(--accent);
91-
border-color: var(--accent);
92-
}
93-
}
94-
}
95-
96-
// table style
97-
table {
98-
border-collapse: collapse;
99-
border-spacing: 0;
100-
margin: 1rem 0 1rem 0;
101-
width: 100%;
102-
th {
103-
color: var(--accent);
104-
font-weight: 600;
105-
text-align: left;
106-
}
107-
108-
td,
109-
th {
110-
padding: 0.75rem 0.75rem;
111-
}
112-
113-
thead {
114-
border-bottom: solid 2px var(--border);
115-
}
116-
117-
tbody {
118-
tr:nth-child(2n + 1) {
119-
background-color: var(--accent-background);
120-
}
121-
tr {
122-
border: solid 1px var(--border);
123-
border-left: 0;
124-
border-right: 0;
125-
}
126-
}
127-
128-
tfoot {
129-
border-top: solid 2px var(--border);
130-
}
131-
}
132-
133-
input,
134-
select,
135-
textarea {
136-
font-size: inherit;
137-
font-family: inherit;
138-
padding: 0.5rem;
139-
margin-bottom: 0.5rem;
140-
color: var(--text);
141-
background-color: var(--background);
142-
width: 100%;
143-
display: inline-block;
144-
border: 1px solid var(--border);
145-
}
146-
147-
input[type="checkbox"],
148-
input[type="radio"] {
149-
width: auto;
150-
}
4+
@use "src/nav.scss";
5+
@use "src/table.scss";
6+
@use "src/forms.scss";

0 commit comments

Comments
 (0)