Skip to content

Instantly share code, notes, and snippets.

Lyndel Thomas ryndel

View GitHub Profile
View factories.json
{
"android": {
"title": "Android Factory - Intro Basic Guide",
"url": "https://codenvy.com/factory?id=g08a3escw5kxj2xk",
"image": "https://raw.githubusercontent.com/codenvy/factories/master/images/android.png"
},
"angular": {
"title": "Angular.JS",
"url": "https://codenvy.com/f?id=xn9n91ju3khwm375",
"image": "https://raw.githubusercontent.com/codenvy/factories/master/images/angularjs.png"
@ryndel
ryndel / readme.md
Last active Jan 22, 2019
CSS only starburst
View readme.md

CSS only starburst

An html element using CSS only styling to create a starburst - for special offers (for example).

Usage

<div class="starburst">
	<div class="text"> <span class="label">Get something</span> <span class="number">FREE</span> <span class="terms">some terms</span> </div>
@ryndel
ryndel / .float-label.md
Last active Nov 2, 2017
Float label css only solution
View .float-label.md

Float label

A web component that create a CSS-only floating label for input tags

Usage

The syntax for generating a float-label input is as follows:

<field is="float-label" label="Your name" type="text" id="name" name="name" 
View centering.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Center vertically with table layout</title>
<style>
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
</style>
</head>
@ryndel
ryndel / meter.html
Last active Dec 22, 2015
A simple html clickable meter
View meter.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Meter</title>
<style>
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
View fixed-footer.html
@ryndel
ryndel / Cloudvisio.md
Last active Dec 18, 2015
Cloudvisio #talk
View Cloudvisio.md

Cloudvisio


"By visualising information, we turn it into a landscape that you can explore with your eyes, a sort of information map. And when you’re lost in information, an information map is kind of useful."

—David McCandless, author, data journalist, information designer


@ryndel
ryndel / bubble.css
Last active Dec 17, 2015
A collection of old css files from common.css. Replaced by less mixins
View bubble.css
/* bubbles */
.bubble {
border-color: #EE4B4B;
position: relative;
left: 0px;
top: 0px;
color:#333;
padding:20px;
width: 225px;
@ryndel
ryndel / social-aside.css
Last active Dec 17, 2015
Social aside. Unfinished. A fixed position social icon set designed to sit at the middle left or middle right of screen
View social-aside.css
/* Social Links */
#social-links {
position: absolute;
top: 50%;
height: 1000px;
margin-top: -500px;
}
#social-links ul {
list-style-type: none;
@ryndel
ryndel / hover-xpnd.css
Last active Dec 17, 2015
Hover expand bar using social icons. Incomplete. Was started before we moved to using icon fonts instead of images
View hover-xpnd.css
ul.hover-xpnd-16, ul.hover-xpnd-32, ul.hover-xpnd-48, ul.hover-xpnd-64 {
}
ul.hover-xpnd-16 li, ul.hover-xpnd-32 li, ul.hover-xpnd-48 li, ul.hover-xpnd-64 li, div.hover-xpnd-16, div.hover-xpnd-32, div.hover-xpnd-48, div.hover-xpnd-64 {
display:inline-block;
overflow:hidden;
}
ul.hover-xpnd-16 li:hover, ul.hover-xpnd-32 li:hover, ul.hover-xpnd-48 li:hover, ul.hover-xpnd-64 li:hover, div.hover-xpnd-16:hover, div.hover-xpnd-32:hover, div.hover-xpnd-48:hover, div.hover-xpnd-64:hover {
You can’t perform that action at this time.