Mike Morici himedlooff

## trello-css-guide.md

      
              1 file
            
          
              126 forks
            
          
              62 comments
            
          
              1474 stars
            
          
                bobbygrace
                / trello-css-guide.md
            
            
              Last active
              April 22, 2024 10:15
            
              
                Trello CSS Guide
              
          
    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?

  
## stringify.js
var stringify = function(obj, prop) {
  var placeholder = '____PLACEHOLDER____';
  var fns = [];
  var json = JSON.stringify(obj, function(key, value) {
    if (typeof value === 'function') {
      fns.push(value);
      return placeholder;
    }
    return value;
  }, 2);

## test.js

function Simulator(){
	var ret = {}
	var _callback = undefined;
	var _queue = [];
    var _counter = 0;
	ret.fireCallback = function(json) {
		// console.log('Fire event '+json);
		if( _callback ) _callback(json);
	}

## responsive.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Responsive Design Testing</title>
	<style>
		body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
		.wrapper { width: 6000px; }
		.frame { float: left; }
		h2 { margin: 0 0 5px 0; }

## mediaquerycolums.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Query Multiple Columns</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
<style>
@media all and (min-width: 40em) and (min-height: 36em) {
    [role="main"] {
        -webkit-column-count: 2;

## hideaddrbar.js
/*
  * Normalized hide address bar for iOS & Android
  * (c) Scott Jehl, scottjehl.com
  * MIT License
*/
(function( win ){
	var doc = win.document;

	// If there's a hash, or addEventListener is undefined, stop here
	if( !location.hash && win.addEventListener ){
	var stringify = function(obj, prop) {
	var placeholder = '____PLACEHOLDER____';
	var fns = [];
	var json = JSON.stringify(obj, function(key, value) {
	if (typeof value === 'function') {
	fns.push(value);
	return placeholder;
	}
	return value;
	}, 2);

	function Simulator(){
	var ret = {}
	var _callback = undefined;
	var _queue = [];
	var _counter = 0;
	ret.fireCallback = function(json) {
	// console.log('Fire event '+json);
	if( _callback ) _callback(json);
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Responsive Design Testing</title>
	<style>
	body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }
	.wrapper { width: 6000px; }
	.frame { float: left; }
	h2 { margin: 0 0 5px 0; }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Media Query Multiple Columns</title>
	<meta name="viewport" content="width=device-width, intial-scale=1">
	<style>
	@media all and (min-width: 40em) and (min-height: 36em) {
	[role="main"] {
	-webkit-column-count: 2;
	/*
	* Normalized hide address bar for iOS & Android
	* (c) Scott Jehl, scottjehl.com
	* MIT License
	*/
	(function( win ){
	var doc = win.document;

	// If there's a hash, or addEventListener is undefined, stop here
	if( !location.hash && win.addEventListener ){