Skip to content

Instantly share code, notes, and snippets.

View marciobarrios's full-sized avatar

Marcio Barrios marciobarrios

82 followers · 86 following
View GitHub Profile
@marciobarrios
marciobarrios / dabblet.css
Created February 13, 2012 14:56 — forked from daneden/dabblet.css
Slider
/**
* Slider
*/
* {
margin: 0;
padding: 0;
}
html {
@marciobarrios
marciobarrios / gist:1864721
Created February 19, 2012 17:25 — forked from lucasfais/gist:1207002
Sublime Text 2 - Useful Shortcuts

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T go to file
⌘⌃P go to project
⌘R go to methods
⌃G go to line
⌘KB toggle side bar
⌘⇧P command prompt
@marciobarrios
marciobarrios / dabblet.css
Created March 2, 2012 10:06 — forked from daneden/dabblet.css
Picture frame
/**
* Picture frame
*/
* {
margin: 0;
padding: 0;
}
html {
@marciobarrios
marciobarrios / dabblet.css
Created March 2, 2012 10:16
Pure CSS Picture Frame
/* Pure CSS Picture Frame */
html {
background-color: #653845;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
background-size: .25em .25em;
box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
height: 100%;
}
@marciobarrios
marciobarrios / zepto.timeago.js
Created March 4, 2012 23:12 — forked from gazs/zepto.timeago.js
/*
* timeago: a jQuery plugin ported to Zepto, version: 0.9.3 (2011-01-21)
* @requires Zepto.js 0.4
*
* Timeago is a jQuery plugin that makes it easy to support automatically
* updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
*
* For usage and examples, visit:
* http://timeago.yarp.com/
*
@marciobarrios
marciobarrios / README.md
Created March 16, 2012 09:59 — forked from necolas/README.md
Experimenting with component-based HTML/CSS naming and patterns

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
@marciobarrios
marciobarrios / dabblet.css
Created March 21, 2012 14:21 — forked from daneden/dabblet.css
Gallery concept
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAVUlEQVQYGV2OgQ0AIQgDu4ZzMKBDMSBPeTEVEyQEri0AWESAlW9nLZm9F8alLFbOXlB9P6lK3krZH5JKRR6QSsNzZpJLJW+mDnk9ZyZaKEnPzaNzaB+YaWuR6GfrqQAAAABJRU5ErkJggg==),
linear-gradient(#456,#123);
min-height: 100%;
@marciobarrios
marciobarrios / zscroll.html
Created March 23, 2012 11:39
Scrolling along the Z-Axis
<html>
<head>
<title>Scrolling along the Z-Axis</title>
<!--
Example from http://eng.wealthfront.com/2012/03/scrolling-z-axis-with-css-3d-transforms.html
Assumes browser window is sized at a height of 400px (the size of the black box).
-->
<style>
body{height:600px;}
#viewport {
@marciobarrios
marciobarrios / dabblet.css
Created March 30, 2012 09:25 — forked from JoelBesada/dabblet.css
CSS States
/* CSS States */
body {
background: url(http://dabblet.com/img/noise.png);
background-color: #F5F2F0;
font-family: Georgia, serif;
font-size: 18px;
line-height: 1.6em;
text-shadow: 0 2px 0 white;
color: #222;
}
@marciobarrios
marciobarrios / dabblet.css
Created April 17, 2012 08:24 — forked from LeaVerou/dabblet.css
Vertical centering with Flexbox + margin fallback
/**
* Vertical centering with Flexbox + margin fallback
* Lea Verou & David Storey
*/
html, body { height: 100%; }
body {
width: 100%; /* needed for FF */
margin: 0;