Skip to content

Instantly share code, notes, and snippets.

View bridgestew's full-sized avatar

Bridget Stewart bridgestew

View GitHub Profile
@bridgestew
bridgestew / .gitignore
Created May 17, 2012 14:33
How the world should work
Brad
Has a rake task ever borked your mysql login? Yeah, well, after spending an
evening figuring out how to solve it, here it is:
Stop mysql
launchctl unload -w ~/Library/LaunchAgents/com.mysql.mysqld.plist
Replace this with your version of this path, MySQL version:
/usr/local/Cellar/mysql/5.5.12/bin/mysqld --skip-grant-tables
Open new terminal window...
@bridgestew
bridgestew / property-order-list
Created March 9, 2013 05:36
CSS property order for csslint
position
top
right
bottom
left
z-index
display
float
width
height
module Jekyll
# Sass plugin to convert .scss to .css
#
# Note: This is configured to use the new css like syntax available in sass.
require 'sass'
class SassConverter < Converter
safe true
priority :low
def matches(ext)
@bridgestew
bridgestew / Old Skool Classitis
Created July 7, 2013 17:03
When the webdev community railed against "classitis" it was more about the lack of HTML elements, not really about how many classes were used. This gist illustrates the absurdity of it all.
<div class="wrap">
<div class="wrap-inner">
<div class="header">
<div class="logo">
<img src="#" />
</div>
<div class="site-title">Site Title</div>
<div class="nav">
<div class="nav-list">
<div class="nav-item">
@bridgestew
bridgestew / specific selectors
Created July 7, 2013 17:10
Specific selector combinations based on the current DOM structure make styles less portable. This is too restrictive, even if it isn't a lengthy combination.
.accordion-super h1 {
color: blue;
font-family: serif;
font-size: 20px;
}
.faq h2.question {
color: blue;
font-size: 18px;
}
@bridgestew
bridgestew / Hard to follow
Created July 7, 2013 17:17
Even if we try to reduce some repetition when a style is repeated, we now have a more complicated picture of what is going where. Modules and extending those modules gives a clearer representation of what is going on. It also makes it easier to trace through the styles for editing. This gist represents an attempt at cutting down style repetition.
.accordion-super h1,
.faq h2.question {
color: blue;
}
.accordion-super h1,
.archive h4 {
font-family: serif;
}
<div class="accordion">
<div class="separator">
<div class="accordion__head">
<h2 class="accordion__title">
<a class="accordion__toggle js-accordion-toggle" href="#">
<i class="icn icn--accordion js-accordion-state">Open</i>
FAQ Question 1</a>
</h2>
</div>
<div class="accordion__body is-closed">
<ul class="accordion list--unstyled" id="archive">
<li class="accordion__item">
<div class="accordion__head">
<h4 class="accordion__title">
<a class="accordion__toggle js-accordion-toggle" href="#">
<i class="icn icn--accordion js-accordion-state">Open</i>
January</a>
</h4>
</div>
<div class="accordion__body is-closed">
/* ===============================================================
A few base styles
=========================================================== */
ul, p {
color: #333;
margin-top: 0;
margin-bottom: 1em;
}
a {