CSS Grid Sprite Practice


by Jeremy Caudle
notes

When I did my Everyday Dev coding challenge I built a Mario sprite using CSS grid. I thought I'd give it another shot with Mega Man. I don't think I can finish the whole sprite, so I've just done part of his helmet. I'll call it good since I've had a bit of CSS Grid, variable and Emmett practice today. I need to figure out a much more effecient method for any future CSS-only sprites.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <div class="card">
            <div id="megaman">
                <div class="outline-eyes row1"></div>
                <div class="row2a outline-eyes"></div><div class="row2b primary-color"></div><div class="row2c outline-eyes"></div>
                <div class="row3a outline-eyes"></div><div class="row3b primary-color"></div><div class="row3c outline-eyes"></div><div class="row3d secondary-color"></div><div class="row3e outline-eyes"></div>
                <div class="row4a outline-eyes"></div><div class="row4b secondary-color"></div><div class="row4c outline-eyes"></div>
                <div class="row5a outline-eyes"></div><div class="row5b secondary-color"></div><div class="row5c primary-color"></div><div class="row5d outline-eyes"></div><div class="row5e secondary-color"></div><div class="row5f outline-eyes"></div>
                <div class="row6a outline-eyes"></div><div class="row6b secondary-color"></div><div class="row6c outline-eyes"></div><div class="row6d secondary-color"></div><div class="row6e primary-color"></div><div class="row6f outline-eyes"></div>
                <div class="row7 outline-eyes"></div>
            </div>
        </div>
    </div>
CSS 
/* Mega Man's colors */

        :root {
            --mm-outline: #000000;
            --mm-primary: #00e8d8;
            --mm-secondary: #0070ec;
            --mm-face: #fcd8a8;
            --mm-eyes: #fcfcfc;
        }

        /* 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;
            padding: 1em;
            margin: 1rem auto;
            font-size: 1.25rem;
        }

        @supports (display: flex) {
            .card {
                display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: center;
            }
        }

        @supports (display: grid) {
            #megaman {
            display: grid;
            grid-template-columns: repeat(24, .5em);
            grid-template-rows: repeat(8, .5em);
						}
        }

			#megaman {
				max-width: 12em;
				max-height: 12em;
				align-self: center;
				justify-self: center;
			}

        #megaman div {
            width: 100%;
            height: 100%;
        }

        .outline-eyes {
            background-color: var(--mm-outline, black);
        }

        .secondary-color {
            background-color: var(--mm-secondary, #00e8d8);
        }

        .primary-color {
            background-color: var(--mm-primary, #0070ec);
        }

        .face {
            background-color: var(--mm-face, #fcd8a8);
        }

        .eyes {
            background-color: var(--mm-eyes, #fcfcfc);
        }

        .row1 { grid-row: 1 / 2; grid-column: 10 / 13; }
        .row2a { grid-row: 2 / 3; grid-column: 9 / 10; }
        .row2b { grid-row: 2 / 3; grid-column: 10 / 12; }
        .row2c { grid-row: 2 / 3; grid-column: 12 / 15; }
        .row3a { grid-row: 3 / 4; grid-column: 8 / 9;}
        .row3b { grid-row: 3 / 4; grid-column: 9 / 11;}
        .row3c { grid-row: 3 / 4; grid-column: 11 / 12;}
        .row3d { grid-row: 3 / 4; grid-column: 12 / 15;}
        .row3e { grid-row: 3 / 4; grid-column: 15 / 16;}
        .row4a { grid-row: 4 / 5; grid-column: 7 / 11;}
        .row4b { grid-row: 4 / 5; grid-column: 11 / 16;}
        .row4c { grid-row: 4 / 5; grid-column: 16 / 17;}
        .row5a { grid-row: 5 / 6; grid-column: 6 / 7;}
        .row5b { grid-row: 5 / 6; grid-column: 7 / 8;}
        .row5c { grid-row: 5 / 6; grid-column: 8 / 10;}
        .row5d { grid-row: 5 / 6; grid-column: 10 / 11;}
        .row5e { grid-row: 5 / 6; grid-column: 11 / 16;}
        .row5f { grid-row: 5 / 6; grid-column: 16 / 17;}
        .row6a { grid-row: 6 / 7; grid-column: 6 / 7;}
        .row6b { grid-row: 6 / 7; grid-column: 7 / 8;}
        .row6c { grid-row: 6 / 7; grid-column: 8 / 10;}
        .row6d { grid-row: 6 / 7; grid-column: 10 / 16;}
        .row6e { grid-row: 6 / 7; grid-column: 16 / 17;}
        .row6f { grid-row: 6 / 7; grid-column: 17 / 18;}
        .row7 {
            grid-row: 7 / 8; grid-column: 6 / 18;
        }

Tags