crucial.css
Version:
Crucial CSS sets up your CSS with the what you need to start styling and nothing more.
270 lines (239 loc) • 8.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="crucial.css" />
<link rel="stylesheet" href="utilities.css" />
<style>
.box {
height: 200px;
background: rgb(19, 19, 19);
color: white;
padding: var(--gutter);
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.card-grid .box {
margin: 0;
}
.box p,
.box h1 {
font-size: clamp(1.8rem, 3vw, 4rem);
}
h2 {
margin-bottom: 1em;
margin-top: 3em;
}
h2:first-child {
margin-top: 0;
}
.box span {
font-size: clamp(1.4rem, 3vw, 1.6rem);
display: block;
}
div .box {
border-radius: 15px;
}
.container-left .box {
border-radius: 0 15px 15px 0;
}
.container-right .box {
border-radius: 15px 0 0 15px;
}
.full-width .box {
border-radius: 0;
}
header {
margin-bottom: 50px;
}
footer {
margin-top: 30px;
}
.element {
position: absolute;
right: -90px;
width: 100px;
height: 100%;
background: blue;
}
</style>
</head>
<body class="page-wrap">
<header>
<div class="box"><p>I am a box</p></div>
</header>
<div class="vertical-spacing">
<div class="container section">
<h2>I am text inside a container</h2>
<div class="box">
<p>I am a box inside a container</p>
<span>
(Tip: Be wary of styling on the actual container element because its
got those crucial paddings on left and right. Probably best to place
items inside me and you wont have any layout issues.)
</span>
</div>
<p>
I am text inside the container. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio
molestias amet facere commodi ipsa minima deserunt ut modi repellendus
corrupti similique eaque odio sint dicta ullam animi!
</p>
</div>
<div class="container-fluid section">
<h2>I am text in a container fluid</h2>
<div class="box">
<p>I am a box inside a container fluid</p>
<span>
(Hint: make your viewport wider than 1200px to see me grow)
</span>
</div>
<p>
I am text inside the container. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio
molestias amet facere commodi ipsa minima deserunt ut modi repellendus
corrupti similique eaque odio sint dicta ullam animi!
</p>
</div>
<div class="container-left section">
<div class="box"><p>I am a container-left</p></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
</div>
<div class="container-right section">
<div class="box"><p>I am a container-right</p></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
</div>
<div class="container-content articles">
<h2>I am text in a container-content</h2>
<div class="box">
<p>I am a box inside a container content</p>
<span>
(Tip: Great use for when you get a large article back from a CMS and
cannot separate it easily and there are some sections that need to
break out of the typical content-width size)
</span>
</div>
<p>
I am text inside the container content. I typically come from a cms or
a large bucket of content which cannot easily be split up. You might
need to style container-content a bit further to your liking.
</p>
<h2>I am text in a container content</h2>
<p>
I am text inside the container. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio
molestias amet facere commodi ipsa minima deserunt ut modi repellendus
corrupti similique eaque odio sint dicta ullam animi!
</p>
<img src="https://picsum.photos/800/600" alt="demo-image" />
<p>
I am text inside the container. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quae, nesciunt, vitae, distinctio
molestias amet facere commodi ipsa minima deserunt ut modi repellendus
corrupti similique eaque odio sint dicta ullam animi!
</p>
<div class="container">
<div class="box">
<p>I am a container inside the content-container.</p>
<span>
I break out and match a regular container. The one thing I am
missing is padding on left and right because container-content has
that for me.
</span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
<div class="container-fluid">
<div class="box">
<p>I am a container-fluid inside the content-container.</p>
<span>
I break out and match a regular container-fluid exactly.
</span>
</div>
<div class="container-content">
<p>lldkjd nks</p>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
<div class="full-width">
<div class="box">
<p>I am a full-width element inside the content-container.</p>
<span>
I break out and fill the viewport giving you back full control.
</span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae,
nesciunt, vitae, distinctio molestias amet facere commodi ipsa minima
deserunt ut modi repellendus corrupti similique eaque odio sint dicta
ullam animi!
</p>
</div>
<div class="container card-grid">
<div class="box">
<p>I</p>
</div>
<div class="box">
<p>Am</p>
</div>
<div class="box">
<p>A</p>
</div>
<div class="box">
<p>Card</p>
</div>
<div class="box">
<p>Grid</p>
</div>
</div>
<!-- Container-content -->
</div>
<footer>
<div class="box"><p>The End.</p></div>
</footer>
</body>
</html>