Skip to content

Instantly share code, notes, and snippets.

@tsvetkovpro

tsvetkovpro/Animals

Last active June 27, 2016 02:19
Show Gist options
  • Save tsvetkovpro/ec9ac054aefbd1dd4c38 to your computer and use it in GitHub Desktop.
Save tsvetkovpro/ec9ac054aefbd1dd4c38 to your computer and use it in GitHub Desktop.
Download ZIP
html:
Raw
Animals
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
</head>
<body>
<div id="album">
<div class="ui piled compact segment">
<div class="floating ui red label">9</div>
<div class="ui card">
<div class="blurring dimmable image">
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div class="ui red button view">VIEW</div>
</div>
</div>
</div>
<img src="http://mrg.bz/IxQIgC">
</div>
<div class="content">
<div id="rate" class="ui star rating right floated" data-rating="3"></div>
<div class="header">Animals</div>
<div class="meta">
<span class="date"><i class="calendar icon"></i>Created 7/27/2014</span>
<span class="right floated date"><i class="history icon"></i> Modified 8/4/2014</span>
</div>
<div class="description">
Different animals from around the world
</div>
</div>
<div class="extra content" >
<div class="ui right labeled button" data-content="Like it!" data-variation="tiny" tabindex="0">
<div class="ui red icon tiny button">
<i class="thumbs outline up large icon"></i>
</div>
<a class="ui basic red left pointing label">
365
</a>
</div>
<div class="ui left labeled right floated button" data-content="Share it!" data-variation="tiny" tabindex="0">
<a class="ui basic red right pointing label">
183
</a>
<div class="ui red icon tiny button">
<i class="external share large icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ALBUM ITEMS -->
<div id="album_items">
<button class="ui labeled icon button back">
<i class="arrow lircle left icon"></i>
Back
</button>
<div class="ui cards">
<div class="card">
<div class="image">
<img src="http://mrg.bz/IxQIgC">
</div>
<div class="content">
<div class="header">giraffes.jpg</div>
<div class="meta">263 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/khPVF7">
</div>
<div class="content">
<div class="header">zebras.jpg</div>
<div class="meta">284 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/dvbIRa">
</div>
<div class="content">
<div class="header">hippopotami.jpg</div>
<div class="meta">161 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/iBt7gI">
</div>
<div class="content">
<div class="header">elephants.jpg</div>
<div class="meta">230 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/k0u6U2">
</div>
<div class="content">
<div class="header">tigres.jpg</div>
<div class="meta">272 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/7XQcjZ">
</div>
<div class="content">
<div class="header">lions.jpg</div>
<div class="meta">193 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/nAnLej">
</div>
<div class="content">
<div class="header">pandas.jpg</div>
<div class="meta">187 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/BJkK4M">
</div>
<div class="content">
<div class="header">monkeys.jpg</div>
<div class="meta">213 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
<div class="card">
<div class="image">
<img src="http://mrg.bz/zX1SzA">
</div>
<div class="content">
<div class="header">ponies.jpg</div>
<div class="meta">235 KB</div>
</div>
<div class="ui bottom attached basic buttons">
<button class="ui button"><i class="pencil icon"></i></button>
<button class="ui button"><i class="trash icon"></i></button>
</div>
</div>
</div>
</div>
</body>
</html>
body {
margin: 30px;
background-color: whitesmoke;
}
.ui.cards >.card {
width: 210px;
}
.ui.cards > .card > .content > .header:not(.ui) {
font-size: 1.1em;
font-weight: normal;
}
.ui.cards > .card .meta,
.ui.card .meta {
font-size: 0.8em;
}
#album_items {
display: none;
}
#album_items .ui.cards {
margin: 10px;
}
$( document ).ready(function() {
$('.ui.card .image').dimmer({on: 'hover'});
$('.ui.rating').rating({maxRating: 5});
$('.ui.button').popup();
$('.button.view').on('click', (function() {
$('#album').fadeOut("slow", function () {
$('#album_items').fadeIn("slow");
});
}));
$('.button.back').on('click', (function() {
$('#album_items').fadeOut("slow", function () {
$('#album').fadeIn("slow");
});
}));
});
Raw
bootstrap cheetsheet
http://hackerthemes.com/bootstrap-cheatsheet/
Raw
favicon.ico
How to Make a Favicon Small and Cacheable - https://www.keycdn.com/blog/make-a-favicon/
https://realfavicongenerator.net/favicon/gulp#.V09aB5ErK9I
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" /> - recommendation of trying to keep your favicon under 1 KB
Leverage Browser Caching with Expires Headers
Add Expires Headers in Apache by adding it to your .htaccess file. Note the line with the image/x-icon.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
Cache-Control
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
cdn:
<link rel="shortcut icon" href="//cdn.perfmatters.io/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="//cdn.keycdn.com/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="//cdn.keycdn.com/favicon.ico">
<link rel="apple-touch-icon" href="//cdn.keycdn.com/apple-touch-icon.png">
Raw
flexbox-patterns
https://github.com/cjcenizal/flexbox-patterns
Raw
Flexible Sized Grids with auto-fill and minmax
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g">G</div>
<div class="box h">H</div>
<div class="box i">I</div>
<div class="box j">J</div>
<div class="box k">K</div>
<div class="box l">L</div>
<div class="box m">M</div>
</div>
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.a {
grid-column: auto / span 2;
}
.k {
grid-column: auto / span 3;
}
.g {
grid-column: auto / span 2;
grid-row: auto / span 2;
}
Raw
html: addaptive tabs
<div class="tabs">
<input class="state" type="radio" title="Breakfast" name="state" id="breakfast" checked="">
<input class="state" type="radio" title="Dinner" name="state" id="dinner">
<input class="state" type="radio" title="Dessert" name="state" id="dessert">
<div class="tab-links">
<label for="breakfast" id="breakfast-tab" class="tab">Breakfast</label>
<label for="dinner" id="dinner-tab" class="tab">Dinner</label>
<label for="dessert" id="dessert-tab" class="tab">Dessert</label>
</div>
<div class="panels">
<div id="breakfast-panel" class="panel active">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/bacon.jpg" alt="mountain" / align="left" alt="Gimme Bacon!">
<p>Breakfast will be a exquisite pile of bacon served on a Thanksgisving platter. No eggs, no toast and no orange juice. Serves 1 person.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
</div>
<div id="dinner-panel" class="panel">
<p>Dinner will be graciously catered by Taco Bell. Get ready for a literal and figurative blast!</p>
</div>
<div id="dessert-panel" class="panel">
<li>A whole red velvet cake</li>
<li>Rocky road ice cream</li>
<li>S'mores</li>
<li>Cotton candy (the multicolored kind)</li>
<li>Krispy Kreme glaze donuts</li>
<li>Coffee (no decaf allowed)</li>
<li>A toothbrush</li>
</div>
</div>
</div>
.tabs .panel img {
margin: 0 15px;
width: 25%;
}
/* DEMO STYLES */
/* Android 2.3 :checked fix */
@keyframes fix {
from {
opacity: 1;
}
to {
opactity: 1
}
}
body {
animation: fix 1s infinite;
}
.tabs .state {
display: none;
}
#breakfast:focus ~ .tabs #breakfast-tab,
#dinner:focus ~ .tabs #dinner-tab,
#dessert:focus ~ .tabs #dessert-tab {
box-shadow: 0 0 3px 3px rgba(0,127,255,.5);
}
.tabs .tab {
display: inline-block;
padding: 10px;
vertical-align: top;
background-color: #eee;
cursor: hand;
cursor: pointer;
}
.tabs .tab:hover {
background-color: #fff;
}
#breakfast:checked ~ .tab-links #breakfast-tab,
#dinner:checked ~ .tab-links #dinner-tab,
#dessert:checked ~ .tab-links #dessert-tab {
background-color: #fff;
border-bottom: 5px solid #fff;
cursor: default;
}
.tabs .panels {
background-color: #fff;
padding: 20px;
}
.tabs .panel {
display: none;
}
#breakfast:checked ~ .panels #breakfast-panel,
#dinner:checked ~ .panels #dinner-panel,
#dessert:checked ~ .panels #dessert-panel {
display: inline-block;
}
/* PRESENTATIONAL STYLES */
body {
background-color: #ddd;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.25em;
line-height: 1.5;
padding: 20px;
}
p {
margin-bottom: 15px;
}
Raw
html: doctype template
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
Raw
Meta-Tags-for-Social-Media.html
<!-- Essential META Tags -->
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta name="og:site_name" content="European Travel, Inc.">
<meta name="twitter:image:alt" content="Alt text for image">
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">
Raw
Pizza Margherita
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
</head>
<body>
<div class="ui move reveal">
<div class="visible content">
<div class="ui card">
<img class="ui image" src="http://mrg.bz/TRRrQJ">
<div class="content">
<div class="header">Pizza Margherita</div>
<div class="description">Invented in Naples in honor of the first queen of Italy, the Margherita pizza is the triumph of Italian cuisine in the world.</div>
</div>
<div class="extra content" >
<div class="ui labeled icon menu">
<a class="item"><i class="wait icon"></i>2h 16min</a>
<a class="item"><i class="food icon"></i>6 servings</a>
<a class="item"><i class="signal icon"></i>Easy</a>
</div>
</div>
</div>
</div>
<div class="hidden content">
<div class="ui card">
<div class="content">
<div class="ui pointing secondary menu">
<div class="item active" data-tab="ingredients">Ingredients</div>
<div class="item" data-tab="directions">Directions</div>
</div>
<div class="ui tab active" data-tab="ingredients">
<h3>For pasta</h3>
<div class="ui list">
<div class="item"><i class="check circle red icon"></i>2 lb Italian "00" flour or all-purpose flour</div>
<div class="item"><i class="check circle red icon"></i>1 oz fresh yeast</div>
<div class="item"><i class="check circle red icon"></i>2 cups water</div>
<div class="item"><i class="check circle red icon"></i>⅜ oz salt</div>
</div>
<h3>For dressing</h3>
<div class="ui small list">
<div class="item"><i class="check circle red icon"></i>½ cup extra virgin olive oil</div>
<div class="item"><i class="check circle red icon"></i>1 lb mozzarella cheese</div>
<div class="item"><i class="check circle red icon"></i>basil leaves to taste</div>
<div class="item"><i class="check circle red icon"></i>1 lb canned tomatoes</div>
<div class="item"><i class="check circle red icon"></i>salt to taste</div>
</div>
</div>
<div class="ui tab" data-tab="directions">
<div class="ui small list">
<div class="item"><span class="ui red circular label">1</span> On a wooden or marble work surface, shape the flour into a well. Place the yeast, salt and warm water in the center. Be careful not to let the salt come in contact with the yeast. </div>
<div class="item"><span class="ui red circular label">2</span> Knead the dough vigorously with your hands for 15-20 minutes, or in a mixer, until the dough is soft and smooth.</div>
<div class="item"><span class="ui red circular label">3</span> Once you have the right consistency, adding a bit of water or flour if necessary, shape the dough into a ball. Cover with a plastic bowl so that the dough is protected from the air. Let rise for 3 or 4 hours at room temperature for about an hour in a warm place. </div>
<div class="item"><span class="ui red circular label">4</span> Once the dough will be doubled in volume, ricavatene 6 loaves, modellateli in spherical shapes, cover with a sheet of plastic wrap and let them rise at room temperature for a couple of hours or in a warm place for about 45 minutes.</div>
<div class="item"><span class="ui red circular label">5</span> As soon as the loaves have doubled in volume, prepare the tomato sauce and place it in a bowl. Add a pinch of salt and 1/3 of the olive oil.</div>
<div class="item"><span class="ui red circular label">6</span> Knead the dough, then flattening them using your fingers.</div>
<div class="item"><span class="ui red circular label">7</span> Use a ladle or a spoon to spread a good amount of tomato sauce on the pizza. Then, cover with mozzarella, torn into pieces. Garnish with a couple leaves of basil and bake in a 480° F oven for 5 or 6 minutes.</div>
<div class="item"><span class="ui red circular label">8</span> Once ready, remove the pizza from the oven. Garnish with more basil and a drizzle of oil. Serve immediately.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body {
margin: 30px;
background-color: lightgrey;
}
.ui.move.reveal {
width: 290px;
white-space: normal;
}
.ui.card {
height: 420px;
}
.ui.labeled.icon.menu .item{
min-width: 33.3333%;
max-width: 33.3333%;
font-size: 0.8em;
padding: 6px 2px;
}
.ui.pointing.menu {
cursor: pointer;
}
.ui.tab {
height: 320px;
overflow-y: auto;
}
$( document ).ready(function() {
$('.menu .item').tab();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment