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...

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 /

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

Oct 7, 2022

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

Jan 4, 2023

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

Jan 7, 2023

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

Dec 30, 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.

Dec 30, 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

Dec 8, 2022

🪸 Coral Design System by DiveTool

🪸 Coral Design System by DiveTool

Coral Design System Corals 🪸 are a reef's basic components, so they are for DiveTool. Projects Name Package Version Coral @divetool/coral Coral React

Dec 26, 2022

iX is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.

Siemens Industrial Experience (iX) monorepo iX is an open source design system for designers and developers, to consistently create the perfect digita

Dec 26, 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 14 Jan 3, 2023
The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Viver Bungag 4 Jan 2, 2023
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 34 Dec 12, 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

社长长 12 Dec 30, 2022
Snippets4Dummies is an easy to use Visual Code Extension which is used for building beautiful layouts as fast as your crush rejects you!

Why Snippets4Dummies? Snippets4Dummies is an easy to use Visual Code Extension which is used for building beautiful layouts as fast as your crush reje

SCHWITZ 6 Oct 11, 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 44 Jan 2, 2023
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 33 Oct 22, 2022