Coder Social home page Coder Social logo

dominikg / carbon-components-svelte Goto Github PK

View Code? Open in Web Editor NEW

This project forked from carbon-design-system/carbon-components-svelte

0.0 1.0 0.0 20.73 MB

Svelte implementation of the Carbon Design System

Home Page: https://carbon-components-svelte.onrender.com

License: Apache License 2.0

JavaScript 6.12% Svelte 90.91% SCSS 2.97%

carbon-components-svelte's Introduction

carbon-components-svelte

NPM GitHub npm downloads to date

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.

Design systems facilitate design and development through reuse, consistency, and extensibility.

The Carbon Svelte portfolio also includes:

Documentation

The documentation site is deployed to Render as a Static Site. See render.yaml for details.

Deploy to Render

Other forms of documentation are auto-generated:

Installation

Install carbon-components-svelte as a development dependency.

Yarn

yarn add -D carbon-components-svelte

NPM

npm i -D carbon-components-svelte

pnpm

pnpm i -D carbon-components-svelte

Usage

Styling

Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).

  • white.css: Default Carbon theme (light)
  • g10.css: Gray 10 theme (light)
  • g80.css: Gray 80 theme (dark)
  • g90.css: Gray 90 theme (dark)
  • g100.css: Gray 100 theme (dark)
  • all.css: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables

Each StyleSheet is generated from the flagship carbon-components library.

The compiled CSS is generated from the following .scss files:

CSS StyleSheet

// White theme
import "carbon-components-svelte/css/white.css";

// Gray 10 theme
import "carbon-components-svelte/css/g10.css";

// Gray 80 theme
import "carbon-components-svelte/css/g80.css";

// Gray 90 theme
import "carbon-components-svelte/css/g90.css";

// Gray 100 theme
import "carbon-components-svelte/css/g100.css";

// All themes
import "carbon-components-svelte/css/all.css";

CDN

An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like unpkg.com.

This is best suited for rapid prototyping.

HTML
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/carbon-components-svelte/css/white.css"
    />
  </head>
</html>
svelte:head
<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/carbon-components-svelte/css/white.css"
  />
</svelte:head>

SCSS

The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.

Refer to the official Carbon guide on SASS for documentation.

Dynamic theming

Use the "all.css" StyleSheet for dynamic, client-side theming.

import "carbon-components-svelte/css/all.css";

Update the theme by setting the theme attribute on the html element. The default theme is "white".

<!DOCTYPE html>
<html lang="en" theme="g10">
  <body>
    ...
  </body>
</html>

Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.

<script>
  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
</script>

Importing components

Import components from carbon-components-svelte in the script tag of your Svelte file. Visit the documentation site for examples.

<!-- App.svelte -->
<script>
  import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>

<Accordion>
  <AccordionItem title="Section 1" open> Content 1 </AccordionItem>
  <AccordionItem title="Section 2"> Content 2 </AccordionItem>
  <AccordionItem title="Section 3"> Content 3 </AccordionItem>
</Accordion>

Refer to COMPONENT_INDEX.md for component API documentation.

Preprocessors

carbon-preprocess-svelte is a collection of Svelte preprocessors for Carbon.

Yarn

yarn add -D carbon-preprocess-svelte

NPM

npm i -D carbon-preprocess-svelte

pnpm

pnpm i -D carbon-preprocess-svelte

optimizeImports

optimizeImports is a script preprocessor that rewrites base imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can greatly speed up compile times during development while preserving typeahead and autocompletion hinting offered by integrated development environments (IDE) like VSCode.

The preprocessor optimizes imports from the following packages:

Example

- import { Button } from "carbon-components-svelte";
- import { Add16 } from "carbon-icons-svelte";
- import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";

Usage

// svelte.config.js
import { optimizeImports } from "carbon-preprocess-svelte";

export default {
  preprocess: [optimizeImports()],
};

Examples

TypeScript support

TypeScript definitions are generated by sveld.

Contributing

Refer to the Contributing guidelines.

Changelog

License

Apache 2.0

carbon-components-svelte's People

Contributors

adanug avatar albertms10 avatar asakuramizu avatar brunnerh avatar cupcakearmy avatar danielboven avatar dependabot-preview[bot] avatar dependabot[bot] avatar ebeuker avatar ericol avatar gregorw avatar heydan83 avatar ibilux avatar imgbotapp avatar ispyinternet avatar josefaidt avatar koichikiyokawa avatar mabentley85 avatar malinowskip avatar metonym avatar mfeitoza avatar miedzikd avatar orta avatar overbryd avatar patoi avatar pbxothi avatar phil-mayer avatar rafadess avatar reedshea avatar weaseldotro avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.