Discover tomhodgins/caffeinated-style-sheets Open Source project

dragon.js is a bookmarklet that lets you drag any element on a website using a mouse or touchscreen. The goal is to speed up in-browser design critiques and brainstorming new layout ideas.

368

dragon

A simple CSS preset for 2020

144

preset

CSSplus is a collection of CSS Reprocessor plugins that dynamically update CSS variables

144

cssplus

A flexible <style>-tag based CSS reprocessor

142

reprocss

Quark.js is a microscopic atomic CSS polyfill in JS just 140 bytes

119

quark

A simple live HTML, CSS, and JavaScript scratchpad in your browser

liveeditor

QSS ➸ a simple query syntax for CSS element queries

qss

Easy to use event-driven CSS variables

computed-variables

A JS-in-CSS stylesheet loader

jsincss

Boilerstrap is a WordPress theme based on the Twenty Twelve theme from Wordpress.org that includes support for Bootstrap, FontAwesome icons, custom typography, jQuery, keyboard shortcuts, & much more…

boilerstrap

PHP

deqaf

Decaffeinate CSS stylesheets client-side

Tinkerpad is an HTML, CSS, and JavaScript scratchpad similar to jsFiddle. Tinkerpad is written as an offline-capable HTML5 web app and requires no external dependencies.

tinkerpad

A Package Manager for CSS Extensions

css-package-manager

extstyler

Empty Chrome extension to add custom CSS or JavaScript on top of websites, ready to drop in your user styles and scripts

Decaffeinate your JS-powered CSS stylesheets

qaffeine

A command-line checklist app

cheq

Download, configure, and install Wordpress with one easy script

wordpresto

Shell

varius

Exposing properties of HTML elements as CSS variables

Memo Pad is a simple memo pad that saves your notes to localStorage, as well as allows you to share notes via URL

memopad

Add JavaScript tests to <link> tags to toggle stylesheets

slinky

A Pattern for simple Event-Driven Virtual Stylesheets: 100% CSS plus the expressive power of JavaScript

js-in-css

Functional And Responsive Template is a utility class framework that uses element queries

fartcss

A standards-based CSS parser - forked from tabatkins/parse-css

parse-css

Theremin app built using JavaScript

theremin

A Fresh Approach to Extending CSS

responsive.style

SpeedTest is an HTML5 app that lets you test websites at a variety of resolutions very quickly. It also works on mobile, which allows you to test websites at a variety of widths on a phone or tablet where you can't normally change the width of the browser.

speedtest

A spec for an aspect-ratio property in CSS

aspect-ratio-spec

The 'jQuery-for-the-CSSOM', a library for working with CSS stylesheets and rules in the browser

cssomtools

The Arecibo Message - for JS1K 2017

js1k-arecibo

Interpolate JavaScript Template Strings

jsts-engine

A simple CSS preprocessor to demonstrate supporting custom at-rules, selectors, properties, functions, and units

process-css-demo

A basic HTML/CSS/JS website with a simple toolchain: none

basic-website-starter

Examples of CSS syntax for testing purposes

css-tests

qaffeine-demo

A demo site of qaffeine

Convert a CSSStyleSheet object to a string of text

stringify-css-stylesheet

A compiler to turn EQCSS syntax into equivalent (vanilla) JavaScript

eqcss-compiler

This is a blank HTML5 template with Bootstrap, jQuery, and FontAwesome already integrated. Includes meta tags for OpenGraph, iOS browsing, icons (including favicon), Windows Live Tile, and the usual keywords and description. Includes .htaccess and robots.txt as well. This is ready for you to clone and kickstart your next HTML project!

5keleton

ApacheConf

template-factory

The Template Factory is a small website template written simply in PHP, HTML, CSS and JavaScript. Powered by EQCSS for element queries, plus lightweight plugins for tooltips, modals, notifications, and more!

custom-css

Examples of custom CSS

Read Youtube .SBV caption files and convert to JSON, text, or HTML

sbv

tweetcruncher.com

Tweet Cruncher

Sourceror lets you view the source of any web page using a PHP proxy.

sourceror

Unicons.css is a CSS file to make adding unicode characters to HTML in a semantic and easy to use way. Because Unicons.css is so lightweight you can include just one file to supplement or replace other icon font solutions on your site like FontAwesome

unicons

Cascading JS Variables with a similar syntax and usage to CSS Variables, implemented in JavaScript

cascading-js-variables

Nesting CSS rules inside custom properties

anesthetic

A Web REPL for sketching out ideas

repl

A :has() selector plugin for jsincss

jsincss-has-selector

An element query plugin for jsincss

jsincss-element-query

Using a strict subset of CSS syntax as a superset of JSON

csson

A pure-JavaScript element query demonstration using data attributes for syntax, and applied via classes

querious

Basic Instruction Language

bil

Alijn is a script that puts some JavaScript smarts behind your responsive CSS styles. Calculate the CSS values for tricky layout functions like vertical centering or hortizontal centering in realtime.

alijn

Query deeply nested JavaScript objects with XPath

espath

Magic Mathpad: a live JavaScript calculator

mathpad

Celebrating Life's Special Moments

intimateoccasions.ca

HTML templating helper functions written in a Continuation-Passing Style for JavaScript, Python, and Ruby

htmlforever

Python

style-container

A way to re-use CSS for scoped styles and container queries in HTML

apophany

deno-test

deck

Deck of playing cards in HTML, CSS, and JavaScript

piano

HTML5 synth app for iPad

respec allows CSS authors to assign the specificity of a rule separately from the specificity of the selector

respec

sugarfree

A live CSS debugging stylesheet you can copy/paste into the browser's JS console

css-overlay-snippet

Parse media queries from the context of an element. Like window.matchMedia() but for HTML elements.

element-match-media

A simple electron app for browserstack.com

browserstack-app

Style your console.log() messages with ease

loqui

Docs for ##learncss on freenode

learncss

jsincss-overflow

An overflow-detecting plugin for jsincss

An elder selector plugin for jsincss

jsincss-elder-selector

A regex matching plugin for jsincss

jsincss-regex-match

domtools

Cyfer - A Chrome Extension that skins gli.ph conversations

cyfer

String combinators designed to help the creation of jsincss plugins

mixin-macros

A jsincss plugin that lets you select elements to style using XPath selectors

jsincss-xpath-selector

An element unit plugin for jsincss

jsincss-element-units

Just a simple WebAudio synth. No reason. What could go wrong…

synth

A parent selector plugin for jsincss

jsincss-parent-selector

Simple queryXPath() and queryXPathAll() functions for JavaScript

queryxpath

OneButton CDN, the easiest tool for updating Bootstrap 3.0, FontAwesome, and jQuery on your own server

onebuttoncdn

PHP

loadjs

LoadJS lets you share JavaScript on Twitter by encoding it as a URL to share

Static HTML site built using HTML5, CSS, and JavaScript. No frameworks, no bootstrap, no jQuery.

freshstart

A string matching plugin for jsincss

jsincss-string-match

DOM templating helper functions written in a Continuation-Passing Style

domforever

bengalcat.party

It's a bengal cat party!

HTTPArchive DOM Explorer CLI tool

hade

Symbolic expression parsing for JavaScript

tomhodgins.com

Website for Tom Hodgins

symbolix

A CSS processor with a simple plugin design that can process CSS server-side and client-side into CSS, JS, and other file output

process-css

A <200 byte container query plugin

mini-container-queries

Parse a string of text as a CSS stylesheet with JavaScript in the browser environment

parse-css-stylesheet