Charles Peters UI Engineer

Experiments

Ganymede

Ganymede is a color palette for Hyper/Hyperterm, Vim & Atom inspired by the icy coldness of the moons of Jupiter with brighter colors to contrast it.

LGBTQ.css

Some simple CSS gradients to add some pride to your stylesheets. Color values are slightly saturated for preference.

Wilco

Wilco is an opinionated linter for CSS that's powered by Stylelint. It's the first command line app I've ever started and finished. The focus is meant to just take in a glob of files and check it against a specific rule set for style violations.

Level.css

A super simple CSS reset. I am never really sure how aggressive of a reset css or a normalize I ever want in a project or how opinionated that level of hierarchy should be.

ReDribbble

A small Dribbble client built in React. Still very much an experiment and work-in-progress. Search for a username and see their most recent shots.

ff.css

A collection of font-family utilities with the BEM .u- prefix.

Status Board

Ember powered status board that displays information about select Github repos.

Thunder

This is a small module designed to set inline fallbacks when WebP isn't available in a browser. It was more or less a way to mess around with WebP in depth.

Cercyon & Hephaestus

Hephaestus & Cercyon are two boilerplates for rapid browser prototyping. The former focuses on Metalsmith and the latter just compiles simple Handlebars templates into static content. Both projects include Obsidian and identical PostCSS/Babel configurations and simple servers powered through BrowserSync.

VVWIP

VVWIP is a collection of simple badges to show the human status of your project in your README. For instance if you want show that your project is in some sort of formative stage but actively being worked on, you could drop the AWIP badge in your project's README.

Anchorage

Anchorage automatically sets the links and IDs of headlines inside an element so you can have internal page links to reference and share. This is a lightweight alternative of Anchor.js using ES6 classes.

Sass Snippets

Over the last 4 years I've used Sass a lot, up until 2015 (when PostCSS exploded in popularity). During that time I've amassed a lot of code snippets for Sass projects. A lot of these are unremarkable, but have been really, really useful to me.

  • Flexo is a collection of snippets for Flexbox
  • Embark is a group of snippets for common variables, colors, font family fallbacks, media query mixins and common sizes.
  • Twelve is project of really simple Sass mixins & extends to create a float-based grid and grid classes.
  • Mickey snippets for CSS animations.
  • Resetatron is a collection of Sass snippets for a typographic reset and browser normalizing.
  • Arsenal is an old collection of components, design patterns, generally anything I've found that can be reusable/modifiable/stuff-I-need-a-lot and other stuff I think could be useful. All written in Sass and attempts to comply with SMACSS and BEM with Pascal casing.

If you're interested in how I might write Sass today check out the Sass port of Obsidian.css.