I’ve decided to finally get around to redoing my site design.
I’m really pleased with how flex and @media are working with my simple 2-column layout.
I’ve tested using the Chrome emulator and the 7 browsers I have.
The only issue I see is that in Chrome, IE 11, and Vivaldi, there is a slight containment problem where longer words in the aside overflow at narrow view-port widths and when zoomed.
I see no problems with Opera 12, Edge, Firefox, or Firefox Dev.
The aside moves to after the section when the view-port is narrowed and when zoomed in (tested up to 200% zoom)
Eventually the main “section” content will have more complex elements (tables, highlighted source code, image sliders, etc.) but before I got too deep into it I was hoping for some feedback.
First, the CSS
I think I have some feel for using flex, but I admit that ATM it’s more a “found it, tried it, tested how it works” than it is any real deep understanding.
TBH I still feel confused by how sometimes the “flex” is the CSS property and other times it’s the CSS value. And OMG all the vendor prefixes for different browsers and even different versions of the same browser.
Second, semantics
My alpha 0.1 had “main” inside “section”. The validator passed the mark-up, but it seems it will pass just about any mish-mash of tags without passing judgement on the semantics.
Third, accessibility
The only place I could see that was appropriate for adding a “role” was “main”, but I could very well be missing some and I’d prefer not to do this as a “I’ll do it later” thing.
If you want to test using the logo image, here it is 
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Index</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin, padding: 0;
/* for testing only
outline: 1px solid #060;
*/
}
html {
background-color: #beb;
font-size: 100%;
}
body {}
header {}
nav {
text-align: center;
padding: 0.3rem 0.1rem ;
background-color: #cfc;
}
nav a {
margin: 0 0.3rem;
}
h1 {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -webkit-flex; /* NEW - Chrome */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -moz-flex;
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0;
font-size: 3rem;
background-image: linear-gradient(10deg, #b4ffc8, #56996a);
}
h1 img {
margin: 0.5rem;
}
h1 span {
display: inline-block;
margin: 0 0 0 1rem;
}
.main {
-ms-box-orient: horizontal;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -webkit-flex; /* NEW - Chrome */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -moz-flex;
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-pack: justify;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
justify-content: space-around;
-webkit-flex-flow: row wrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
flex-flow: row wrap;
background-color: #e9ffe9;
}
section {
-webkit-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
-moz-box-flex: 1 100%;
flex: 5;
-webkit-box-ordinal-group: 2;
-webkit-order: 2;
-ms-flex-order: 2;
-moz-box-ordinal-group: 2;
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
padding: 0.2rem 0.8rem;
border-left: 2px dashed #beb;
font-size: 1.1rem;
}
section h2 {
-webkit-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
-moz-box-flex: 1 100%;
flex: 1 100%;
margin: 0;
font-size: 2rem;
}
section h2 span {}
section p {}
aside {
-webkit-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
-moz-box-flex: 1 100%;
flex: 1;
-webkit-box-ordinal-group: 1;
-webkit-order: 1;
-ms-flex-order: 1;
-moz-box-ordinal-group: 1;
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: 0.2rem 0.4rem 0.2rem 0.8rem;
border-right: 2px dashed #beb;
font-size: 1.1rem;
}
aside h3 {
-webkit-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
-moz-box-flex: 1 100%;
flex: 1 100%;
margin: 0;
font-size: 1rem;
}
aside h3 span {}
aside p {}
footer {
-webkit-box-flex: 1 100%;
-webkit-flex: 1 100%;
-ms-flex: 1 100%;
-moz-box-flex: 1 100%;
flex: 1 100%;
padding: 0.2rem 0.5rem;
text-align: center;
}
footer p {}
footer p a {}
@media only screen and (max-width: 450px) {
.main, aside, section {
display: block;
font-size: 1rem;
}
aside {
border-top: 2px dashed #beb;
}
section {
border-bottom: 2px dashed #beb;
}
h1 {
font-size: 2rem;
}
section h2 {
font-size: 1.5rem;
}
}
</style>
<script>
// script needed before the DOM is loaded here
</script>
</head>
<body>
<header><!-- support GOOD -->
<nav><!-- support GOOD -->
<a href="http://www.catipsum.com/">Cat Ipsum</a>
</nav>
<h1>
<a href="#" title="home link">
<img src="images/vernal.jpg" class="logo" width="100" height="75" alt="logo" />
</a>
<span>Test Index</span>
</h1>
</header>
<!-- IE doesn't support main -->
<div class="main" role="main">
<section><!-- support GOOD -->
<h2>
<span>Flex Testing</span>
</h2>
<p>Chase red laser dot shove bum in owner's face like camera lens missing until dinner time, or pooping rainbow while flying in a toasted bread costume in space, pee in the shoe. Shake treat bag asdflkjaertvlkjasntvkjn (sits on keyboard) for destroy couch, and tuxedo cats always looking dapper, so spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce so eat a plant, kill a hand. Use lap as chair sleep nap so missing until dinner time, yet mew. If it fits, i sits thinking longingly about tuna brine climb leg chase dog then run away but meow. Attack the dog then pretend like nothing happened. Destroy the blinds walk on car leaving trail of paw prints on hood and windshield so inspect anything brought into the house chase after silly colored fish toys around the house meow for food, then when human fills food dish, take a few bites of food and continue meowing. Damn that dog.</p>
<p>Chase the pig around the house you call this cat food? rub face on owner. Immediately regret falling into bathtub cat slap dog in face so leave dead animals as gifts, and kitty power! . Attack the dog then pretend like nothing happened claws in your leg hide from vacuum cleaner for unwrap toilet paper, leave hair everywhere. Steal the warm chair right after you get up attack feet. Stare at the wall, play with food and get confused by dust lick butt. Poop in litter box, scratch the walls the dog smells bad but my left donut is missing, as is my right for claws in your leg. Knock over christmas tree destroy couch. Intrigued by the shower nap all day, but cough furball lick the plastic bag. Peer out window, chatter at birds, lure them to mouth cat slap dog in face so refuse to drink water except out of someone's glass or climb leg. Always hungry stand in front of the computer screen, and knock over christmas tree, stick butt in face who's the baby, so purr while eating and where is my slave? I'm getting hungry.</p><p> Throwup on your pillow. Get video posted to internet for chasing red dot. Then cats take over the world curl into a furry donut eat a plant, kill a hand leave fur on owners clothes chase laser. Lick the plastic bag hopped up on catnip, for give attitude, so missing until dinner time asdflkjaertvlkjasntvkjn (sits on keyboard). Meowwww have secret plans give attitude intrigued by the shower ignore the squirrels, you'll never catch them anyway for sun bathe. Unwrap toilet paper. Vommit food and eat it again chase mice, yet cat is love, cat is life, steal the warm chair right after you get up. Chirp at birds love to play with owner's hair tie, or touch water with paw then recoil in horror. Drink water out of the faucet lick the plastic bag missing until dinner time, for love to play with owner's hair tie. Nap all day cat slap dog in face.</p>
</section>
<aside><!-- support GOOD -->
<h3>
<span>aside</span>
</h3>
<p>Poop in litter box, scratch the walls sit by the fire play time, so find something else more interesting, so flee in terror at cucumber discovered on floor but burrow under covers chew on cable. Cough furball who's the baby.</p>
</aside>
</div>
<footer><!-- support GOOD -->
<p>Meowing non stop for food rub face on everything, but paw at your fat belly yet see owner, run in terror, present belly, scratch hand when stroked. Behind the couch use lap as chair has closed eyes but still sees you sleep on keyboard. Why must they do that meow stretch. Claw drapes eat and than sleep on your face steal the warm chair right after you get up. Leave dead animals as gifts hopped up on catnip.
<a href="http://www.catipsum.com/">Cat Ipsum</a></p>
</footer>
<script>
// script that needs the DOM to be loaded here
</script>
</body>
</html>
