Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
Workin’

Eric Eggert yatil

💭
Workin’
View GitHub Profile
@yatil
yatil / config.rb
Created Jan 29, 2013
My default config.rb
View config.rb
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
# You can select your preferred output style
@yatil
yatil / doof.css
Created Jan 4, 2013
I searched for the form buttons in Safari and Chrome…
View doof.css
a.btn, button.btn {
border-radius:5px 5px 5px 5px;
display:inline-block;
margin-bottom:4px;position:relative;
// You shalt not find the button if you’re using a non-mozilla browser!
background:-moz-linear-gradient(center top , #01568F, #4B9FDC) repeat scroll 0 0 transparent;
color:#ffffff;
View fastbook.html
<div class="container list-item story stretched" xid="list-item-9" id="element-337" style="-webkit-transform: translate3d(0px, 4500px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); min-height: 110px; width: 1280px;">
<div class="inner container-inner list-item-inner" id="element-338">
<div class="container unsized frame list-item-item" xid="container-11" id="element-339">
<div class="inner container-inner" id="element-340">
<div class="image buffered-image story-profile-picture sized" xid="buffered-image-13" id="element-341" style="width: 35px; height: 35px; background-image: url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc6/261057_631604675_297058556_q.jpg);"></div>
<div class="container inlines unsized story-title" xid="inlines-4" id="element-342">
<div class="inner container-inner inlines-inner" id="element-343">
<div class="text unsized story-t
@yatil
yatil / _helper.scss
Created Nov 1, 2012
IE Mediaqueries
View _helper.scss
@mixin respond-to($media) {
@if $media == small {
@media only screen and (max-width: 699px) { @content; }
}
@else if $media == medium {
@if $oldIE {
@content;
} @else {
@media only screen and (min-width: 600px) { @content; }
}
View mycomment.markdown

There are no CSS3 filters. CSS Filters are a proprietary extension to CSS by Webkit browsers, it isn’t supported anywhere and is not in any CSS specification, neither in Level 3 nor in Level 4.

There is a separate Editor’s Draft called “Filter Effects 1.0” here: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html but that means nothing. Implementation as well as syntax may – and probably will – change, so using -moz- -o- and -ms- prefixes will likely do harm instead of being future proof.

I’d rather wait until there are at least two implementations of that stuff in browsers

@yatil
yatil / config.rb
Created Jul 2, 2012
Stock COMPASS config file
View config.rb
# Require any additional compass plugins here.
# IMPORTANT
#
# THIS config.rb uses the following versions of SASS/COMPASS
#
# Sass 3.2.0.alpha.35 (Bleeding Edge)
# Compass 0.12.0 (Alnilam)
@yatil
yatil / _mqhelper.scss
Created May 12, 2012
Forcing the desktop layout to IE<9
View _mqhelper.scss
@mixin respond-to($media) {
@if $media == small {
@media only screen and (max-width: 599px) { @content; }
}
@else if $media == medium {
@media only screen and (min-width: 600px) { @content; }
.oldie & { @content; }
}
@else if $media == large {
@media only screen and (min-width: 800px) { @content; }
@yatil
yatil / dabblet.css
Created Apr 24, 2012
The first commented line is your dabblet’s title
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
@yatil
yatil / filtersyntax.scss
Created Mar 12, 2012
Webkit nightly have support, others don’t.
View filtersyntax.scss
@mixin filter($function) {
-webkit-filter: $function;
-moz-filter: $function;
-ms-filter: $function;
-o-filter: $function;
filter: $function;
}
@yatil
yatil / dabblet.css
Created Mar 1, 2012
The first commented line is your dabblet’s title
View dabblet.css
/**
* The first commented line is your dabblet’s title
*/
div {
background: linear-gradient(#f3f3f3, #eee);
width: 250px;
height: 250px;
color: #999;
font-family: 'Helvetica Neue', Arial, sans-serif;