<h1>CSS Custom Properties</h1>
<p>These callouts need styles. We'll work on adding styles for each variation by using custom properties to build a meaninful, maintainable system.</p>
<main>
<div class="callout">
<h2>I am a default callout</h2>
<p>Each callout has two buttons, a default one and an outline button.</p>
<div class="btn-group">
<button>Button</button>
<button class="outline">Outline Button</button>
</div>
</div>
<div class="callout warning">
<h2>I am a warning callout</h2>
<p>For each variation of the callout, adjust the callout background color, border color, and button backgrounds and text color for their respective states.</p>
<div class="btn-group">
<button>Button</button>
<button class="outline">Outline Button</button>
</div>
</div>
<div class="callout info">
<h2>I am an info callout</h2>
<p>For each variation of the callout, adjust the callout background color, border color, and button backgrounds and text color for their respective states.</p>
<div class="btn-group">
<button>Button</button>
<button class="outline">Outline Button</button>
</div>
</div>
</main>
.callout {
background-color: white;
color: black;
}
.warning {
}
.info {
}
/* Some custom property names to help get started */
/*
--btn-background: ;
--btn-color: ;
--btn-background-hover: ;
--btn-background-outline: ;
--btn-color-hover: ;
--btn-border-color: ;
--btn-border-color-hover: ;
--btn-border-color-outline: ;
--btn-border-radius: ;
--btn-color-outline: ;
--btn-background-outline-hover: ;
--btn-border-color-outline-hover: ;
--btn-color-outline-hover: ;
--callout-background: ;
--callout-border-color: ;
--callout-border-radius: ;
--callout-color: ;
--btn-background-outline: ;
*/
/* Base Button Styles */
button {
background-color: #444;
border: thin solid;
color: white;
&:hover,
&:focus {
background-color: black;
color: white;
}
}
/* Outline Button variation */
.outline {
background-color: unset;
color: unset;
&:hover,
&:focus {
background-color: black;
color: white;
}
}
/* All Styles that aren't part of workshop, but help with the styling of the demo. */
@layer reset, base, default;
@layer default {
body {
background: hsl(213 20% 20%);
color: white;
font-family: "Red Hat Display", sans-serif;
font-size: var(--text-small);
line-height: 1.4;
padding: 0 2rem;
}
/* Layout Styles
------------- */
main {
display: grid;
gap: 2rem;
grid-template-columns: minmax(auto, 80ch);
justify-content: center;
padding-block-end: 3rem;
}
aside {
margin-block: 2rem;
}
/* Button Styles
------------- */
button {
appearance: none;
cursor: pointer;
font-weight: 700;
padding: 0.5rem 1rem;
&:focus {
outline: 2px solid hsl(338 85% 60%);
outline-offset: 1px;
}
}
/* Callout Styles
--------------*/
.callout {
border-style: solid;
border-width: 0 0 0 1rem;
font-weight: bold;
padding: 2rem;
}
/* Typography Styles
----------------- */
h1 {
font-size: var(--text-xlarge);
font-weight: normal;
margin-block-end: 1rem;
text-align: center;
}
h2 {
font-size: var(--text-normal);
font-weight: 700;
line-height: 1.15;
margin: 0;
}
p:not(.callout p) {
margin-block-end: 2rem;
text-align: center;
}
}
@layer base {
body {
--text-small: clamp(0.938rem, 0.824rem + 0.568cqi, 1.25rem);
--text-normal: clamp(1.25rem, 1.023rem + 1.136cqi, 1.875rem);
--text-large: clamp(1.35rem, 0.818rem + 2.659cqi, 2.813rem);
--text-xlarge: clamp(1.7rem, 0.784rem + 4.58cqi, 4.219rem);
--gap: clamp(2cqi, 0.5lh, 5cqi);
font-size: var(--text-normal);
padding: var(--gap);
}
}
@layer reset {
* {
box-sizing: border-box;
}
html {
block-size: 100%;
}
body {
margin: unset;
min-block-size: 100%;
}
picture {
display: contents;
}
img {
display: block;
}
img,
svg {
max-inline-size: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
}
This Pen doesn't use any external JavaScript resources.