Skip to content

Instantly share code, notes, and snippets.

View marciobarrios's full-sized avatar

Marcio Barrios marciobarrios

76 followers · 81 following
View GitHub Profile
@marciobarrios
marciobarrios / module_pattern_init.js
Created April 30, 2012 09:05 — forked from nathansmith/module_pattern_init.js
Init + Module Pattern JS
// JS Module Pattern:
// http://j.mp/module-pattern
// Redefine: $, window, document, undefined.
var APP = (function($, window, document, undefined) {
// Automatically calls all functions in APP.init
$(document).ready(function() {
APP.go();
});
@marciobarrios
marciobarrios / dabblet.css
Created April 22, 2012 21:43 — forked from LeaVerou/dabblet.css
Scrolling shadows by @kizmarh and @LeaVerou
/**
* Scrolling shadows by @kizmarh and @leaverou
* Only works in browsers supporting background-attachment: local; & CSS gradients
* Degrades gracefully
*/
html {
background: white;
font: 120% sans-serif;
}
@marciobarrios
marciobarrios / dabblet.css
Created April 22, 2012 15:05 — forked from kizu/dabblet.css
Scrolling shadows by @kizmarh
/* Scrolling shadows by @kizmarh */
html {
background: #FFF;
}
.scrollbox {
position: relative;
z-index: 1;
@marciobarrios
marciobarrios / dabblet.css
Created April 19, 2012 22:30 — forked from daneden/dabblet.css
Butt.
/* Butt. */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@marciobarrios
marciobarrios / dabblet.css
Created April 18, 2012 21:46 — forked from kizu/dabblet.css
Multi-directional hover by @kizmarh
/* Multi-directional hover by @kizmarh */
.b-block {
position: relative;
display: inline-block;
overflow: hidden;
width: 10em;
height: 10em;
@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;
@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 / 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 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 / 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