Top Rating
- Top Contributors
  Discover the Top Open Source contributors by country or by language
- Interviews
  Discover real stories from Open Source developers
Discover

Discover your Favorite Language
Discover the top trending repositories and projects on Github. Explore the latest trends in your preferred languages.

Lua

C

Scala

Julia

OCaml

Erlang

Assembly

Kotlin

More Languages
Awesome

Awesome repositories
Discover the most awesome repositories and projects of your favorite languages. Inspired by the Awesome-* lists trend in GitHub.

Perl

Erlang

Zig

C#

Elm

Swift

Objective-C

Java

More Languages
By Country

Rankings by Country
Discover the community of talented open source contributors in each country.

🇲🇺 Mauritius

🇱🇻 Latvia

🇸🇮 Slovenia

🇮🇱 Israel

🇦🇸 American Samoa

🇬🇪 Georgia

🇳🇷 Nauru

🇧🇮 Burundi

All Countries Compare Countries

johnpolacek/design-system-playground

Stars
160
Rank 234,703 (Top 5 %)
Language
JavaScript
License
MIT License
Created over 7 years ago
Updated almost 2 years ago

johnpolacek/design-system-playground

johnpolacek

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Play with typography and colors to generate a design system theme you can use in your projects.

Design System Playground

Play with typography and colors to generate a design system theme you can use in your projects.

With a Theme Object that follows the System UI Theme Specification for style values, scales, and/or design tokens, you can create interoperable components that share common underlying style properties across projects, websites, applications and environments.

Related Projects

Check out these other cool projects:

scrollorama

The jQuery plugin for doing cool scrolly stuff. NOTE: No longer under active development. New version is ScrollMagic.js

superscrollorama

The original jQuery plugin for supercool scroll animation. NOTE: No longer under active development. New version is ScrollMagic.js

BigVideo.js

The jQuery Plugin for Big Background Video (and Images)

stacktable.js

jQuery plugin for stacking tables on small screens

scrolldeck.js

jQuery plugin for making scrolling presentation decks

imagefill.js

The jQuery plugin for making images fill their containers (and be centered)

date-range-picker-for-shadcn

DateRangePicker is a reusable component for shadcn using Radix UI and Tailwind CSS. Includes preset date ranges, text entry, calendar selection and date comparison

controldeck.js

control html5 presentations with node.js

Responsivator

Website for viewing and sharing how web pages look at different screen sizes

expressive-css

An approach to writing lightweight, scalable CSS using utility classes that are easy to write and understand.

extra-strength-responsive-grids

A Fluid CSS Grid System for Responsive Web Design The Fluid CSS Grid System for Responsive Web Design. Take total control of your layouts.

TweenPages

Build complex animated page transitions with GSAP and Next.js

nextjs-mdx-blog-starter

Next.js MDX Blog Starter for building blogs with Next.js and MDX, including Theme UI Component Design System, Vercel Deployment and more.

ResponsiveThumbnailGallery

jQuery Plugin for creating image galleries that scale to fit their container.

styled-starter

Starter Kit with React, Next.js, Styled System and Catalog to get projects going with a design theme, built-in styleguide and browser testing

animated-gradient-background-generator

Animated CSS Gradient Background Generator

tweendeck

Next level animation for web presentations

MagicNav.js

The jQuery Plugin for generating nav links from page elements

styled-system-html

HTML elements extended as styled components via styled system, ready for theming.

serverless-cms

Proof of concept demo for creating a custom serverless CMS for generating static websites

nextjs-scraper-playground

Build and test your own web scraper APIs with Next.js API Routes and cheerio

the-case-for-atomic-css

A collection of various content detailing and demonstrating the benefits of Atomic CSS, also known as Utility First or Functional CSS.

SimpleVid

jQuery Plugin for Fluid Video

react-widget-library-starter

React boilerplate for producing libraries of embeddable widgets

Match-The-Letter-Game

Match The Letter is a cross-device mobile educational game for kids built with the Corona SDK

sizeit.js

sizeit.js is a JavaScript utility that detects the screen size and loads external css based on the settings you configure. Works kinda like media queries.

open-source-for-fame-and-fortune

Open Source For Fame and Fortune Slide Deck

free-summer

A game by Jack and John Polacek

Video-Gallery

A template for a video gallery app built in the Corona SDK

WhatTheHeckIsResponsiveWebDesign-impressjs

An impress.js presentation on responsive web design.

Simple-Single-Page-App

Recipe for building a single page app

simple-grid-generator

A SASS grid generator for creating responsive grids with some nice features.

css-in-js-or-css-and-js

This is a thing built with old fashioned CSS and JS and another same thing built with new fangled CSS-in-JS. These are both fine.

next-project-starter

Get your next React project up and running quickly with Next.js, Theme UI, MDX and more.

notyetnews

Satirical news site from the future. Generates its own articles every day with AI.

simple-grid

A simple, easy-to-use 12-column responsive grid with some nice features.

html5project

Template for HTML5 Websites

serverless-cms-2

Proof of concept demo for creating a custom serverless CMS for generating static websites

learning-node

Collection of tutorials I've taken to learn node.js

jquery.configurator

The jQuery plugin for injecting url parameter options into webpages and JSRender templates

mdx-deck-demo-greensock

MDX Deck + Greensock Animation Platform

team-health-checker

Help your team improve by taking a Team Health Check

background-pattern-overlay

Demo showing how to make a transparent background pattern on top of background colors.

responsive-utilities-generator

A SASS generator for creating responsive utility classes.

animate-in

React UI Component for animating elements in with Tailwind and CSS Animation (...and plays nice with shadcn)

jquery.framer

The jQuery Plugin for adding configurations to responsive design test pages

expressive-css-starter-kit

Get your project up and running quickly on a foundation of Expressive CSS.

cardtable

A responsive table component with CSS Grid, React and Tailwind CSS

chicagotechevents.com

Website for chicagotechevents.com - The best web, tech and startup events in Chicago

image-crossfade

Image Crossfade Component for Next.js Image

bucket-cms

Bucket CMS is the world’s first headless drop-in CMS, no database necessary.

code.johnpolacek.com

My open source ActionScript3 code library.

styled-starter-basic

Basic Project Setup for Styled Starter, built with React, Next.js, Styled System and Catalog to get projects going with a design theme, built-in styleguide and browser testing

jquery-databinding

Some initial thoughts on a simple way to use jQuery event handling inside objects for data binding, Observer, Pub/Sub stuff.

growth-areas-for-a-software-developer

Examples of how to improve as a software developer over 5 different areas: Understanding, Planning, Collaborating, Writing and Developing

bootstrap-project

covidcost

Tracking the cost of COVID-19 across China, Europe and the United States in human lives and economies.

atomic-css-from-json

Experimental Work-In-Progress: Generate static libraries of immutable utility classes from a JSON settings file

gatsby-starter-events-list

A Gatsby starter for creating a calendar list of events

trick-or-treat-it-forward

Print a QR Code to put on a sign in front of your house so trick or treaters can click a button to pledge a donation to the charity of your choice

johnpolacek.com

johnpolacek.com - built with Gatsby, Styled-Components and Styled-System

simple-flexgrid

A SASS flexbox-based grid generator for creating responsive grids with some nice features.

custom-rebass

A tiny example of a way to customize Rebass

johnpolacek.github.com

John Polacek on Github

create-bucket-cms

CLI Tool for initializing Bucket CMS

stacktable

Deprecated - see CardTable

team-health-checker-next

botluck

Group pot luck recipes generated by AI

expressive-css-content-display-patterns

botlywood

Hollywood movies generated by robots

next-project-starter-with-typescript

Get your next React project up and running quickly with Next.js, TypeScript, Theme UI, MDX and more.

The-Never-Ending-Quest-To-Build-Cool-Stuff

hello-next-app

Web App Project Template with Next.js, Firebase, Tailwind, Playwright and more

styled-starter-with-refunk

Basic Project Setup for Styled Starter with Refunk included for state management.

functionaizer

Create your own custom API that streams structured data from ChatGPT

nextjs-project-starters

Getting your next project up and running with these project starters for Next.js, the React Framework for Production.