CSS Element CheatSheet

This is a compilation of some useful CSS a quick description and a sample of the code involved

Flexbox Row

Use these three properties to create a flexbox with a row layout.

        .row {
            display: flex;
            flex-direction row;
            flex-wrap: wrap;
        }

Flexbox Column

Use this to create a Flexbox column layout.

        .column {
            display: flex;
            flex-direction column;
        }

CSS grid layout

Build a 12-column layout using CSS Grid.

        .grid {
            display: grid; 
            width: 100%; 
            grid-template-columns: 
                    repeat(12, 1fr); 
        }

Linear Gradients

This will create a background linear gradient from top to bottom.

        .linear-gradient-background {
            background-image: 
            linear-gradient(
            rgba(232, 102, 236, 0.3) 0%, 
            linear-gradient(
            rgba(232, 102, 236, 0.3) 100%);
        }

Box Transitional Glow

Use transitional and box shadows to glow on hover.

        .code-card .card-header {
            border-radius: 8px
            transitino: all 0.5s ease-in-out;
        }

        .code-card:hover .card-header {
            box-shadow: inset 0px 0px 8px 
            rgba(232, 102, 236, 1), 
            0 0 15px rbga(232, 102, 236, 1);
        }

Overlay Card with Title

Use position properties and negative margins to raise elements higher than their natural starting point.

        .card-header {
            position: relative;
            margin-top: -20px;
        }

Media Screens and Multiple Displays

Creating responsive container boundries in anticipation of mobile (768px) or tablet (992px) users .

        @media screen and (max-width: 992px){
            section {
                width: 40%;
            }
        }
                    
        @media screen and (max-width: 768px){
            section {
                width: 75%;
            }
        }

Forms

Creating an interactive form to input user information. This one is actually in HTML

        <form>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email"><br>
            <button type="button">Send</button>
         </form>

Popup Description Boxes

Create interactive descriptive bubbles of text when you hover over a word. First make the decription in HTML, Then the popup in CSS, then the hover action.

        <span data-desc="commonly known as css">Cascading Style Sheets</span>

        span[data-desc] {
            position: relative;
            text-decoration: underline;
            color: black;
            cursor: grab;
        }

        span[data-desc]:hover::after {
            content: attr(data-desc);
            position: absolute;
            left: 0px;
            background-color: steelblue;
            color: white;
            bottom: 24px;
        }

<pre> Text Wrap

This will wrap text when using the pre tag so it doesn't overflow the container without using a scroll bar. Alternatively you can use overflow-y for a column type orientation.

        pre {
            overflow-x: clip;
            word-wrap: break-word;
            white-space: pre-wrap
        }