Skip to content

Instantly share code, notes, and snippets.

View arlodesign's full-sized avatar

Arlo Bryan Guthrie arlodesign

View GitHub Profile
@arlodesign
arlodesign / .csscomb.js
Created November 19, 2016 16:31
Sprout Social CSSComb Config
View .csscomb.js
{
"block-indent": "\t",
"space-before-selector-delimiter": "",
"space-after-selector-delimiter": "\n",
"space-before-opening-brace": " ",
"space-before-closing-brace": "\n",
"space-before-colon": "",
"space-after-colon": " ",
"space-after-opening-brace": "\n",
"space-between-declarations": "\n",
@arlodesign
arlodesign / Default (OSX).sublime-keymap
Last active January 13, 2016 22:53
Add line breaks before nested selectors when running CSSComb in Sublime Text
View Default (OSX).sublime-keymap
[
{
"keys": ["ctrl+shift+c"],
"command": "chain",
"args": {
"commands": [
["css_comb"],
["reg_replace", {"replacements": ["css_spaceout", "css_spacein"]}]
]
}
@arlodesign
arlodesign / _StyleGuide.md
Last active November 10, 2016 21:44
Sprout Social CSS Style Guide
View _StyleGuide.md

CSS/SCSS Standards

This document represents our ideals for writing CSS for the Sprout Social web app*. This document will serve as our guide for writing new CSS and updating existing styles. Code reviews of new CSS will adhere to these guidelines as closely as is practical—it’s a jungle in there, so concessions will be made for fighting existing specificity issues.

Colors, buttons, icons and modals can be found at our previous style guide document. Though that document is now deprecated, the patterns are still valid.

Format

  • Tabs, not spaces.*
  • One selector per line.
@arlodesign
arlodesign / # Sublime Emmet JSX Reactjs.md
Last active September 15, 2016 08:37 — forked from max-mykhailenko/# Sublime Emmet JSX Reactjs.md
Sublime text 3. Enable Emmet in JSX files with Sublime React plugin
View # Sublime Emmet JSX Reactjs.md

Problem

  • Using emmet in jsx files
  • Emmet expands text when js autocomplete needed
  • Using className instead of class

How it works

  • Install plugin RegReplace
  • Install plugin Chain Of Command
@arlodesign
arlodesign / SassMeister-input.scss
Last active August 29, 2015 14:25
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@function color-diff($color-a, $color-b) {
$hue: hue($color-a) - hue($color-b);
$saturation: saturation($color-a) - saturation($color-b);
$lightness: lightness($color-a) - lightness($color-b);
$function-hue: 'adjust-hue';
@arlodesign
arlodesign / SassMeister-input.scss
Created July 1, 2015 20:42
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
div {
@each $lang in (en-us, es-la, pt-br) {
html[lang="#{$lang}"] & {
background-image: url(http://url.com/#{$lang}/image.png);
}
}
@arlodesign
arlodesign / README.md
Last active December 12, 2016 21:46
Compare CSS
View README.md
  1. Download this gist into a csscompare folder

  2. npm install

  3. Create before and after folders. Your folder should now look like this:

     - /csscompare
     |- /after
     |- /before
     |- /npm_modules
     |- index.js
    

|- package.json

View john wayne gacy kasem.txt
````````....````
`..-:/+oyhddddmmmmmmmmmdhyyo+//:--.`````
`.-:+yhmNNNNNMMMMMMMMMMMMMMMMMMMMMMMMNNNNmdddhhso++/-.`
View brick in yo face.txt
`````````````
`.....` `.-:oyyoshhhhs/:::-`
`./+ydmdhyo+.````````..-/+shdmmdmmNMNmmdsyhyo.
@arlodesign
arlodesign / Pixel Zoom.jsx
Last active November 27, 2021 09:42
100% Pixel-for-Pixel Zoom when designing for web/mobile/tablet in InDesign
View Pixel Zoom.jsx
// Run this script when using InDesign for web/mobile/tablet comps
// Calculates zoom based on 72ppi, so 100% shows pixel-perfect sizing
app.generalPreferences.customMonitorPpi = 72;
app.generalPreferences.useCustomMonitorResolution = true;