Skip to content

Instantly share code, notes, and snippets.

View somecallmejosh's full-sized avatar

Joshua Briley somecallmejosh

View GitHub Profile
@somecallmejosh
somecallmejosh / browser-queries.scss
Created June 27, 2018 18:46
Sass Browser Queries
@mixin browser($browser) {
@if $browser == 'firefox' {
@-moz-document url-prefix() {
@content;
}
}
@if $browser == 'galax3' {
@media only screen and (-webkit-device-pixel-ratio: 2) {
@content;
@somecallmejosh
somecallmejosh / Setup.md
Last active April 25, 2018 19:09
Front End Dev Setup

UI / Front End Local Dev Environment at BHSI

Setup Windows Subsystem for Linux

This will give us a bash terminal. It also makes it a bit easier to manage file permissions, add dependencies, etc.

Setup Homebrew

Homebrew installs packages to their own directory and then symlinks their files into /usr/local.

#Dot files
alias editbash='code ~/.bash_profile'
alias editzsh='code ~/.zshrc'
alias editgitconfig='code ~/.gitconfig'
alias editgitignore='code ~/.gitignore'
alias editnpmdefaults='code ~/.npmrc'
alias edithosts='code /etc/hosts'
alias s3config='code ~/.s3cfg'
@somecallmejosh
somecallmejosh / SassMeister-input.scss
Last active November 10, 2017 22:20
InuitCSS Inspired Flex Grid
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// Inspired from: `https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.widths.scss`
$delimiter: \/ !default;
$breakpoint-separator: \@ !default;
$grid-margin: 8; // must be a number
.form input[type='email'],
.form input[type='search'],
.form input[type='text'] {
font-size: 2rem;
outline: none;
color: #333;
font-family: "Merriweather", serif;
}
.form :-moz-placeholder,
.form ::-moz-placeholder {
@mixin default-placeholder {
color: #333;
font-family: $montserrat;
}
@mixin fly-out-placeholder {
color: #777;
font-family: $merriweather;
}
<input
type="text"
name="search"
value="search..."
alt="search" onblur="if(this.value=='') this.value='search...';"
onfocus="if(this.value=='search...')
this.value='';"
>
'use strict';
var form = $('form'),
formFields = $('.atkForm__fields'),
formSubmit = $('.atkForm__submit'),
parentGroup = $('.atkForm__group'),
formError = $('.atkForm__group--error');
$('form input').blur(function() {
@somecallmejosh
somecallmejosh / form.scss
Last active November 29, 2016 20:00
Form Styles
$field-height: 50px;
.atkForm {
input,
input[type="search"],
textarea {
/* For Safari zooming issues */
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
font-size: 16px;
<form action="#" class="atkForm atkForm--side-by-side form-1" novalidate>
<div class="atkForm__fields">
<div class="atkForm__group">
<label class="atkForm__group--label" for="email">Enter Your Email Address</label>
<input class="atkForm__group--input" type="email" name="email" required />
<div class="atkForm__group--error">Email is required</div>
</div>
</div>
<div class="atkForm__action">
<button class="atkForm__submit" type="submit">