Skip to content

Instantly share code, notes, and snippets.

@fzero

fzero/0README.md

Created May 28, 2018 16:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fzero/47d044b538018a78d21bdcc73c2aeb72 to your computer and use it in GitHub Desktop.
Save fzero/47d044b538018a78d21bdcc73c2aeb72 to your computer and use it in GitHub Desktop.
Download ZIP
RBC Frontend fundamentals - Advanced CSS
Raw
0README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Flexbox design</title>
<!-- To make sure emojis are displayed correctly -->
<meta charset="utf-8" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,400i,700,700i" rel="stylesheet" />
<!-- Our humble CSS -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<h1>🔥 Flexbox design 🔥</h1>
</header>
<!-- Main is configured as display: flex -->
<main>
<!-- Main content container -->
<section class="content">
<article>
<header>
<h2>The most amazing article you've ever read</h2>
</header>
<img class="feature-image left" src="img/noidea.jpg" />
<p>
Iceland pug forage deep v la croix schlitz tacos lumbersexual echo park. Thundercats mumblecore venmo slow-carb cornhole, kogi chia. Bespoke shabby chic umami polaroid. Tousled gastropub before they sold out slow-carb bitters subway tile. Salvia hoodie meggings blue bottle.
</p>
<p>
Cold-pressed DIY butcher vinyl vexillologist hoodie franzen lumbersexual hell of snackwave. Kale chips snackwave blog vegan brunch kombucha. Chicharrones brooklyn fashion axe, keytar fam butcher man braid vaporware neutra knausgaard migas kogi blog 90's. Fixie VHS street art locavore, pop-up iceland pour-over slow-carb vexillologist paleo narwhal bushwick gluten-free venmo. Lumbersexual bicycle rights cliche normcore gluten-free, ethical blog slow-carb.
</p>
<p>
PBR&B kombucha street art, post-ironic single-origin coffee tumeric art party fixie put a bird on it. Master cleanse kombucha truffaut bushwick godard meggings hot chicken slow-carb pabst stumptown salvia next level. Air plant selfies ethical, bicycle rights organic synth schlitz kinfolk meggings single-origin coffee ennui intelligentsia artisan readymade wayfarers. Thundercats umami sriracha, schlitz kinfolk letterpress celiac everyday carry chartreuse cred live-edge.
</p>
<p class="pull-quote">
Fixie VHS street art locavore, pop-up iceland pour-over slow-carb vexillologist paleo narwhal bushwick gluten-free venmo.
</p>
<p>
Cold-pressed DIY butcher vinyl vexillologist hoodie franzen lumbersexual hell of snackwave. Kale chips snackwave blog vegan brunch kombucha. Chicharrones brooklyn fashion axe, keytar fam butcher man braid vaporware neutra knausgaard migas kogi blog 90's. Fixie VHS street art locavore, pop-up iceland pour-over slow-carb vexillologist paleo narwhal bushwick gluten-free venmo. Lumbersexual bicycle rights cliche normcore gluten-free, ethical blog slow-carb.
</p>
<p>
Iceland pug forage deep v la croix schlitz tacos lumbersexual echo park. Thundercats mumblecore venmo slow-carb cornhole, kogi chia. Bespoke shabby chic umami polaroid. Tousled gastropub before they sold out slow-carb bitters subway tile. Salvia hoodie meggings blue bottle.
</p>
<footer>
By Angus LeBœuf - May 27, 2018
</footer>
</article>
<article>
<header>
<h2>3 ways to format your HTML! No. 3 will blow your mind!</h2>
</header>
<img class="feature-image right" src="img/mindblown.gif" />
<p>
Meditation blog four dollar toast taxidermy selfies brunch chicharrones. Cornhole 3 wolf moon skateboard fam semiotics. Cornhole trust fund listicle yuccie, pok pok +1 kale chips vinyl. Stumptown kombucha mustache man braid tacos green juice venmo kale chips try-hard art party. Banjo woke flannel, mixtape succulents scenester occupy dreamcatcher. Jianbing raw denim lo-fi blue bottle hoodie lumbersexual succulents crucifix you probably haven't heard of them air plant craft beer vegan chartreuse. Tattooed mlkshk 8-bit, vexillologist 90's leggings ramps retro.
</p>
<h3>1. Style your tags</h3>
<p>
Iceland pug forage deep v la croix schlitz tacos lumbersexual echo park. Thundercats mumblecore venmo slow-carb cornhole, kogi chia. Bespoke shabby chic umami polaroid. Tousled gastropub before they sold out slow-carb bitters subway tile. Salvia hoodie meggings blue bottle.
</p>
<h3>2. Use classes</h3>
<p>
Cold-pressed DIY butcher vinyl vexillologist hoodie franzen lumbersexual hell of snackwave. Kale chips snackwave blog vegan brunch kombucha. Chicharrones brooklyn fashion axe, keytar fam butcher man braid vaporware neutra knausgaard migas kogi blog 90's. Fixie VHS street art locavore, pop-up iceland pour-over slow-carb vexillologist paleo narwhal bushwick gluten-free venmo. Lumbersexual bicycle rights cliche normcore gluten-free, ethical blog slow-carb.
</p>
<p class="pull-quote">
Coding is hard! There's always something new to learn, and then some. Always practice your skills.
</p>
<p>
Iceland pug forage deep v la croix schlitz tacos lumbersexual echo park. Thundercats mumblecore venmo slow-carb cornhole, kogi chia. Bespoke shabby chic umami polaroid. Tousled gastropub before they sold out slow-carb bitters subway tile. Salvia hoodie meggings blue bottle.
</p>
<h3>3. Avoid using id's (I know right? MIND. BLOWN.)</h3>
<p>
PBR&B kombucha street art, post-ironic single-origin coffee tumeric art party fixie put a bird on it. Master cleanse kombucha truffaut bushwick godard meggings hot chicken slow-carb pabst stumptown salvia next level. Air plant selfies ethical, bicycle rights organic synth schlitz kinfolk meggings single-origin coffee ennui intelligentsia artisan readymade wayfarers. Thundercats umami sriracha, schlitz kinfolk letterpress celiac everyday carry chartreuse cred live-edge.
</p>
<p>
Viral franzen pitchfork artisan kogi mumblecore quinoa. Pop-up microdosing mixtape butcher freegan. Vaporware pickled microdosing, shoreditch fam ramps 8-bit tumeric organic taiyaki banh mi selvage. Jean shorts poutine tumblr farm-to-table hella letterpress drinking vinegar godard celiac occupy meditation poke activated charcoal scenester wolf. Gluten-free hashtag intelligentsia jianbing. Retro listicle YOLO ethical edison bulb tofu. Tousled yuccie YOLO, cold-pressed distillery quinoa hexagon humblebrag everyday carry intelligentsia drinking vinegar taiyaki.
</p>
<footer>
By Eblis O'Shaughnessy - May 27, 2018
</footer>
</article>
</section>
<!-- Sidebar container -->
<aside class="sidebar">
<h2>Other resources</h2>
<h3>CSS</h3>
<ul>
<li>
<a href="https://css-tricks.com/">
CSS Tricks
</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">
Mozilla Developer Network
</a>
</li>
</ul>
<h3>Javascript</h3>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">
Mozilla Developer Network (again!)
</a>
</li>
<li>
<a href="https://www.javascript.com/">
Javascript.com (CodeSchool)
</a>
</li>
</ul>
<h3>Other</h3>
<ul>
<li>
<a href="https://www.smashingmagazine.com/">
Smashing magazine
</a>
</li>
</ul>
<h3>Cool examples who helped us in the past</h3>
<section class="parent">
<div class="box child-a">A</div>
<div class="box child-b">B</div>
<div class="box child-c">C</div>
<div class="box child-d">D</div>
<div class="box child-a">E</div>
<div class="box child-b">F</div>
<div class="box child-c">G</div>
<div class="box child-d">H</div>
<div class="box child-a">I</div>
<div class="box child-b">J</div>
<div class="box child-c">K</div>
<div class="box child-d">L</div>
<div class="box child-a">M</div>
</section>
</aside>
</main>
</body>
</html>
Raw
style.css
body {
margin: 2% 10% 20% 10%;
font-family: 'Raleway', sans-serif;
font-size: 20px;
}
h1, h2, h3 {
font-family: 'Oswald', sans-serif;
}
h1 {
font-size: 72px;
text-align: center;
padding: 15px;
border-radius: 15px;
}
article p:first-of-type:first-letter {
font-size: 64px;
color: maroon;
}
/*
This is the global flex container for the design.
We set flex-direction to "row" so elements within will
be displayed side-by-side.
*/
main {
display: flex;
flex-direction: row;
}
p::selection {
background-color: yellow;
}
/*
This is the flex element to be displayed on the left.
It will ocupy 75% of the screen (with margin).
Remember that margins are outside of the border.
*/
.content {
width: 73%;
margin-right: 2%;
flex-grow: 3;
}
.content article {
margin-bottom: 100px;
}
.content article h2 {
font-size: 48px;
}
.content article h3 {
margin-bottom: 0;
}
.content article p {
line-height: 1.5em;
}
.content article .pull-quote {
font-size: 32px;
font-style: italic;
color: maroon;
margin: 32px;
padding: 0 15px 0 15px;;
}
.content article .feature-image {
display: block;
border-radius: 5px;
width: 300px;
margin-bottom: 15px;
box-shadow: 5px 3px 16px 4px rgba(0, 0, 0, 0.2);
}
.content article .right {
float: right;
margin-left: 30px;
}
.content article .left {
float: left;
margin-right: 30px;
}
.content footer {
font-style: italic;
font-weight: bold;
text-align: right;
margin-top: 20px;
}
/*
This is the flex element to be displayed on the right.
It's a sidebar. It will ocupy 25% of the screen.
Remember that padding is contained within the border.
*/
.sidebar {
width: 25%;
padding: 0 2% 0 2%;
flex-grow: 1;
border-left: 1px solid darkgray;
}
.sidebar h2 {
padding: 5px;
color: white;
background-color: black;
border-radius: 5px;
}
.sidebar h3 {
margin-bottom: 0;
border-bottom: 1px solid black;
}
.sidebar ul {
list-style-type: none;
padding: 0;
margin-bottom: 40px;
line-height: 1.5em;
}
.sidebar a {
color: black;
text-decoration: none;
}
.sidebar li {
transition: all 1.5s linear;
/* transition-property: all;
transition-duration: 1.5s;
transition-timing-function: linear; */
}
.sidebar li:hover {
background-color: lightblue;
margin-left: 20px;
}
/*
This is the PARENT flexbox component. The properties here will control how all
contained components (CHILDREN) will behave.
Each property below should show up only once, but all options are included
below. Un-comment specific lines to see how they change how elements are
displayed!
The initially un-commented lines correspond to the standard options used when
the properties are not defined.
*/
.parent {
margin-top: 25px;
display: flex; /* Makes element flexbox-capable */
flex-direction: row;
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
justify-content: flex-start;
/*justify-content: flex-end;*/
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
/* justify-content: space-evenly; */
align-items: stretch;
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*align-items: baseline;*/
/* flex-wrap: no-wrap; */
flex-wrap: wrap;
/*flex-wrap: reverse;*/
align-content: stretch;
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: center;*/
/*align-content: space-between;*/
}
.parent div:nth-child(3) {
width: 200px;
height: 200px;
}
/* Basic definition of our child components - they all show up as boxes */
.box {
color: white;
width: 50px;
padding: 10px;
text-align: center;
border-radius: 5px;
}
/*
Now we specify properties for each individual children.
Here you can play with the followind flexbox properties:
order
align-self
flex-shrink
flex-grow
Feel free to change other properties as well: width, height, margins etc.
*/
.child-a {
background-color: red;
}
.child-b {
background-color: green;
}
.child-c {
background-color: blue;
}
.child-d {
background-color: purple;
}
/*
These are the media queries we're using to display different content
for different screen sizes. This CSS will be used only for screens smaller
than 768px.
*/
@media screen and (max-width: 768px) {
main {
display: block;
}
h1 {
font-size: 48px;
}
.content {
width: 100%;
margin-right: 0;
}
.content article h2 {
font-size: 32px;
}
.content article h3 {
font-size: 24px;
}
.content article .feature-image {
display: block;
border-radius: 5px;
width: 200px;
margin-bottom: 15px;
box-shadow: 5px 3px 16px 4px rgba(0, 0, 0, 0.2);
}
.sidebar {
width: 100%;
padding: 0 2% 0 2%;
border-left: none;
}
}
/*
This CSS will be used only for screens smaller than 480px.
It hides the sidebar completely.
*/
@media screen and (max-width: 480px) {
.sidebar {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment