michaelminter’s gists

michaelminter / index.html

Created September 20, 2012 01:16

CSS tags

	<h1>Tags</h1>

	<h2>Example 1</h2>
	<a href="#" class="tag">Front-end development</a>

	<h2>Example 2</h2>
	<ul class="tags">
	<li><a href="#" class="tag">HTML</a></li>
	<li><a href="#" class="tag">CSS</a></li>
	<li><a href="#" class="tag">JavaScript</a></li>

michaelminter / index.html

Created September 20, 2012 01:43

These buttons do not use the social apis so they are much lighter on page load times. I have a custom script (needs to be optimized) that gets count number and starts at 0 and animats to total. See example in use at http://unveiledwife.com

	<!-- data-count is where the count will be stored from server -->
	<div id="stickySocial">

	<div class="stickySocialSocial">
	<a data-count="11" id="stickyBtn" class="fbShare ssPopup" target="_blank" href="http://www.facebook.com/sharer/sharer.php?s=100&p[title]=&p[url]=&p[images][0]=">
	<span class="button">SHARE</span>
	<span class="count">0</span>
	</a>
	<a data-count="22" id="stickyBtn" class="tweet" target="_blank" href="https://twitter.com/intent/tweet?text=+via+@unveiledwife&related=photografied&counturl=">
	<span class="button">TWEET</span>

michaelminter / index.html

Created September 20, 2012 01:57

Click on the button to contact the Github repo and display some data. Example uses: - 'watched repos' by user - 'repo details'

	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">


	<div style="border: 1px solid #cacaca; padding: 20px; margin: 0 20px 0 20px;">

	<a href="#" id="repo" class="btn">Repos Info</a>

	<a href="#" id="watched" class="btn">Repos I'm watching</a>

	<button id="reset" class="btn">Reset</button>

michaelminter / index.html

Created September 20, 2012 02:32

Updated version thanks to input from these awesome folks: Druid of Lûhn - http://codepen.io/Druid-of-Luhn Hugo Giraudel - http://codepen.io/HugoGiraudel Kasper Mikiewicz - http://codepen.io/Idered Fixed poor construction (using div's originally), and shi

	<div id="bg">
	<img src="http://img.skitch.com/20120905-fccfjyqxpxbkrhs6wct3xuyrjf.png" alt="">
	</div>

	<form>
	<div class="title">Login</div>
	<input type="text" placeholder="Username">
	<input type="password" placeholder="Password">
	<input type="submit" value="Get in there">
	</form>

michaelminter / index.html

Created September 20, 2012 02:37

Color picker

	<h1>Color Picker</h1>

	<ul>
	<li>+ 50</li>
	<li>+ 45</li>
	<li>+ 40</li>
	<li>+ 35</li>
	<li>+ 30</li>
	<li>+ 25</li>
	<li>+ 20</li>

michaelminter / index.haml

Created September 20, 2012 02:54

Inspired By Kamil Khadeyev http://dribbble.com/shots/715067-Candy-UI. Click on form to see animated bg.

	.form-wrapper
	%form
	%input{:type => 'email', :placeholder => 'darkwardk@me.com'}
	%input{:id => 'submit', :type => 'submit', :value => 'Subscribe'}

michaelminter / index.html

Created September 20, 2012 03:09

My go at a simple, clean table for WebDesignTuts Community Project - see more about it here: http://webdesign.tutsplus.com/articles/workshops/community-project-style-a-simple-data-table/

	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Age</th>
	<th>Weight (kg)</th>
	<th>Profession</th>
	</tr>
	</thead>
	<tbody>

michaelminter / index.html

Created September 20, 2012 03:10

table

	<section class="webdesigntuts-workshop">

	<table>
	<thead>
	<tr>
	<th>Name</th>
	<th>Age</th>
	<th>Weight (kg)</th>
	<th>Profession</th>
	</tr>

michaelminter / index.html

Created September 20, 2012 03:28

bootstrap dropdown hide when mouse leaves menu

	<div class="navbar">
	<div class="navbar-inner">
	<div class="container" style="width: auto;">
	<a class="brand" href="#">Project Name</a>
	<ul class="nav" role="navigation">
	<li class="dropdown">
	<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
	<li><a tabindex="-1" href="http://google.com">Action</a></li>
	<li><a tabindex="-1" href="#anotherAction">Another action</a></li>

michaelminter / index.html

Created September 20, 2012 03:36

The terminal with CSS3

	<body>
	<div class='window'>
	<div class='header'>
	<a href="#" class='prp close'></a>
	<a href="#" class='prp min'></a>
	<a href="#" class='prp max'></a>
	<a href="#" class='maxer'>⇔</a>
	<span>Terminal - Bash - 50x30</span>
	</div>
	<pre>

Michael Minter michaelminter