Minimum Effort, Maximum Result
<div class="container">
</div>
body {
background: #ECC561;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
}
<div class="container">
<header>
<h1>TechNews v0.1</h1>
</header>
<main>
<h2>Main</h2>
</main>
<footer>
<h3>Footer</h3>
</footer>
</div>
body {
background: #ECC561;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
display: flex;
}
.container {
display: flex;
}
header {
display: flex;
background-color: #FFB36B;
}
main {
display: flex;
background-color: #FFF;
}
footer {
display: flex;
background-color: #FF956B;
}
body {
background: #ECC561;
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
display: flex;
+ justify-content: center;
}
.container {
display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 1024px;
+ min-height: 100vh;
}
header {
display: flex;
background-color: #FFB36B;
+ flex-basis: 100px;
}
main {
display: flex;
background-color: #FFF;
+ flex-grow: 1;
}
footer {
display: flex;
background-color: #FF956B;
+ flex-basis: 50px;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
flex-basis: 20px;
+ padding: 15px;
background-color: #FFB36B;
- flex-basis: 100px;
}
main {
display: flex;
flex-grow: 1;
+ padding: 15px;
background-color: #FFF;
}
footer {
display: flex;
+ flex-direction: row;
+ justify-content: center;
flex-basis: 30px;
+ padding: 15px;
background-color: #FF956B;
}
<div class="container">
<header>
<h1>TechNews v0.1</h1>
</header>
<main>
<h2>Best Articles</h2>
<div class="articlesWrapper">
<% 10.times do %>
<article>
<div class="imgPlaceholder"></div>
<div class="articleContent">
<h3>DataGrip 2016.3 Released!</h3>
<p>New features - triggers support, find usages inside views/procedures, bulk submitting of changes and more</p>
</div>
</article>
<% end %>
</div>
</main>
<footer>
<p>Footer</p>
</footer>
</div>
main {
display: flex;
+ flex-direction: column;
flex-grow: 1;
padding: 15px;
background-color: #FFF;
}
+.articlesWrapper {
+ display: flex;
+}
+
+.imgPlaceholder {
+ height: 100px;
+ width: 100px;
+ background-color: #CCC;
+}
.articlesWrapper {
display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
}
.imgPlaceholder {
height: 100px;
width: 100px;
+ flex-shrink: 0;
background-color: #CCC;
}
+article {
+ width: 300px;
+ display: flex;
+ margin: 0 20px 20px 0;
+}
+
+.articleContent {
+ padding-left: 10px;
+}
+
+.articleContent h3 {
+ margin: 0;
+}
header {
display: flex;
flex-direction: column;
justify-content: center;
+ align-items: center;
}
Total CSS lines written - 72!
Minified build - less than 100B!!
Responsive by nature
Only 6 new CSS properties -
flex-direction
justify-content
align-items
flex-basis
flex-grow
flex-wrap
flex-shrink
As promised - Minimum effort, maximum result!