Erik Flowers erikflowers
erikflowers
/ Cucumber Example.feature
Last active
December 15, 2023 19:36
Example UX cucumber feature file/scenario
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
| 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 |
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
| /*! | |
| * Bootstrap Grid v4.0.0 (https://getbootstrap.com) | |
| * Copyright 2011-2018 The Bootstrap Authors | |
| * Copyright 2011-2018 Twitter, Inc. | |
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
| */ | |
| @-ms-viewport { | |
| width: device-width; | |
| } |
erikflowers
/ Less Retina Mixin Utility Class
Last active
February 22, 2019 00:37
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.
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
| // 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
/ gist:6710391
Created
September 26, 2013 06:03
Quick add no styles to a UL - either inline or block
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
| .ul-inline-no-style() { | |
| margin: 0px; | |
| list-style: none; | |
| .clearfix; | |
| li { | |
| float: left; | |
| display: block; | |
| } | |
| } |
erikflowers
/ fixed-screen-layered-background.less
Last active
January 31, 2019 10:48
A Less mixin for layering 2 images in a background, and using "background-cover" so the bottom layer is always full size. Good for scrolling fixed backgrounds where you want a screen or other element on top. Here's a 2x2 pixel grid to get you started: http://www.helloerik.com/downloads/grid.png.zip See an example here:
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
| .background-layers(@top, @bottom) { | |
| background: url(@top), url(@bottom); | |
| background-position: top center, top center; | |
| background-attachment: fixed, fixed; | |
| background-repeat: repeat, repeat; | |
| -webkit-background-size: auto, cover; | |
| -moz-background-size: auto, cover; | |
| -o-background-size: auto, cover; | |
| background-size: auto, cover; | |
| } |
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
| .masthead { | |
| .make-row(); | |
| .main-story { | |
| .make-sm-column(6); | |
| .make-md-column(7); | |
| .make-lg-column(6); | |
| } | |
| .second-story { | |
| .make-sm-column(6); | |
| .make-md-column(5); |
erikflowers
/ gist:8545409
Created
January 21, 2014 18:28
experiment in non-responsifying Bootstrap 3, for whatever reason.... :(
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
| // Media queries breakpoints | |
| // -------------------------------------------------- | |
| // Extra small screen / phone | |
| // Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 | |
| @screen-xs: 480px; | |
| @screen-xs-min: @screen-xs; | |
| @screen-phone: @screen-xs-min; | |
| // Small screen / tablet |
erikflowers
/ gist:8231344
Created
January 3, 2014 02:10
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
| $(document).ready stickyAside = -> | |
| top = $(".sticky").offset().top | |
| $(window).scroll -> | |
| if $(this).scrollTop() > top - 40 | |
| $(".sticky").addClass "stick image" | |
| else | |
| $(".sticky").removeClass "stick image" |
erikflowers
/ gist:6710372
Created
September 26, 2013 06:01
An easy way to include just super standard 1px text shadows. No frills.
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
| .textShadowBlack(@shadow: 0 1px 0px rgba(0,0,0,1)) { | |
| text-shadow: @shadow; | |
| } | |
| .textShadowWhite(@shadow: 0 1px 0px rgba(255,255,255,1)) { | |
| text-shadow: @shadow; | |
| } |
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 is the mixin | |
| .highlight(@backgroundColor, @textColor) { | |
| ::selection, -moz::selection { | |
| background: @backgroundColor; | |
| color: @textColor; | |
| } | |
| } | |
| // This is how you use it |
NewerOlder