CSS Calc Function Practice

June 12, 2020
by Jeremy Caudle
notes

Practiced using the calc() function in CSS. I don't have a strong understanding of the best ways to use it at the moment, but I know a lot of the developers and designers I follow put it to good use. There's always more to do and more things to improve.

Heading Level 1

Morbi tristique senectus et netus et malesuada fames ac turpis. Facilisis magna etiam tempor orci eu lobortis. Malesuada bibendum arcu vitae elementum curabitur vitae. Vulputate dignissim suspendisse in est. Cras ornare arcu dui vivamus arcu. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Mauris pharetra et ultrices neque ornare aenean euismod. Urna et pharetra pharetra massa massa. Turpis nunc eget lorem dolor sed viverra. Egestas sed tempus urna et. Mi tempus imperdiet nulla malesuada. Libero enim sed faucibus turpis. Feugiat sed lectus vestibulum mattis ullamcorper. Enim nulla aliquet porttitor lacus luctus. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Convallis a cras semper auctor neque vitae tempus. In nibh mauris cursus mattis molestie a iaculis. Sed arcu non odio euismod lacinia. Enim sed faucibus turpis in eu mi.

Heading Level 2

List Item
List Item
List Item
List Item
List Item

Heading Level 3

In nibh mauris cursus mattis molestie a iaculis. Sed arcu non odio euismod lacinia. Enim sed faucibus turpis in eu mi.

Heading Level 4

Thing 1
Thing 2
Thing 3

Heading Level 5

Heading Level 6

Term: Definition

View the code:

HTML and JS

<div class="codedoodle-block">
        <div class="card">

            <h1>Heading Level 1</h1>
            <p>Morbi tristique senectus et netus et malesuada fames ac turpis. Facilisis magna etiam tempor orci eu lobortis. Malesuada bibendum arcu vitae elementum curabitur vitae. Vulputate dignissim suspendisse in est. Cras ornare arcu dui vivamus arcu. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Mauris pharetra et ultrices neque ornare aenean euismod. Urna et pharetra pharetra massa massa. Turpis nunc eget lorem dolor sed viverra. Egestas sed tempus urna et. Mi tempus imperdiet nulla malesuada. Libero enim sed faucibus turpis. Feugiat sed lectus vestibulum mattis ullamcorper. Enim nulla aliquet porttitor lacus luctus. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Convallis a cras semper auctor neque vitae tempus. In nibh mauris cursus mattis molestie a iaculis. Sed arcu non odio euismod lacinia. Enim sed faucibus turpis in eu mi.</p>

            <hr />

            <h2>Heading Level 2</h2>
            <ul>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
                <li>List Item</li>
            </ul>

            <hr />

            <h3>Heading Level 3</h3>
            <p>In nibh mauris cursus mattis molestie a iaculis. Sed arcu non odio euismod lacinia. Enim sed faucibus turpis in eu mi.</p>

            <h4>Heading Level 4</h4>
            <ol>
                <li>Thing 1</li>
                <li>Thing 2</li>
                <li>Thing 3</li>
            </ol>

            <hr />

            <h5>Heading Level 5</h5>
            <p>Morbi tristique senectus et netus et malesuada fames ac turpis. Facilisis magna etiam tempor orci eu lobortis. Malesuada bibendum arcu vitae elementum curabitur vitae. Vulputate dignissim suspendisse in est. Cras ornare arcu dui vivamus arcu. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Mauris pharetra et ultrices neque ornare aenean euismod. Urna et pharetra pharetra massa massa. Turpis nunc eget lorem dolor sed viverra. Egestas sed tempus urna et. Mi tempus imperdiet nulla malesuada. Libero enim sed faucibus turpis. Feugiat sed lectus vestibulum mattis ullamcorper. Enim nulla aliquet porttitor lacus luctus. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Convallis a cras semper auctor neque vitae tempus.</p>

            <hr />

            <h6>Heading Level 6</h6>
            <dl>
                <dt>Term</dt>
                <dd>Definition</dd>
            </dl>
        </div>
    </div>

CSS

/* Variables */

        :root {
            --bg-color: #333333;
            --main-width: 100%;
            --measure: 50em;
        }

        /* Code Block styles */

        div.codedoodle-block {
            margin:0;
            width: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .card {
            border: solid 1px #dedede;
            width: calc(var(--main-width, 100%) - 3em);
            padding: 1em;
            position: relative;
            margin: 1rem auto;
            background-color: var(--bg-color, #333333);
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            color: #dedede;
            max-width: 90%;
            font-size: 1.25rem;
        }

        div.codedoodle-block h1 {
            font-size: calc(2.5em + 10px);
        }

        div.codedoodle-block h2 {
            font-size: calc(1.5em + 10px);
        }

        div.codedoodle-block h3 {
            font-size: calc(1em + 10px);
        }

        div.codedoodle-block h4 {
            font-size: calc(.5em + 10px);
        }

        div.codedoodle-block h5 {
            font-size: calc(.25em + 10px);
        }

        div.codedoodle-block h6 {
            font-size: calc(.125em + 10px);
        }

        div.codedoodle-block h1, div.codedoodle-block h2, div.codedoodle-block h3, div.codedoodle-block h4, div.codedoodle-block h5, div.codedoodle-block h6 {
            margin: 0 0 calc(1em / 4) 0;
        }

        div.codedoodle-block p {
            max-width: calc(var(--measure, 50em) - 5%);
        }