A mock Twitter page implemented without, partially with, and then with a design system.

Overview

Design Systems Workshop

A mock Twitter page implemented without, partially with, and then with a design system.

Setup

Install npm dependencies, then start the local dev server:

npm i
npm run dev

You should now be able to access a URL like http://localhost:5173 in your browser. Visit http://localhost:5173/native/0-start to view the page.

Workshop

We'll be walking through three steps in the workshop:

  1. Tokens
  2. Components
  3. Documentation

Inline documentation contains solutions to step exercises in <details> tags. I recommend viewing the docs files on GitHub so you can try to come to the solutions on your own. 🧠

Takeaways

This workshop will teach you:

  • Atomic Design and its three most common uses: tokens, atoms, and molecules 🎨
  • How to break down a design into its atomic tokens, atoms, and molecules 🛠
  • Strategies for incrementally implementing a design system in-place 🚀
  • A plethora of VS Code shortcuts 🧑‍💻
You might also like...

NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Getting Started Launch NiseLine server. docker ru

Jan 24, 2022

NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

NiseLine NiseLine is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Getting Started Launch NiseLine server by Docker

Jul 29, 2022

LIFF Mock is a LIFF Plugin that make testing your LIFF app easy.

LIFF Mock LIFF Mock is a LIFF Plugin that make testing your LIFF app easy. ※ LIFF Plugin feature is available since LIFF SDK v2.19.0. Usage NPM $ npm

Sep 18, 2022

Twitter RSS (.xml) Feed Scraper Without Developer Authentication

Twitter RSS (.xml) Feed Scraper Without Developer Authentication

Twitter RSS Feed Scraper Without Authentication Command-line application using Node.js that scrapes XML feeds from Nitter, the free and open source al

Jun 15, 2022

This Application provides basic authentication features like you can register and create account and then login and access your profile.

  This Application provides basic authentication features like you can register and create account and then login and access your profile.

Authentication API This Application provides basic authentication features like you can register and create account and then login and access your pro

Jan 17, 2022

The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups

PatternFly Design Kit The PatternFly Design Kit is a collection of Sketch assets that make it easy for designers to create high-fidelity design mockup

Aug 2, 2022

A Library to Raise your Web Design without Coding.

AniJS A Library to Raise your Web Design without Coding. The most easy and quick way to Raise your web!!! Try It!! Check the online Demonstration. Exa

Sep 15, 2022

Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party library!

Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party library!

PI Calculator Web JS (Online) Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party

Jul 27, 2022

A simple Node.js code to get unlimited instagram public pictures by every user without api, without credentials.

A simple Node.js code to get unlimited instagram public pictures by every user without api, without credentials.

Instagram Without APIs Instagram Scraping in August 2022, no credentials required This is a Node.js library, are you looking for the same in PHP? go t

Sep 3, 2022
Owner
Josh Goldberg
Full time open open source 💖✨ prev @Codecademy @microsoft ✨ @typescript-eslint maintainer, occasional @typescript contributor, side of accessibility
Josh Goldberg
Material Design implemented in Web Components (Custom Elements v1)

Material Web Components Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/ Ge

Danny Moerkerke 107 Jul 24, 2022
Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Twitter 2.8k Sep 15, 2022
Fuck Twitter NFTs - Userscript to delete or block all occurances of NFT Users on Twitter

FuckTwitterNFTs Fuck Twitter NFTs - Userscript to delete or block all occurances of NFT Users on Twitter Userscript will by default, attempt to delete

Blumlaut 1 Jan 20, 2022
Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.

Awesome Books ES6 In this project, I build a basic website that allows users to add/remove books from a list. using ES6 syntax and make it more organi

Abdulhamid 11 Jul 1, 2022
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

RoughDraft.js v0.1.5 Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code. <section>

Nick Dreckshage 464 Jan 31, 2022
A social-media mock app for the ones who love to read - and maybe show it off

?? ?? Cachalote ?? ?? Share what you are reading and find people who also likes it - or not! What does it do? This app focuses on three main questions

Thaís França 3 May 22, 2022
The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.

Remix DnB Stack See it live: https://dnb-stack.vercel.app/ Learn more about Remix Stacks. npx create-remix --template robipop22/dnb-stack What's in th

Robert Pop 57 Sep 9, 2022
mock APIs, intelligently, with context, and perform other stuff as well

@sasta-sa/project mock APIs, intelligently, with context, and perform other stuff as well ?? Setting up Clone the project git clone https://github.com

null 5 Jan 27, 2022
Base-mock-api - Repo to storage my fake api's to use in my 2022 projects.

Base Mock API's Project made 100% with JavaScript, with the objective of creating endpoints to use in projects. Prerequisites Before you begin, ensure

Arthur Cabral 1 Jan 19, 2022
Linely is inspired by LocalStack. Goal of this tool is to create a mock service for LINE.

Linely Linely is inspired by LocalStack. Goal of this tool is to create a mock service for LINE. Setup Docker docker run -d -p 3000:3000 dyoshikawa/li

null 4 Jan 24, 2022