Skip to content

Instantly share code, notes, and snippets.

@erikflowers
erikflowers / Cucumber Example.feature
Last active Jan 15, 2022
Example UX cucumber feature file/scenario
View Cucumber Example.feature
Feature: This is for the user notification indicator that is up in the top right of the main meny bar.
Scenario: On the top right of the main menu the user should see a notification indicator
Given that the user is logged in
Then the notification box should be visible
Scenario: If the user has no notifications, they will see the notificaton box as grayed out with a zero in it
Given that the user is logged in
And they have no new notifications
And they have no inbox notifications
@erikflowers
erikflowers / Less Retina Mixin Utility Class
Last active Feb 22, 2019
I took this from the retina.js solution and modified it a bit. All credit goes to https://github.com/imulus/retinajs, I just tweaked this for my needs. This mixin includes most of the parameters you need, so you don't need to call them out twice. It can all be done in the mixin.
View Less Retina Mixin Utility Class
// the retina mixin. An example goes: .at2x(img/header@2x.png, 650px, 150px, top, left, no-repeat, scroll)
// Put the size that the image appears on a non-retina, e.g. if it's a 200px x 200px non-retina, that is the effective size. The @2x 400px x 400px is calculated automatically. The order to type it is width then height.
// A modification of the retina.js less mixin - https://github.com/imulus/retinajs
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat, @attachment: scroll) {
background-image: url(@path);
background-position: @xpos @ypos;
background-repeat: @repeat;
@erikflowers
erikflowers / gist:4566691
Last active Dec 11, 2015
A good answer to the "don't call yourself a UX designer" debate. It's doing more harm than good.
View gist:4566691
http://aaronweyenberg.com/1934/why-im-not-a-ux-designer-and-neither-are-you/comment-page-1#comment-2661
"UX Designer as a title seems meant to convey to recruiters
and teammates as an indicator of being evolved in one’s craft;
that you subscribe to Design Thinking. This moves the designer
away from the notion that designs are created in a vacuum,
without real human world context. It may also imply some
capability in UX Research, at least in observation and artifact
collection and generation. Point is, this posture is often
expected in the workplace and so the title is adopted.
@erikflowers
erikflowers / Remove sticky for mobile.coffee
Created Jan 26, 2013
A snippet of coffeescript I am using to disable any sticky header/nav when on a mobile device. Viewport size was not as reliable when dealing with landscape tablets and desktop browsers having the same viewport, but one needing sticky and another not.
View Remove sticky for mobile.coffee
$(document).ready detectMobileDisable = ->
ua = navigator.userAgent.toLowerCase()
if (ua.indexOf("android") > -1) or (ua.indexOf("iphone") > -1) or (ua.indexOf("ipod") > -1) or (ua.indexOf("ipad") > -1)
$(document).ready ->
$("#element_to_unstick").addClass "noStick"
$("#element_that_needs_buffer_offset").addClass "noBuffer"
@erikflowers
erikflowers / gist:5230313
Created Mar 24, 2013
super simple background-size: cover so CSS backgrounds will always be maximized, if your browser supports it.
View gist:5230313
.background-cover(@cover: cover) {
-webkit-background-size: @cover;
-moz-background-size: @cover;
-o-background-size: @cover;
background-size: @cover;
}
View gist:5422167
.expanded {
> label {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
@erikflowers
erikflowers / hsl_hsla.sublime-snippet
Created May 10, 2013
hsl and hsla sublime text 2 snippets
View hsl_hsla.sublime-snippet
<!-- HSL snippet -->
<snippet>
<content><![CDATA[
hsl(${1:0}, ${2:100}%, ${3:100}%)
]]></content>
<tabTrigger>hsl</tabTrigger>
<scope>source.css, source.scss, source.sass, source.less</scope>
<description>hsl()</description>
</snippet>
@erikflowers
erikflowers / font-awesome.sublime-completions
Created May 25, 2013
Font-Awesome Sublime Text 2 array of completions. Used for .jade files but can be modified. Used here by just typing "ico..." and the list appears in sublime. Handy for finding things by guessing "Hmm, is there a groups icon? i.icon-g..." and using the arrow keys to look around. Or just start typing anything like "ambu.." and that will bring up …
View font-awesome.sublime-completions
{
"scope": "source.jade",
"completions":
[
"icon-adjust",
"icon-align-center",
"icon-align-justify",
"icon-align-left",
View gist:5864045
  • @mentions, #refs, links, formatting, and tags supported
  • list syntax required (any unordered or ordered list supported)
  • this is a complete item
  • this is an incomplete item
@erikflowers
erikflowers / big-tweet-button.txt
Created Aug 8, 2013
A stylized, large tweet button that is made for use in Wordpress that is using Bootstrap and Font Awesome
View big-tweet-button.txt
custom-tweet-button {
text-align: center;
margin: 20px 0px 50px 0px;
.clearfix;
a.big-tweet {
display: block;
width: 300px;
margin: 0 auto;
font-size: 16px;