Tiago Celestino tcelestino

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Dev List Bookmarks

Attention: the list was moved to https://github.com/vitorbritto/dev-list

This page is not maintained anymore, please update your bookmarks.

Recently, I decided to organize my bookmarks. So, like a good fellow, I am sharing with you. I hope you enjoy!

Yeoman + Compass Sprites

Setup

generator-webapp has support for compass out of the box. However, in order to use one of my favorite features of it — sprites and the image_url helper — you have to make some adjustments to the Gruntfile.

Let's assume you use a SASS stylesheet like this one:

@import "design/*.png"

	# Ask for the user password
	# Script only works if sudo caches the password for a few minutes
	sudo true

	# Install kernel extra's to enable docker aufs support
	# sudo apt-get -y install linux-image-extra-$(uname -r)

	# Add Docker PPA and install latest version
	# sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 36A1D7869245C8950F966E92D8576A8BA88D21E9
	# sudo sh -c "echo deb https://get.docker.io/ubuntu docker main > /etc/apt/sources.list.d/docker.list"

	// Future versions of Hyper may add additional config options,
	// which will not automatically be merged into this file.
	// See https://hyper.is#cfg for all currently supported options.

	module.exports = {
	config: {
	// default font size in pixels for all tabs
	fontSize: 14,

	// font family with optional fallbacks

	#!/bin/bash

	sudo apt-get remove phantomjs

	sudo unlink /usr/local/bin/phantomjs
	sudo unlink /usr/local/share/phantomjs
	sudo unlink /usr/bin/phantomjs

	cd /usr/local/share

	git branch -m old_branch new_branch # Rename branch locally
	git push origin :old_branch # Delete the old branch
	git push --set-upstream origin new_branch # Push the new branch, set local branch to track the new remote