Skip to content

Instantly share code, notes, and snippets.

Avatar
💻
Working remotely

Sophia Michelle Andren sandren

💻
Working remotely
View GitHub Profile
@sandren
sandren / pokemon.json
Created Dec 10, 2020 — forked from jherr/pokemon.json
Pokemon list
View pokemon.json
[{
"id": 1,
"name": {
"english": "Bulbasaur",
"japanese": "フシギダネ",
"chinese": "妙蛙种子",
"french": "Bulbizarre"
},
"type": [
"Grass",
@sandren
sandren / image.js
Last active Sep 10, 2020
responsive-image.js: A simple wrapper around the gatsby-image component to make setting the object fit and object position properties easier.
View image.js
import React from 'react';
import GatsbyImage from 'gatsby-image';
import PropTypes from 'prop-types';
const Image = ({ objectFit, objectPosition, ...rest }) => {
let wrapperStyles = {};
let imageStyles = {};
if (objectFit === 'contain') {
wrapperStyles.width = '100%';
@sandren
sandren / reset.css
Last active Sep 10, 2021
reset.css: An annotated CSS reset extending the default Tailwind preflight styles to be more in line with developer expectations and the functional CSS methodology.
View reset.css
@tailwind base;
/*
* Oldschool, top left anchored repeating backgrounds should be opt-in instead
* of opt-out in 2020, lol.
*/
*,
*::before,
*::after {
min-width: 0;
@sandren
sandren / tailwind.md
Last active Sep 15, 2021
Tailwind CSS best practices
View tailwind.md

Tailwind CSS best practices

Utility classes

  1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

  2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

  3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

@sandren
sandren / type-scale.css
Last active Sep 10, 2020
Example of a point based type scale using rem units.
View type-scale.css
.type-6pt {
font-size: 0.5rem;
}
.type-7pt {
font-size: 0.58333rem;
}
.type-8pt {
font-size: 0.66667rem;