furzeface
/ text overflow ellipsis
Last active
December 29, 2015 16:19
Yeah so I'm ALWAYS forgetting how to do this, and end up trawling through code to find where I've done it before and copy pasting. So I'm basically writing this for myself to have a centralised copy paste place.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*HTML (the easy part)*/ | |
| <ul> | |
| <li>Daniel Furze</li> | |
| <li class="ellipsis">Mc Testerson Longname IV</li> | |
| </ul> | |
| /*CSS (still a pretty easy part)*/ | |
| .ellipsis{ | |
| overflow: hidden; | |
| text-overflow: ellipsis; |
furzeface
/ show-which-media-query.css
Last active
December 29, 2015 16:19
A quick little tip to help me see which query a device is using, adding an element on the page and in each media query, adding a string via the content attribute.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .query { | |
| position:absolute; | |
| top: 5px; | |
| left: 5px; | |
| } | |
| .query:after{ | |
| content: "[YOUR MEDIA QUERY HERE]"; | |
| } |
furzeface
/ replace-svg-with-png.js
Last active
March 26, 2023 09:14
The snippets I found online to replace svg with png for legacy browsers using Modernizr were all a little flaky, so here's what I wrote.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Use Modernizr to check | |
| if (!Modernizr.svg) { | |
| // Using jQuery | |
| $('img').each(function () { // Could also be more specific if you know where the svg's will be e.g. $('#work-content img') | |
| var $img = this, // Cache current image DOM element in a variable | |
| src = $img.src.split('.'), // Split the source | |
| extension = src[src.length - 1]; // Make sure it's the last part of the split string | |
| if (extension === 'svg') { | |
| src[src.length - 1] = 'png'; // If it's svg, do all the things |
furzeface
/ standard-media-queries.css
Last active
May 25, 2017 19:01
A set of standard media queries for popular devices.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media all and (min-device-width : 320px) | |
| and (max-device-width : 480px) { | |
| /*style all the things*/ | |
| } | |
| @media all and (max-width : 320px) { | |
| /*style all the things*/ | |
| } |
furzeface
/ lovely-media-queries.css
Last active
December 31, 2015 02:19
An example of my new set of media queries. Flexible, more fluid media queries.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //=Variables | |
| //=Media Queries | |
| $breakpoint-tiny: 20em; | |
| $breakpoint-small: 30em; | |
| $breakpoint-medium: 50em; | |
| $breakpoint-extra-medium: 65em; //lol | |
| $breakpoint-large: 80em; | |
| $breakpoint-extra-large: 100em; | |
| //=Global Styles |
furzeface
/ GitHub Gist Basic Styles
Created
December 12, 2013 19:13
GitHub Gists default CSS selectors and base styles.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .gist { | |
| color: #000; | |
| .render-container { | |
| .render-viewer-error, | |
| .render-viewer-fatal, | |
| .octospinner { | |
| display: none; | |
| } | |
| } |
furzeface
/ removing-gist-styles.js
Last active
December 31, 2015 04:28
Removing GitHub Gists default styles from your <body> before styling them yourself.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var domLinks = document.getElementsByTagName('link'); // Get all the <link>'s | |
| // Will most likely find stylesheets but will find any with rels eg rel="canonical/author/external..." | |
| // Unfortunately we can't just traverse the <head> as the Gist stylesheet is embedding with the Gist in your pages <body> | |
| var gistLinks = []; | |
| for (var i = 0, l = domLinks.length; i < l; i++) {//loop 'em | |
| var el = domLinks[i]; //current link | |
| // If 'gist' is in the href - | |
| if (el.href.indexOf('gist') > -1) { |
furzeface
/ Anchor CMS config bootstrap
Last active
January 2, 2016 03:49
To allow you to use one db.php file for all local dev/staging/production environments with Anchor CMS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Goes in your anchor/config/db.php file | |
| //$$REPLACE_THESE$$ with your demo and live db details | |
| switch ($_SERVER['SERVER_NAME']) { | |
| case 'demo.domain.com': //eg. 'demodaniel.furzeface.com' for me | |
| return array( | |
| 'default' => 'mysql', | |
| 'prefix' => 'anchor_', //change if you want |
furzeface
/ google-analytics-custom-event-tracking-function.js
Last active
October 18, 2018 13:42
A function to return the custom event tracker for Google Analytics, wrapped so if GA is not set up for local/demo environments JavaScript won't go mental!Plus, attaching it to a standard jQuery event listener.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Wrap it so if GA is not initialised it doesn't go 'undefined'! | |
| function analytics_custom_event_tracker(name, event, label) | |
| { | |
| if (typeof ga === 'function') | |
| { | |
| return ga('send', 'event', name, event, label); | |
| } | |
| } | |
furzeface
/ Media Query Mixin
Last active
August 22, 2016 03:45
My Sass Media Query Mixin...cos I keep forgetting to share this.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //=My breakpoint variables | |
| //Usually kept in _variables.scss | |
| $breakpoint-extra-small: 20em; //320px | |
| $breakpoint-small: 30em; //480px | |
| $breakpoint-medium: 50em; //800px | |
| $breakpoint-extra-medium: 65em; //1040px | |
| $breakpoint-large: 80em; //1280px | |
| $breakpoint-extra-large: 100em; //1600px |
OlderNewer