Skip to content

Instantly share code, notes, and snippets.

View ryndel's full-sized avatar

Lyndel Thomas ryndel

38 followers · 52 following
View GitHub Profile
@ryndel
ryndel / factories.json
Last active August 29, 2015 14:20
{
"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 September 6, 2022 19:01
CSS only starburst

CSS only starburst

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

Usage

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

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:

@ryndel
ryndel / centering.html
Created January 31, 2014 18:55
<!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 December 22, 2015 18:19
A simple html clickable meter
<!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;
@ryndel
ryndel / fixed-footer.html
Last active December 21, 2015 17:09
fixed footer
@ryndel
ryndel / Cloudvisio.md
Last active December 18, 2015 01:59
Cloudvisio #talk

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 December 17, 2015 12:29
A collection of old css files from common.css. Replaced by less mixins
/* bubbles */
.bubble {
border-color: #EE4B4B;
position: relative;
left: 0px;
top: 0px;
color:#333;
padding:20px;
width: 225px;
@ryndel
ryndel / social-aside.css
Last active December 17, 2015 12:29
Social aside. Unfinished. A fixed position social icon set designed to sit at the middle left or middle right of screen
/* 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 December 17, 2015 12:29
Hover expand bar using social icons. Incomplete. Was started before we moved to using icon fonts instead of images
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 {