Skip to content

Instantly share code, notes, and snippets.

Lyndel Thomas ryndel

Block or report user

Report or block ryndel

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.