Skip to content

Instantly share code, notes, and snippets.

View chriswrightdesign's full-sized avatar

Chris Wright chriswrightdesign

115 followers · 30 following
View GitHub Profile
@chriswrightdesign
chriswrightdesign / sassforloop.scss
Created November 20, 2013 02:39
Sass for loop example with nth-of-child animation
@for $i from 1 throught 6 {
.box:nth-of-type(#{$i}) {
-webkit-animation-delay: $i * 0.25s;
-moz-animation-delay:$i * 0.25s;
animation-delay:$i * 0.25s;
}
}
@chriswrightdesign
chriswrightdesign / nullHack.scss
Created November 20, 2013 02:27
The null "go faster hack". This also can fix some problems with flickering on webkit browsers during an animation. See http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-webkit-transform: translateZ(0);
//or
-webkit-translate3d(0, 0, 0);
@chriswrightdesign
chriswrightdesign / trunicateLongText.js
Created November 16, 2013 05:30
Trunicate long text
if (myText.length > 145) {
myText = myText.substring(0, 140) + "..."
}
@chriswrightdesign
chriswrightdesign / box-sizing.scss
Created November 7, 2013 10:25
All the box sizings
box-sizing: content-box
box-sizing: padding-box
box-sizing: border-box
box-sizing: inherit
@chriswrightdesign
chriswrightdesign / tinted-background.scss
Created November 6, 2013 21:55
An experiment with a tinted background and IE8 flag similar to the Guardian's media queries one. In the case of not using Modernizr and having a seperate IE8 and below stylesheet.
$IE8:false;
@mixin tinted-black(image) {
@if ($IE8 == false) {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
@chriswrightdesign
chriswrightdesign / mquery.scss
Created November 5, 2013 23:04
Attempting deal with old browsers like IE by making a flag for media query support and rendering out the content without the media queries.
//in the ie stylesheet - you just import the main stylesheet and flag $mediaQueries:false before import
$mediaQueries:true !default;
@mixin respond($width) {
@if $mediaQueries {
@if $width == "all" {
@media all {
@content;
@chriswrightdesign
chriswrightdesign / calculateem.scss
Last active December 27, 2015 10:39
Mixin to calculate ems
@function em( $target, $context ) {
@return $target / $context * 1em;
}
//usage font-size: em(24px, 16px);
//will return font-size:1.5em;
@chriswrightdesign
chriswrightdesign / self-clearing.scss
Created October 29, 2013 09:58
Self clearing element (clears all children)
.element:after {
content: "";
display: table;
clear: both;
}
@chriswrightdesign
chriswrightdesign / webkit-buttons-fix.scss
Created October 29, 2013 00:20
Override webkit buttons
%override-webkit-buttons {
-webkit-appearance:none;
}
@chriswrightdesign
chriswrightdesign / roundborderFix.scss
Created October 29, 2013 00:16
Fix the round border problem in Safari when doing round border 50%
%safari-round-border-fix {
-webkit-background-clip:padding-box;
}