Skip to content

Commit 5669394

Browse files
author
hello@cyan.red
committed
Initial commit
1 parent c9c45bf commit 5669394

File tree

2 files changed

+204
-0
lines changed

2 files changed

+204
-0
lines changed

‎css_columns/base.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(180,180,190);
14+
--emphasis-color: rgb(27,211,165);
15+
--highlight-color: rgba(127,255,212,.15);
16+
}
17+
18+
19+
20+
/* DEFAULTS --------------------------------------------------------------- */
21+
22+
html {
23+
font-family: var(--main-font);
24+
font-size: 16px;
25+
font-weight: 400;
26+
line-height: 1.7em;
27+
color: var(--main-color);
28+
}
29+
30+
h1 {
31+
font-family: var(--heading-font);
32+
font-size: 2.6rem;
33+
font-weight: 300;
34+
line-height: 1.2em;
35+
color: var(--heading-color);
36+
margin: 0 0 25px 0;
37+
}
38+
39+
p {
40+
margin: 0 0 20px 0;
41+
}
42+
43+
ul {
44+
list-style-type: none;
45+
padding: 0;
46+
margin: 0;
47+
}
48+
49+
/* TYPOGRAPHY ------------------------------------------------------------- */
50+
51+
.comment {
52+
color: var(--minor-color);
53+
}
54+
55+
56+
/* LINKS & BUTTONS -------------------------------------------------------- */
57+
58+
a:link,
59+
a:visited {
60+
color: var(--emphasis-color);
61+
text-decoration-skip: edges;
62+
}
63+
64+
a:hover,
65+
a:active {
66+
background: var(--highlight-color);
67+
}
68+
69+
70+
/* LAYOUT ----------------------------------------------------------------- */
71+
72+
.base {
73+
border: solid 2px aquamarine;
74+
min-width: 650px;
75+
max-width: 1200px;
76+
margin: 15px auto;
77+
}
78+
79+
80+
.container-a {
81+
column-count: 3;
82+
column-gap: 3rem;
83+
column-rule: dashed 1px var(--minor-color);
84+
}
85+
86+
.spanning-element {
87+
column-span: all;
88+
}
89+
90+
.break-before {
91+
break-before: column;
92+
}
93+
94+
.container-b {
95+
/* column-count: auto; */
96+
/* column-width: 14rem; */
97+
columns: auto 14rem;
98+
column-gap: 2rem;
99+
/* column-fill: auto;
100+
height: 900px; */
101+
}
102+
103+
104+
/* COMPONENTS ------------------------------------------------------------- */
105+
106+
/* COSMETIC --------------------------------------------------------------- */
107+
108+
/* UTILITY ---------------------------------------------------------------- */
109+
110+
/* STATE ------------------------------------------------------------------ */

‎css_columns/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE HTML>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>CSS Columns</title>
7+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
8+
<link href="base.css" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<div class="container-a base">
14+
<h1>CSS Columns</h1>
15+
<p>
16+
CSS Multi-column Layout is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance.
17+
</p>
18+
<p>
19+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">MDN's CSS Multi-column Layout</a><br>
20+
<a href="https://www.w3schools.com/CSS/css3_multiple_columns.asp">W3C's CSS Multi-column Layout</a>
21+
</p>
22+
23+
<h1 class="break-before">Properties</h1>
24+
25+
<code>
26+
<ul>
27+
<li>column-count: 3;</li>
28+
<li class="comment">/* content is arranged into &lt;integer&gt; columns of equal size. column-count can also be set to auto, in which case the number of columns is determined by other CSS properties, such as column-width */</li>
29+
<li>column-fill: auto;</li>
30+
<li class="comment">/* controls how an element's contents are balanced when broken into columns (auto, balance, balance-all). onlt works when container has a set height */</li>
31+
<li>column-gap: 5rem;</li>
32+
<li class="comment">/* sets the size of the gap (gutter) between an element's columns */ </li>
33+
<li>column-rule-color: silver;</li>
34+
<li class="comment">/* color of line between columns */</li>
35+
<li>column-rule-style: dashed;</li>
36+
<li class="comment">/* style of line between columns */</li>
37+
<li>column-rule-width: 1px;</li>
38+
<li class="comment">/* width of line between columns */</li>
39+
<li>column-rule: dashed 1px silver;</li>
40+
<li class="comment">/* shorthand for color, style, width */</li>
41+
<li>column-span: all;</li>
42+
<li class="comment">/* makes it possible for an element to span across all columns when its value is set to all. by default, doesn't work in firefox (can be enabled by the user but what user would ever know to do that?) */</li>
43+
<li>column-width: 14rem;</li>
44+
<li class="comment">/* specifies the ideal column width in a multi-column layout. the container will have as many columns as can fit without any of them having a width less than the column-width value */ </li>
45+
<li>columns: 14rem auto;</li>
46+
<li class="comment">/* shorthand for setting column-width and column-count */ </li>
47+
</ul>
48+
</code>
49+
50+
<h1 class="break-before">Breaks</h1>
51+
<p>
52+
There are various places we might want to control our breaks: breaks inside boxes, for example inside a figure element; breaks before and after boxes, for example a heading; and breaks between lines.
53+
</p>
54+
55+
<code>
56+
<ul>
57+
<li>break-inside: avoid;</li>
58+
<li class="comment">/* keeps the content inside a box from breaking (for example, applied to a figure with an img and fig caption)*/</li>
59+
<li>break-before: column;</li>
60+
<li>break-after: column;</li>
61+
<li class="comment">/* forces a break before or after an element */</li>
62+
<li>break-before: avoid;</li>
63+
<li>break-after: avoid;</li>
64+
<li class="comment">/* avoids breaking before or after an element */</li>
65+
<li>orphans: 3;</li>
66+
<li>widows: 3;</li>
67+
<li class="comment">/* the orphans property controls the number of lines left on their own at the end of a fragment. the widows property controls the number left on their own at the start of a fragment. both take an integer as a value, which represents the number of lines to keep together at the end or start of a fragment. these properties only work inside a block container, such as a paragraph */</li>
68+
</ul>
69+
</code>
70+
</div>
71+
72+
<div class="container-b base">
73+
<h1 class="spanning-element">Spanning element</h1>
74+
<p>
75+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, enim sit amet egestas vestibulum, mauris nibh iaculis quam, id convallis mauris diam eu metus. Vivamus tempor egestas lacus. Praesent euismod, turpis ut tincidunt vestibulum, orci ante porttitor tellus, in posuere quam ex vitae tortor. Aenean ornare blandit congue. Donec suscipit mi ex, eu maximus ex ornare vel. Praesent non pulvinar mauris, commodo faucibus urna. Nunc interdum condimentum odio, ultricies mollis lectus mollis vitae. Praesent pharetra aliquam nisl, vel pharetra justo tincidunt id. Etiam turpis felis, eleifend sed quam sed, tincidunt ornare diam. Etiam a nisl euismod, dapibus elit in, consectetur ante. Etiam id neque orci. Donec blandit enim ligula. Vestibulum odio lectus, tristique non auctor vestibulum, gravida eget massa.
76+
</p>
77+
<p>
78+
Sed lacinia faucibus mattis. Aliquam erat volutpat. Curabitur quis tristique eros. Suspendisse erat orci, imperdiet ac laoreet at, dapibus non massa. Donec blandit, eros eu consequat fermentum, arcu libero laoreet erat, id posuere sapien lorem vel metus. Nulla euismod cursus nulla, fermentum malesuada massa faucibus a. Pellentesque tristique arcu in tristique congue. Sed sodales ante mi, ac molestie metus condimentum in. Phasellus suscipit erat vel nunc consectetur faucibus.
79+
</p>
80+
<p>
81+
Fusce finibus elit a ipsum elementum, ac euismod mauris sollicitudin. Maecenas feugiat venenatis arcu in porttitor. Fusce luctus ullamcorper enim eu aliquam. Morbi rhoncus purus odio, at malesuada tellus pulvinar sed. Suspendisse potenti. Curabitur quis fermentum massa, ut ullamcorper turpis. Donec mauris diam, eleifend nec purus egestas, feugiat congue leo. Etiam vehicula sodales arcu. Cras ornare, lacus ac tempus scelerisque, purus augue vulputate dui, sit amet porta sem erat non est. Vestibulum in diam venenatis, condimentum nunc vitae, viverra orci. Aliquam erat volutpat. Curabitur nec est ante. Duis porta euismod ipsum et pharetra. Donec consectetur, metus vitae rhoncus efficitur, libero felis varius justo, sit amet porta lorem ligula interdum sem. Cras quis convallis felis.
82+
</p>
83+
<h1 class="spanning-element">Spanning element</h1>
84+
<p>
85+
Fusce nunc orci, porttitor eget feugiat in, accumsan quis urna. Quisque et lacinia ipsum. Mauris ornare augue in velit iaculis dapibus ut nec quam. Maecenas pulvinar mauris quis eros dictum, aliquam dignissim est rutrum. Cras scelerisque tempor lobortis. Integer et ante nisl. Proin scelerisque sem quis tellus molestie ultricies. Nunc egestas semper massa, eu lobortis augue rutrum sit amet.
86+
</p>
87+
<p>
88+
Donec id odio fringilla, convallis mi eget, porttitor nisi. Suspendisse ultricies aliquet ipsum, et interdum ligula. Nullam dignissim ut ipsum non faucibus. Donec accumsan consequat justo, ultricies iaculis risus lobortis laoreet. Sed nec placerat est. Duis tincidunt laoreet libero a pellentesque. Aliquam erat volutpat. Nunc luctus diam nunc. Aenean elementum purus et erat gravida, vel dictum lacus volutpat. Duis neque ligula, cursus a lobortis eget, malesuada eget nisl. Fusce commodo rutrum magna, placerat viverra massa eleifend sit amet. Maecenas nec rutrum ante.
89+
</p>
90+
91+
</div>
92+
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)