What is a vision?
Your vision answers the question "What do I want?" A clear vision help you communicate why you're here and what impact you're going to have.
Your vision should be aligned with the company vision, with your manager's V2MOM, and it should be personal. It should be an honest reflection of your own vision for your own work.
If you manage a team, it should be reflective of the purpose of the team and your collective impact.
Stephen James interactivellama
interactivellama
/ media-query-canary.less
Last active
October 6, 2015 07:48
Media Query Canary for Less.JS (Mobile First)
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
| /* I like to know what the last media query to be applied is, especially | |
| in areas that overlap or are close to the edge of the media query width. | |
| This gets even more confusing when using a dynamic language like Less.JS | |
| which doesn't allow browser debuggers to see the original source code. | |
| My approach is to group CSS rules in such a way that limit the cascade | |
| (at least in the original Less file). This should help in debugging. */ | |
| /* Variables for Media Query Canary */ | |
| @tablet: ~"screen and (min-width: 600px)"; | |
| @desktop: ~"screen and (min-width: 992px)"; |
interactivellama
/ gist:3913720
Created
October 18, 2012 17:52
Sprite Fade on Hover (Less CSS mixin)
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
| /* For Less CSS image replacement fade on hover transition with SPAN tag. | |
| This uses the Helpless Less library for opacity and transition (#hl). | |
| */ | |
| #llama { | |
| .spriteHoverFade(@width: 10px, @height: 10px, @imageURL: '', @offsetX: 0px, @offsetY: 0px, @hoverOffsetX: 50px, @hoverOffsetY: 50px) { | |
| display: inline-block; | |
| position: relative; | |
| text-indent: -9999px; |
interactivellama
/ jgroup
Created
June 3, 2013 17:46
jgroup is a LESS mixin that justifies inline-block elements, removes typography issues by reducing the font-size, and adds a 100% width element to the end simliar to micro-clearfix, but not. Look Ma, no specifying margins! Be carful though of removing spaces / HTML compression in production.
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
| /* Justify inline block elements for a percentage grid without specifying margins: LESS mixin. See http://www.barrelny.com/blog/text-align-justify-and-rwd/ */ | |
| .jgroup { | |
| text-align: justify; | |
| font-size: .01px; | |
| &:after{ | |
| content: ''; | |
| display: inline-block; | |
| width: 100%; |
interactivellama
/ fuelux-amd-basic-template.html
Last active
August 29, 2015 14:01
FuelUX 3 (AMD): Copy and paste quick start
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>FuelUX Basic Template (AMD)</title> | |
| <!-- CSS --> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="//fuelux-dev.herokuapp.com/dist/css/fuelux.min.css" rel="stylesheet"> |
interactivellama
/ v2mom-template.md
Created
August 20, 2014 15:09
— forked from wuputah/v2mom-template.md
interactivellama
/ embedded-media-queries.less
Last active
August 29, 2015 14:07
Em-based embedded media queries with LESS
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
| /* -------------------------------------------- | |
| EM-BASED EMBEDDED MEDIA QUERIES WITH LESS | |
| ---------------------------------------------*/ | |
| /* The following are defaults for media queries. Additional custom measurements | |
| may be needed for certain elements, although non-content-based breakpoints | |
| are quite convenient. These are proportional media queries using ems. Ems are a | |
| browser-based font size, (example - 16px = 14pt = 1em ). For more information, | |
| check out: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ | |
| P = Portrait orientation, L = Landscape orientation |
interactivellama
/ fuelux-script-tags.html
Created
October 9, 2014 15:40
Fuel UX script tags (local bower install with individual files)
interactivellama
/ fuel-ux 3-script-tags-public-folder.html
Last active
August 29, 2015 14:07
Fuel UX 3 script tags in public folder
interactivellama
/ sample-modernizer-polyfill.js
Last active
August 29, 2015 14:07
Parts of JS execution path with Modernizer tests and poly-fills
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
| /* This gist shows the guts of using Modernizr to test device/browser feature | |
| support. It then loads in two poiy-fills, if needed and create functions that | |
| trigger different user interfaces when matching certain media queries. These | |
| trigger just like CSS class changes and not just on page load. | |
| If on a small screen, load a carousel. If on a larger screen, load the | |
| non-touch enabled jqzoom plugin to allow mouse zoom. These events fire | |
| on orientation change and many other device changes. | |
| Generally, this is for support of IE7, IE8, and possibily IE9, and is |
interactivellama
/ fuelux-contributor-remotes.bash
Last active
August 29, 2015 14:08
Fuel UX Contributors' Remotes
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
| # 2014 Major Contributors | |
| git remote add vernak2539 git@github.com:vernak2539/fuelux.git && | |
| git remote add interactivellama git@github.com:interactivellama/fuelux.git && | |
| git remote add BenjaminNeilDavis git@github.com:BenjaminNeilDavis/fuelux.git && | |
| git remote add chriscorwin git@github.com:chriscorwin/fuelux.git && | |
| git remote add cormacmccarthy git@github.com:cormacmccarthy/fuelux.git && | |
| git remote add swilliamset git@github.com:swilliamset/fuelux.git && | |
| git remote add futuremint git@github.com:futuremint/fuelux.git && | |
| git remote add dwaltz git@github.com:dwaltz/fuelux.git && |
OlderNewer