Skip to content

Instantly share code, notes, and snippets.

@JoelCodes

JoelCodes/columns.html

Created June 16, 2017 18:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JoelCodes/557c56cd23f835dd6d4e4638e297edf8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JoelCodes/557c56cd23f835dd6d4e4638e297edf8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
columns.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
body {
background: deepskyblue;
font-size: 16px;
color: white;
font-family: 'Raleway', sans-serif;
}
.tomato-box {
margin: 10px;
padding: 10px;
background: tomato;
box-sizing: border-box;
border-radius: 5px;
}
.box-1, .box-2, .box-3{
box-sizing: border-box;
float:left;
width: 100%
}
@media(min-width: 720px) and (max-width: 960px){
.box-1{ width: 66.66666% }
.box-2{ width: 33.33333% }
}
@media(min-width: 960px){
.box-1{ width: 50%}
.box-2, .box-3 {width: 25%}
}
</style>
</head>
<body>
<div class="box-1">
<div class="tomato-box">
Waistcoat taxidermy XOXO cred, 3 wolf moon godard photo booth twee gluten-free tumblr. Chillwave affogato hella tumeric pickled readymade, hashtag tofu lyft selfies iPhone. Next level flexitarian bespoke, everyday carry echo park ugh street art craft beer humblebrag you probably haven't heard of them snackwave neutra gentrify blue bottle. Chartreuse trust fund mlkshk, synth mixtape chia food truck PBR&B sartorial. Portland kogi shabby chic, williamsburg mumblecore wayfarers 90's kombucha. Edison bulb polaroid austin irony fanny pack. Single-origin coffee letterpress plaid distillery tofu.
Forage cronut leggings, food truck distillery poke aesthetic. Edison bulb jean shorts cliche blog, semiotics kale chips listicle mumblecore fanny pack scenester chartreuse. Hella keffiyeh vexillologist yr drinking vinegar. Fashion axe austin microdosing blue bottle. Pork belly meh hashtag synth migas polaroid. Man bun hammock jean shorts, venmo deep v vexillologist distillery franzen meggings raclette. Jianbing organic 90's, godard viral fanny pack brooklyn migas gentrify man braid kickstarter twee food truck brunch. </div>
</div>
<div class="box-2">
<div class="tomato-box">
Deep v scenester listicle hella stumptown blue bottle pickled, retro direct trade wayfarers intelligentsia viral mlkshk. Fam sartorial iceland everyday carry messenger bag asymmetrical. Echo park everyday carry ethical hexagon tumblr kogi. Neutra helvetica offal mlkshk gluten-free listicle, migas selvage taxidermy 90's knausgaard umami affogato put a bird on it iceland. Heirloom vaporware pok pok glossier jianbing. Pok pok mustache hell of, kinfolk shoreditch sustainable sartorial you probably haven't heard of them tumeric brooklyn cornhole thundercats. Gastropub 3 wolf moon banjo fam hoodie leggings.
</div>
</div>
<div class="box-3">
<div class="tomato-box">
Mumblecore tilde meh, tacos taxidermy succulents jean shorts cray keytar live-edge VHS everyday carry 3 wolf moon. Hashtag chicharrones disrupt marfa. Street art everyday carry venmo butcher DIY. +1 vinyl roof party readymade bushwick squid, gluten-free heirloom intelligentsia. Schlitz paleo locavore post-ironic copper mug brooklyn. Before they sold out lyft irony actually. VHS af meh, butcher irony artisan tote bag fashion axe occupy. </div>
</div>
</body>
</html>
Raw
font-sizes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
/* http://type-scale.com/ */
html {font-size: calc(6px + 1vw);}
body {
background-color: white;
font-family: 'Libre Baskerville', serif;
font-weight: 400;
line-height: 1.45;
color: #333;
}
p {margin-bottom: 1.3em;}
h1, h2, h3, h4 {
margin: 1.25 0 0.5em;
font-weight: inherit;
line-height: 1.2;
}
h1 {
margin-top: 0;
font-size: 2.441em;
}
h2 {font-size: 1.953em;}
h3 {font-size: 1.563em;}
h4, .font_large {font-size: 1.25em;}
small, .font_small {font-size: 0.8em;}
small {
color: #666;
}
aside{
float:left;
width: 30%;
border: 1px solid #666;
padding: .5em;
margin: 0 .5em .5em 0;
}
aside p{
font-size: .8em;
}
aside .title{
font-size: 1em;
}
.float-right{
float: right;
}
</style>
</head>
<body>
<h1>Page Title <small>Smaller note</small></h1>
<h2>Introduction <small>Smaller note</small></h2>
<p>Glossier shabby chic before they sold out church-key banh mi. Williamsburg venmo adaptogen, paleo cardigan sustainable helvetica church-key. Food truck migas actually, man braid retro next level succulents. Poke health goth viral la croix narwhal artisan. Thundercats slow-carb meditation shaman coloring book mumblecore umami try-hard retro, portland disrupt poutine whatever pop-up prism. Taiyaki deep v kinfolk, tilde helvetica gochujang franzen truffaut intelligentsia cred tbh pok pok vice. Kale chips hoodie trust fund yr seitan pork belly health goth.</p>
<aside>
<p class="title">Did you know?</p>
<p>Taiyaki deep v kinfolk, tilde helvetica gochujang franzen truffaut intelligentsia cred tbh pok pok vice. Kale chips hoodie trust fund yr seitan pork belly health goth.</p>
</aside>
<p>Glossier shabby chic before they sold out church-key banh mi. Williamsburg venmo adaptogen, paleo cardigan sustainable helvetica church-key. Food truck migas actually, man braid retro next level succulents. Poke health goth viral la croix narwhal artisan. Thundercats slow-carb meditation shaman coloring book mumblecore umami try-hard retro, portland disrupt poutine whatever pop-up prism. Taiyaki deep v kinfolk, tilde helvetica gochujang franzen truffaut intelligentsia cred tbh pok pok vice. Kale chips hoodie trust fund yr seitan pork belly health goth.</p>
<aside class="float-right font_small">
<p class="title">Did you know?</p>
<p>Taiyaki deep v kinfolk, tilde helvetica gochujang franzen truffaut intelligentsia cred tbh pok pok vice. Kale chips hoodie trust fund yr seitan pork belly health goth.</p>
</aside>
<p>Glossier shabby chic before they sold out church-key banh mi. Williamsburg venmo adaptogen, paleo cardigan sustainable helvetica church-key. Food truck migas actually, man braid retro next level succulents. Poke health goth viral la croix narwhal artisan. Thundercats slow-carb meditation shaman coloring book mumblecore umami try-hard retro, portland disrupt poutine whatever pop-up prism. Taiyaki deep v kinfolk, tilde helvetica gochujang franzen truffaut intelligentsia cred tbh pok pok vice. Kale chips hoodie trust fund yr seitan pork belly health goth.</p>
</body>
</html>
Raw
media-query-portrait-landscape.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media(orientation:portrait){
body {
background: crimson;
}
}
@media(orientation: landscape){
body {
background: cornflowerblue
}
}
</style>
</head>
<body>
</body>
</html>
Raw
media-query.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Small Setting */
@media(max-width:480px){
body {
background-color: tomato;
}
}
/* Medium Setting */
@media(min-width:480px) and (max-width: 960px){
body{
background-color: deepskyblue;
}
}
/* Large Setting */
@media(min-width:960px){
body{
background-color: khaki;
}
}
</style>
</head>
<body>
</body>
</html>
Raw
no-vp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Viewport</title>
<style>
* {
box-sizing: border-box;
/* Disable font boosting */
max-height: 1000000px;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
body {
/* Checkerboard Gradient */
background-color: white;
background: -webkit-linear-gradient(bottom left, #666 25%, transparent 25%),
-webkit-linear-gradient(top right, #666 25%, transparent 25%) 50px 50px,
-webkit-linear-gradient(top left, #666 25%, transparent 25%) 50px 0,
-webkit-linear-gradient(bottom right, #666 25%, transparent 25%);
background: -moz-linear-gradient(bottom left, #666 25%, transparent 25%),
-moz-linear-gradient(top right, #666 25%, transparent 25%) 50px 50px,
-moz-linear-gradient(top left, #666 25%, transparent 25%) 50px 0,
-moz-linear-gradient(bottom right, #666 25%, transparent 25%);
background: -o-linear-gradient(bottom left, #666 25%, transparent 25%),
-o-linear-gradient(top right, #666 25%, transparent 25%) 50px 50px,
-o-linear-gradient(top left, #666 25%, transparent 25%) 50px 0,
-o-linear-gradient(bottom right, #666 25%, transparent 25%);
background: linear-gradient(to top right, #666 25%, transparent 25%),
linear-gradient(to bottom left, #666 25%, transparent 25%) 50px 50px,
linear-gradient(to bottom right, #666 25%, transparent 25%) 50px 0,
linear-gradient(to top left, #666 25%, transparent 25%) 0 50px;
background-size: 100px 100px;
}
article {
width: 100%;
color: #ccc;
background-color: rgba(0, 0, 0, 0.9);
padding: 10px;
border-radius: 4px;
}
b {
color: #fff;
}
</style>
</head>
<body>
<article role="main">
<h1><code>viewport</code> <b>not</b> set</h1>
<p>
This page does <b>NOT</b> have the <code>meta
viewport</code> set.
</p>
<p>
This is a test to show how the <code>meta viewport</code> tag
affects a page. To simplify this example as much as possible,
font boosting has been disabled.
</p>
<p>
<b>Note:</b> each box on the background is 50px wide.
</p>
</article>
</body>
</html>
Raw
responsive-table.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Responsive Tables
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css">
</head>
<body>
<div class="container">
<table class="table table-striped table-condensed">
<tr class='hidden-xs'>
<td class='visible-xs'>
</td>
<th>User ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Location</th>
</tr>
<tr>
<td class="visible-xs">
<dl class="dl-horizontal">
<dt>User ID</dt>
<dd>U1234</dd>
<dt>First Name</dt>
<dd>Joel</dd>
<dt>Last Name</dt>
<dd>Shinness</dd>
<dt>Email</dt>
<dd>[email protected]</dd>
<dt>Location</dt>
<dd>Vancouver</dd>
</dl>
</td>
<td class="hidden-xs">U1234</td>
<td class="hidden-xs">Joel</td>
<td class="hidden-xs">Shinness</td>
<td class="hidden-xs">[email protected]</td>
<td class="hidden-xs">Vancouver</td>
</tr>
<tr>
<td class="visible-xs">
<dl class="dl-horizontal">
<dt>User ID</dt>
<dd>U2345</dd>
<dt>First Name</dt>
<dd>Don</dd>
<dt>Last Name</dt>
<dd>Burks</dd>
<dt>Email</dt>
<dd>[email protected]</dd>
<dt>Location</dt>
<dd>Vancouver</dd>
</dl>
</td>
<td class="hidden-xs">U2345</td>
<td class="hidden-xs">Don</td>
<td class="hidden-xs">Burks</td>
<td class="hidden-xs">[email protected]</td>
<td class="hidden-xs">Vancouver</td>
</tr>
</table>
</div>
</body>
</html>
Raw
sass-_variables.scss
$blue:deepskyblue;
Raw
sass-basic.scss
@import '_variables';
.blue {
background-color: $blue;
}
/* Generated Content */
@for $i from 1 through 3{
.blue-light-#{$i}{
background-color: lighten($blue , $i * 5%);
}
.blue-dark-#{$i}{
background-color: darken($blue , $i * 5%);
}
}
/* Nested Rules */
.tweet {
border: 1px solid cadetblue;
border-radius: 5px;
opacity: .5;
header{
background: papayawhip;
clear: both;
}
section {
color: #666;
}
/* This is applied without a space, as .tweet:hover */
&:hover {
opacity: 1;
}
}
/* Extending Code */
%button {
border-radius: 5px;
border: 1px solid black;
}
/* Mixins are like extensions, but you can add function params */
@mixin dark-button($bg){
@extend %button;
background-color: $bg;
border-color: darken($bg, 20%);
color: snow;
transition: background-color .5s;
&:hover {
background-color: darken($bg, 20%);
}
}
.button-success{
@include dark-button(limegreen);
}
.button-danger{
@include dark-button(tomato);
}
Raw
sass.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles/basic.css"/>
</head>
<body>
<p>To compile:</p>
<ul>
<li>Put all the scss files in a folder titled <code>sass</code>,</li>
<li>Install the sass gem with <code>gem install sass</code></li>
<li>and run the sass gem with <code>sass --watch --no-cache sass/basic.scss:styles/basic.css.</code></li>
</ul>
<div class="blue-dark-3">&nbsp;</div>
<div class="blue-dark-2">&nbsp;</div>
<div class="blue-dark-1">&nbsp;</div>
<div class="blue">&nbsp;</div>
<div class="blue-light-1">&nbsp;</div>
<div class="blue-light-2">&nbsp;</div>
<div class="blue-light-3">&nbsp;</div>
<p>
<button class="button-success">Button</button>
<button class="button-danger">Button</button>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment