Skip to content

Instantly share code, notes, and snippets.

View NathalieLarsson's full-sized avatar

Nathalie Festin NathalieLarsson

2 followers · 12 following
  • Snêk
  • Kalix
View GitHub Profile
@NathalieLarsson
NathalieLarsson / gist:1991597
Created March 7, 2012 07:14
HTML: Starting template
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>My new website 2012 - Nathalie Larsson</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
@NathalieLarsson
NathalieLarsson / Easy Background Grid
Created March 7, 2012 07:24
CSS: Grid Background
.grid-overlay:before {
content: "";
position: fixed;
background-color: rgba(34,102,153,0.5);
background: -webkit-linear-gradient(skyblue 2px, transparent 2px), -webkit-linear-gradient(0, skyblue 2px, transparent 2px), -webkit-linear-gradient(skyblue 1px, transparent 1px), -webkit-linear-gradient(0, skyblue 1px, transparent 1px);
background: -moz-linear-gradient(skyblue 2px, transparent 2px), -moz-linear-gradient(0, skyblue 2px, transparent 2px), -moz-linear-gradient(skyblue 1px, transparent 1px), -moz-linear-gradient(0, skyblue 1px, transparent 1px);
background: -o-linear-gradient(skyblue 2px, transparent 2px), -o-linear-gradient(0, skyblue 2px, transparent 2px), -o-linear-gradient(skyblue 1px, transparent 1px), -o-linear-gradient(0, skyblue 1px, transparent 1px);
background: -ms-linear-gradient(skyblue 2px, transparent 2px), -ms-linear-gradient(0, skyblue 2px, transparent 2px), -ms-linear-gradient(skyblue 1px, transparent 1px), -ms-linear-gradient(0, skyblue 1px, transparent 1px);
background
@NathalieLarsson
NathalieLarsson / CSS: Remove text
Created March 8, 2012 14:43
CSS: Remove text #sublime
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
@NathalieLarsson
NathalieLarsson / jQueryShim
Created March 8, 2012 16:20
jQuery: Placeholder shim
$(document).ready(function(){
$('input,textarea').focus(function(){
$(this).parent().parent().find('label').hide();
});
$('input,textarea').blur(function(){
if($(this).val().length === 0){
$(this).parent().parent().find('label').show();
}
});
@NathalieLarsson
NathalieLarsson / _mixins.scss
Created March 28, 2012 14:37 — forked from garyharan/_mixins.scss
Useful scss mixins (rounded corners, gradients, text-field, button)
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $color;
-moz-box-shadow:inset $top $left $blur $color;
box-shadow:inset $top $left $blur $color;
} @else {
-webkit-box-shadow: $top $left $blur $color;
-moz-box-shadow: $top $left $blur $color;
box-shadow: $top $left $blur $color;
}
@NathalieLarsson
NathalieLarsson / _mixins.scss
Created March 28, 2012 14:37 — forked from garyharan/_mixins.scss
Useful scss mixins (rounded corners, gradients, text-field, button)
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $color;
-moz-box-shadow:inset $top $left $blur $color;
box-shadow:inset $top $left $blur $color;
} @else {
-webkit-box-shadow: $top $left $blur $color;
-moz-box-shadow: $top $left $blur $color;
box-shadow: $top $left $blur $color;
}
@NathalieLarsson
NathalieLarsson / reset.scss
Created March 29, 2012 18:41 — forked from HamptonMakes/reset.scss
Reset SCSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
@NathalieLarsson
NathalieLarsson / _functions.scss
Created March 29, 2012 19:08
Functions Scss
//
// MIXINS
//
// SHADOWS
@mixin box-shadow ($string) {
-webkit-box-shadow: $string;
-moz-box-shadow: $string;
box-shadow: $string;
}
@NathalieLarsson
NathalieLarsson / _colors.scss
Created March 29, 2012 19:09
Colors Scss
// COLOR ****************************************************/
$bordercolor: #888;
$activecolor: #D61518;
$aqua:#00FFFF;
$bisque:#ffe4c4;
$black:#000000;
$blue:#0000FF;
$brown:#A52A2A;
@NathalieLarsson
NathalieLarsson / 0_selector_hacks.scss
Created May 18, 2012 17:26 — forked from chriseppstein/0_selector_hacks.scss
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}