Skip to content

Instantly share code, notes, and snippets.

@sethlopezme
sethlopezme / _breakpoint.scss
Last active August 29, 2015 13:57
My breakpoint SASS mixin. Outputs em-based media queries & allows named breakpoints, use of up/down for min/max width, as well as a media option.
// Breakpoints - Outputs em-based media queries
@mixin bp($name, $expression: up, $type: only screen, $em-context: 16) {
// List unitless pixel-equivalent sizes here
$sizes: (
XS: 320,
S: 480,
M: 600,
L: 1000,
XL: 1200
);
@sethlopezme
sethlopezme / example.css
Last active August 29, 2015 14:00
Example gist to use for testing my website.
p {
color: red;
font-size: 2em;
}
p.bold {
font-weight: bold;
}
p.underline {
@sethlopezme
sethlopezme / Preferences.sublime-settings
Last active August 29, 2015 14:02
My Sublime Text 3 Plugins and Settings
{
"always_show_minimap_viewport": true,
"auto_complete_commit_on_tab": true,
"bold_folder_labels": true,
"caret_style": "phase",
"command": "alignment",
"font_face": "Source Code Pro",
"font_size": 9,
"highlight_line": true,
"highlight_modified_tabs": true,
@sethlopezme
sethlopezme / _breakpoint.scss
Last active August 29, 2015 14:03
Updated breakpoint mixin to account for multiple types of media queries in one.
@mixin bp($queries, $type: only screen) {
$query-count: length($queries);
$media-statement: "#{$type} and";
@for $i from 1 through $query-count {
$query: nth($queries, $i);
$value: '';
$key: '';
@if length($query) == 1 or nth($query, 2) == up {
$key: min-width;
$value: if(map-has-key($bp, nth($query, 1)), px-em(map-get($bp, nth($query, 1))), px-em(nth($query, 1)));
@sethlopezme
sethlopezme / gist:bed911362eb67d92f33d
Created April 21, 2015 01:24
WeeChat Commands to Add Slack Servers
/server add <name> <team>.irc.slack.com/6667 -ssl -password=<password> -username=<username> -nicks=<username> -ssl_verify=off
/connect <name>
@sethlopezme
sethlopezme / StepProgressBar.js
Last active August 29, 2015 14:20
The progress bar script that I made for my accessible form example. Works in modern browsers and IE9+. Read the blog post at http://sethlopez.me/article/understanding-accessibility-forms/.
/**
*
* Check out the example at http://sethlopez.me/article/understanding-accessibility-forms/.
*
* Copyright (c) 2015 Seth Lopez
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
@sethlopezme
sethlopezme / README.md
Last active August 29, 2015 14:26 — forked from jxson/README.md
README.md template

Synopsis

At the top of the file there should be a short introduction and/ or overview that explains what the project is. This description should match descriptions added for package managers (Gemspec, package.json, etc.)

Code Example

Show what the library does as concisely as possible, developers should be able to figure out how your project solves their problem by looking at the code example. Make sure the API you are showing off is obvious, and that your code is short and concise.

Motivation

@sethlopezme
sethlopezme / full-match.js
Last active February 13, 2024 07:35
Regex for matching any hex, rgb(a), or hsl(a) value. Assumes that you've lowercased the string and removed spaces.
/^(#?([a-f\d]{3,4}|[a-f\d]{6}|[a-f\d]{8})|rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)|rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|0?\.\d|1(\.0)?)\)|hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)|hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\))$/
@sethlopezme
sethlopezme / keymap.cson
Last active October 8, 2020 00:58
My Atom keymap for focusing and splitting panes, and moving pane items. Based on the shortcuts from the Origami (https://packagecontrol.io/packages/Origami) package for Sublime Text.
'.platform-darwin':
# focus pane
'cmd-k left': 'window:focus-pane-on-left'
'cmd-k right': 'window:focus-pane-on-right'
'cmd-k up': 'window:focus-pane-above'
'cmd-k down': 'window:focus-pane-below'
# split pane
'cmd-k cmd-left': 'pane:split-left'
'cmd-k cmd-right': 'pane:split-right'
'cmd-k cmd-up': 'pane:split-up'
{
"dependencies": {
"jshint": "latest",
"uglifyjs": "latest",
"watch": "latest"
},
"config": {
"github_url": "https://api.github.com/repos/MarkBiesheuvel/markbiesheuvel.nl/commits?page=1&per_page=10",
"maps_url": "https://maps.googleapis.com/maps/api/staticmap?size=640x200&zoom=7&markers=color%3Ablue%7Clabel%3AH%7C51.469941%2C5.472258&markers=color%3Ayellow%7Clabel%3AW%7C51.574344%2C5.13781",
},