There are some good sass mixins out there for icon-fonts. But I coudn't find one that followed DRY principles and allowed you to use semantic html and not have icon- classes everywhere.
##First set up your base icon font styles.
// first declaration needed for IE8
| # --------------------------------------------------------------------------- | |
| # | |
| # Description: This file holds all my BASH configurations and aliases | |
| # | |
| # Sections: | |
| # 1. Environment Configuration | |
| # 2. Make Terminal Better (remapping defaults and adding functionality) | |
| # 3. File and Folder Management | |
| # 4. Searching | |
| # 5. Process Management |
| # Compiled source # | |
| ################### | |
| *.com | |
| *.class | |
| *.dll | |
| *.exe | |
| *.o | |
| *.so | |
| # Packages # |
| @mixin setFlexBox($flexType){ | |
| //options are block level or inline | |
| @if $flexType == 'block'{ | |
| display: -webkit-box; | |
| display: -moz-box; | |
| display: box; | |
| display: -ms-flexbox; | |
| display: flexbox; | |
| display: -webkit-flex; | |
| display: flex; |
| angular.module('myApp.services', []) | |
| .factory('UserFactory', function($http, $q) { | |
| var service = { | |
| // our factory definition | |
| user: {}, | |
| setName: function(newName) { | |
| service.user['name'] = newName; | |
| }, | |
| setEmail: function(newEmail) { | |
| service.user['email'] = newEmail; |
| <?php | |
| /** | |
| * Usage: | |
| * Send the url you want to access url encoded in the url paramater, for example (This is with JS): | |
| * /twitter-proxy.php?url='+encodeURIComponent('statuses/user_timeline.json?screen_name=MikeRogers0&count=2') | |
| */ | |
| // The tokens, keys and secrets from the app you created at https://dev.twitter.com/apps | |
| $config = array( |
| env = (function() { | |
| var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i | |
| function flag(names) { | |
| names = names.split(' ') | |
| for (i = 0; i < names.length; i++) | |
| flags[names[i]] = true | |
| } | |
| function classnames() { | |
| var names = [], name | |
| for(name in flags) if (flags.hasOwnProperty(name)) |
| { | |
| // The tab key will cycle through the settings when first created | |
| // Visit http://wbond.net/sublime_packages/sftp/settings for help | |
| // sftp, ftp or ftps | |
| "type": "sftp", | |
| "save_before_upload": true, | |
| "upload_on_save": false, | |
| "sync_down_on_open": false, |
| //==== Simple SCSS mixin to create CSS triangles | |
| //==== Example: @include css-triangle ("up", 10px, #fff); | |
| @mixin css-triangle ($direction: "down", $size: 20px, $color: #000) { | |
| width: 0; | |
| height: 0; | |
| border-left: $size solid #{setTriangleColor($direction, "left", $color)}; | |
| border-right: $size solid #{setTriangleColor($direction, "right", $color)}; | |
| border-bottom: $size solid #{setTriangleColor($direction, "bottom", $color)}; | |
| border-top: $size solid #{setTriangleColor($direction, "top", $color)}; | |
| } |
I have always struggled with getting all the various share buttons from Facebook, Twitter, Google Plus, Pinterest, etc to align correctly and to not look like a tacky explosion of buttons. Seeing a number of sites rolling their own share buttons with counts, for example The Next Web I decided to look into the various APIs on how to simply return the share count.
If you want to roll up all of these into a single jQuery plugin check out Sharrre
Many of these API calls and methods are undocumented, so anticipate that they will change in the future. Also, if you are planning on rolling these out across a site I would recommend creating a simple endpoint that periodically caches results from all of the APIs so that you are not overloading the services will requests.
