Skip to content

Instantly share code, notes, and snippets.

View chriswrightdesign's full-sized avatar

Chris Wright chriswrightdesign

110 followers · 30 following
View GitHub Profile
@chriswrightdesign
chriswrightdesign / mysqlsearch.mysql
Created September 6, 2012 00:44
mySQL: Select statements
Word searching
1.
SELECT * FROM TABLE WHERE MATCH (`field`) AGAINST ('Keyword')
(Fastest)
2.
@chriswrightdesign
chriswrightdesign / webkit-anim.scss
Created October 28, 2013 13:13
Fix the webkit animation bug
.no-flick{-webkit-transform:translate3d(0,0,0);} // put this class (or extend placeholder) to anywhere you don't want to flicker during a transform
.animation {
-webkit-backface-visibility: hidden; //will solve flickering on animated layers
}
@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;
}
@chriswrightdesign
chriswrightdesign / webkit-buttons-fix.scss
Created October 29, 2013 00:20
Override webkit buttons
%override-webkit-buttons {
-webkit-appearance:none;
}
@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 / 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 / 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 / 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 / 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 / trunicateLongText.js
Created November 16, 2013 05:30
Trunicate long text
if (myText.length > 145) {
myText = myText.substring(0, 140) + "..."
}