VS Code extension for building with the Ubie Design System.

Overview

Ubie Design Tokens for VS Code

Installation

👉 Install via the Visual Studio Code Marketplace

Features

Autocomplete

Autocomplete suggestions for the Ubie Design Tokens

Demo of autocomplete

Hover preview

See the exact value of the Ubie Design Tokens's CSS custom property by hovering over it.

Demo of hover preview

How to use

  1. Install and enable the extension.
  2. Open a CSS or Sass file.
  3. Start typing the CSS property you want to set. (e.g. color: )
  4. Type the trigger character --.
  5. The autocomplete tokens suggestions associated with the typed CSS property will be shown.
  6. Select the token and it will be inserted along with the var() function.
You might also like...

A utility-first universal design system - powered by Tailwind CSS

tailwindcss-react-native tailwindcss-react-native uses Tailwind CSS as universal design system for all React Native platforms. It lets you share code

Sep 15, 2022

The CSS design system that powers GitHub

The CSS design system that powers GitHub

Primer CSS The CSS implementation of GitHub's Primer Design System Documentation Our documentation site lives at primer.style/css. You'll be able to f

Sep 19, 2022

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

Sep 18, 2022

Raaghu is a micro frontend design system for modern web apps

Raaghu is a micro frontend design system for modern web apps

Raaghu is a micro frontend design system for modern web apps, which is an open source, Bootstrap 5.x enabled collection of reusable elements and components guided by clear standards, capable of giving the designers the necessary tools to develop beautiful, responsive and engaging product experiences. Single source of truth for truly scalable and consistent UI language for your application.

Sep 20, 2022

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

Design Systems Workshop A mock Twitter page implemented without, partially with, and then with a design system. Setup Install npm dependencies, then s

Sep 22, 2022

JSNation 2022 - Building a Solar System using Hand Recognition and Three.js

JSNation 2022 - Building a Solar System using Hand Recognition and Three.js

Building a Solar System using Hand Recognition and Three.js 🚀 Accompanying code for JSNation 2022 talk. Demo video here: https://www.youtube.com/watc

Jul 14, 2022

A VS Code extension for web-code.

uweb: web-code extension Makes the navigation in web-code easier, adding a few commands. If your workflow is to open a VS Code instance for each indiv

Jun 8, 2022

VS Code extension that adds a red error squiggle to every word in your code.

VS Code extension that adds a red error squiggle to every word in your code.

Dumbisense Dumbisense is a VS Code extension that adds a red error squiggle to every word in your code, with an interesting error message and dino ima

Sep 3, 2022

Denail of service system for the Dentistimo system. Used to improve the tolerance and testing fail safe functionality.

 Denail of service system for the Dentistimo system. Used to improve the tolerance and testing fail safe functionality.

Distributed Systems - Dos Testing DoS (Denail of Service) System for Testing and Practical demonstration of systems capability to handle a basic DDoS

Jul 12, 2022
Comments
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 6 Pull Requests:

    Pin dependencies
    Update dependency @​ubie/design-tokens to v0.1.2
    • Schedule: ["at any time"]
    • Branch name: renovate/ubie-design-tokens-0.x
    • Merge into: main
    • Upgrade @ubie/design-tokens to 0.1.2
    Update dependency esbuild to v0.15.6
    • Schedule: ["at any time"]
    • Branch name: renovate/esbuild-0.x
    • Merge into: main
    • Upgrade esbuild to 0.15.6
    Update dependency eslint to v8.23.0
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-8.x
    • Merge into: main
    • Upgrade eslint to 8.23.0
    Update dependency vsce to v2.11.0
    • Schedule: ["at any time"]
    • Branch name: renovate/vsce-2.x
    • Merge into: main
    • Upgrade vsce to 2.11.0
    Update typescript-eslint monorepo to v5.36.1

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
Owner
Ubie, Inc.
Ubie, Inc.
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
official Alibaba Design system vue components snippets for visual studio code

Alibaba DLS Snippets for vscode Installation You can either install this extension by searching for Alibaba DLS Snippets in your vscode extensions sto

Alibaba Travels Co Open Source 2 Sep 25, 2021
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 30 Sep 20, 2022
🎨 VS Code extension for antd v5 design token. Install it now!👇

antd design token VSCode extension for antd v5 design token. Features Provide the hover hint and editor decorations of antd v5 design token, include c

社长长 8 Aug 5, 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

PatternFly 40 Aug 2, 2022
Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test and also deploy.

GraphQL Blog graphqlblog.com Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test an

GraphQLApps 6 Aug 17, 2022
Team project within the course of Software System Design and Analysis.

?? InnoBookCrossing - Application for sharing books at Innopolis gh-md-toc ?? General Information Description The application is designed to help peop

Dariya 34 Sep 17, 2022
Web UI kit following simply superb.'s design system, based on Tailwind CSS.

ui-kit TailwindCSS powered UI kit following simply superb.'s design system. ➡️ Demo available here Why I am building few applications (iOS / Android /

simply superb. 8 Mar 4, 2022
The open-source design system of Tree.ly

?? Boemly Boemly is the open source component library maintained by Tree.ly based on ChakraUI. ??‍♀️ Getting started Install Boemly: npm i boemly --sa

Tree.ly 31 Sep 14, 2022