Chris Rault smokeyfro

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?

	#!/bin/bash

	set -euo pipefail

	# Definition of colors for terminal output
	readonly RED_COLOR="\e[31m"
	readonly GREEN_COLOR="\e[32m"
	readonly YELLOW_COLOR="\e[33m"
	readonly BLUE_COLOR="\e[34m"
	readonly MAGENTA_COLOR="\e[35m"

	/* eslint-disable require-await */

	import type { BulkOperationResult } from 'node_modules/payload/dist/collections/config/types';
	import type { PaginatedDocs } from 'payload/database';
	import type { Where } from 'payload/types';
	import type { Config } from 'payload-types';
	import type { DeepPartial } from 'ts-essentials';

	import type { APIBuilderArgs } from './types';
	import { buildQueryString } from './buildQueryString';

	<template>
	<div class="ui cards" style="margin: 10px">
	<div class="ui icon input" style="width: 100%">
	<input type="text" placeholder="Search..." v-model="searchQuery" />
	<i class="search icon"></i>
	</div>
	<div
	class="card ui fluid"
	v-for="product in searchedProducts"
	:key="product.id"

	const { PurgeCSS } = require('purgecss');

	/**
	* Remove any CSS not used on the page and inline the remaining CSS in the
	* <head>.
	*
	* @see {@link https://github.com/FullHuman/purgecss}
	*/
	eleventyConfig.addTransform('purge-and-inline-css', async (content, outputPath) => {
	if (process.env.ELEVENTY_ENV !== 'production' \|\| !outputPath.endsWith('.html')) {

	const path = require('path')
	const axios = require('axios')
	const fs = require('fs')
	const languages = [
	'en',
	]

	class gridsomeSetup {

	static defaultOptions () {

	<!-- This is how you get a comma-separated list of items in Vue.js 2.0,
	without a comma at the end of the last item -->

	<p v-for="(item, index) in items">
	{{author}}<span v-if="index != (items.length - 1)">,</span>
	</p>

	@import url(http://fonts.googleapis.com/css?family=Raleway:700,800);

	html, body { margin: 0; }

	:focus { outline: none; }
	::-webkit-input-placeholder { color: #DEDFDF; }
	::-moz-placeholder { color: #DEDFDF; }
	:-moz-placeholder { color: #DEDFDF; }
	::-ms-input-placeholder { color: #DEDFDF; }

	<?php

	/**
	* Class Simple_Json_Api
	*/
	class Simple_Json_Api {

	/**
	* The top level argument for the endpoint.
	* ex http://example.com/myjson/post/1