Tom Gillard tgdev
This file contains 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
| # Some taken from https://gist.github.com/mwhite/6887990 | |
| # How to add to global gitconfig using vscode: | |
| 1. Set VS Code as git config editor: git config --global core.editor "code --wait" | |
| 2. Edit git config with VS Code: git config --global -e | |
| # ======================================================================================== | |
| [alias] | |
| s = status |
This file contains 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
| /// Replace `$search` with `$replace` in `$string` | |
| /// @author Hugo Giraudel | |
| /// @param {String} $string - Initial string | |
| /// @param {String} $search - Substring to replace | |
| /// @param {String} $replace ('') - New value | |
| /// @return {String} - Updated string | |
| @function str-replace($string, $search, $replace: '') { | |
| $index: str-index($string, $search); |
tgdev
/ font-face-mixin.scss
Last active
April 11, 2016 01:36
Shortcut mixin for referencing custom webfonts via @font-face. Includes
This file contains 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
| // @font-face shortcut - requires replace-str function | |
| // @param {String} $name: Name of font | |
| // @param {String} $font-path: Path to font files | |
| // @param {String} $filename: Manipulated string of $name | |
| // | |
| // eg: | |
| // | |
| // @include webfont('Webfont Bold'); | |
| // @include webfont('Webfont Regular'); | |
| //================================================================= |
tgdev
/ Sass Mapped Gradient Backgrounds
Created
April 11, 2016 01:30
A snippet to easily create a gradient background on any element both horizontally and vertically
This file contains 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
| //========================================================================== | |
| // gradient map set in project's _vars.scss file | |
| //========================================================================== | |
| $gradientMagentaOrange: ( | |
| 'color1': $gradientMagenta, | |
| 'color2': $gradientOrange | |
| ); | |
| //======================================================================================== | |
| // mixin created in project's mixins.scss - used in conjunction with autoprefixr/postcss |
tgdev
/ middleman-dynamic-pages
Created
January 13, 2015 06:21
Dynamically outputting/creating html pages for each "project" on a portfolio site
This file contains 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
| <% p = locals[:project] %> | |
| <div class="l-wrapper"> | |
| <div class="l-content"> | |
| <h2><%= p[:title] %></h2> | |
| <%= p[:description] %> | |
| <p class="highlight">Key responsibilities:</p> | |
| <ul class="itemised-list"> | |
| <%= p[:responsibilities] %> | |
| </ul> | |
| </div> |
tgdev
/ middleman-pagination
Created
January 13, 2015 06:06
A demo of middleman pagination in action taken from my blog
This file contains 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
| <div class="article pagination"> | |
| <p class="pagination__summary">Articles <%= page_start %> to <%= page_end %> of <%= articles.length %></p> | |
| <ul class="list--clean list--pagination"> | |
| <% if prev_page %> | |
| <li class="prev"> | |
| <a href="<%= prev_page.url %>">Older articles</a> | |
| </li> | |
| <% end %> | |
| <% if next_page %> | |
| <li class="next"> |
tgdev
/ social-snippet.html
Created
January 11, 2014 00:27
Social media sharing snippet for facebook, twitter and pinterest.
Place in <head> of your pages More info below: Facebook Open Graph tags - http://davidwalsh.name/facebook-meta-tags
Twitter Cards - https://dev.twitter.com/docs/cards
Pinterest Rich Pins - http://developers.pinterest.com/rich_pins/
tgdev
/ flexbox.scss
Last active
December 14, 2015 09:19
After reading a css-tricks article on combining the old and new flexbox syntax, I thought it'd be cool to convert it into a bunch of scss mixins for easy use with SASS.
Read the original article at - http://css-tricks.com/using-flexbox/
This file contains 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
| // Flexbox Mixins (Old & New Syntax) | |
| // Based on the article by Chris Coyier - http://css-tricks.com/using-flexbox/ | |
| // Flexbox Context | |
| // Description: Make the container for our columns a flexbox display context. | |
| // By doing this, all direct children of this element become flex items. | |
| // Doesn't matter what they were before, they are flex items now. | |
| // Example @include flexContext; | |
| @mixin flexContext { | |
| display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ |