yowainwright

This Gist contains a SCSS Mixin for Optimal Text Underlining

This SCSS Mixin changes the text underline color or its location relative to the text it underlines.

A Pen by Jeff Wainwright on CodePen.

License.

yowainwright

# Quik Setup For Ruby
# ===================
# This gist provides a quick ruby env setup for mac

# This gist is deeply inspired by:
# https://gist.github.com/MicahElliott/2407918

# installs homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

yowainwright

// Settings in here override those in "Default/Preferences.sublime-settings",
// and are overridden in turn by syntax-specific settings.
{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
	"ensure_newline_at_eof_on_save": true,
	"folder_exclude_patterns":
	[
		".git",

yowainwright

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH=/Users/jwainwright/.oh-my-zsh

# Set name of the theme to load. Optionally, if you set this to "random"
# it'll load a random theme each time that oh-my-zsh is loaded.
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
ZSH_THEME="powerlevel9k/powerlevel9k"

yowainwright

Check out gustavo! 🚀

yowainwright

Listed below are a few HTML questions for discussing HTML in an interview setting. Each answer should be a short sentence and be answerable over the phone. The question format is more to spur conversation rather than to define merit.

What is the default style display property value of an image (<img>)? What is one reason why this is signicant?

it display: inline-block in browsers that support display: inline-block

it can cause random spacing issues within a content space

When the DOM is rendering in a browser, what element loads after the html element? Why is this signicant?

yowainwright

Listed below are a few CSS questions for discussing CSS in an interview setting. Each answer should be a short sentence and be answerable over the phone. The question format is more to spur conversation rather than to define merit.

What is difference between the CSS property values inherit and initial? What is an example of when this is signicant?

the value inherit takes the value of it's parent the value initial takes the browsers initial value of that html element inherit could be used for links (<a>) within a title element (<h1—6>) to inherit colors, etc initial could be used to override a normalized style for optimal browser specific css.

What is reason to avoid using a *clear-fix? Why might not using a clear-fix be beneficial?

yowainwright

// vertically center
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}
// Example usage: @include vertical-align;

// horizontally align
@mixin horizontal-align($position: relative) {

yowainwright

@mixin progress-bar-color($valueColor: $color-brand-contrast, $backgroundColor: transparent) {
  background-color: $backgroundColor;
  color: $valueColor;
  &::-moz-progress-bar {
    background-color: $valueColor;
  }
  &::-webkit-progress-bar {
    background-color: $backgroundColor;
  }
  &::-webkit-progress-value {

yowainwright

@mixin stripes($backgroundColor: black) {
    background-color: $backgroundColor;
    background-image: linear-gradient(to bottom right, transparent, transparent 25%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.2) 50%, transparent 50%, transparent 75%, rgba(255,255,255,.2) 75%, rgba(255,255,255,.2));
    background-size: 4px 4px;
}