From 16fd0681d4ed93a1036e4533f10d85fe3bd13618 Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Sun, 18 Jul 2021 05:27:27 -0700 Subject: [PATCH] docs: add styling instructions --- README.md | 17 ++++++--- docs/src/components/Footer.svelte | 2 +- docs/src/pages/index.svelte | 57 ++++++++++++++++++++++++++----- 3 files changed, 62 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 72fba78e..17967c57 100644 --- a/README.md +++ b/README.md @@ -14,26 +14,33 @@ The Carbon Svelte portfolio also includes: - **[Carbon Icons Svelte](https://github.com/IBM/carbon-icons-svelte)**: 6000+ Carbon icons as Svelte components - **[Carbon Pictograms Svelte](https://github.com/IBM/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components - **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3 +- **[Carbon Preprocess Svelte](https://github.com/IBM/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon ## [Documentation](http://ibm.biz/carbon-svelte) -Deploys by Vercel +Deploys by Vercel The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples. Other forms of documentation are auto-generated: - **[TypeScript definitions](types)**: Component TypeScript definitions -- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events -- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format +- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format +- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format -## Getting started +## Installation Install `carbon-components-svelte` as a development dependency. +**Yarn** + ```sh yarn add -D carbon-components-svelte -# OR +``` + +**NPM** + +```sh npm i -D carbon-components-svelte ``` diff --git a/docs/src/components/Footer.svelte b/docs/src/components/Footer.svelte index b2b8e391..4acac22c 100644 --- a/docs/src/components/Footer.svelte +++ b/docs/src/components/Footer.svelte @@ -11,7 +11,7 @@ target="_blank" > Deploys by Vercel diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte index c2648c82..0ce0eaa3 100644 --- a/docs/src/pages/index.svelte +++ b/docs/src/pages/index.svelte @@ -30,6 +30,16 @@ g90: "Gray 90", g100: "Gray 100", }; + $: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`; + $: cssCdn = ` + + + + +`; @@ -46,15 +56,14 @@ > Svelte - component library that implements the Carbon Design System, an + component library that implements the - open source design system - - by IBM. + Carbon Design System + , an open source design system by IBM.

Design systems facilitate design and development through reuse, @@ -66,8 +75,9 @@

Installation

- Install carbon-components-svelte as a development dependency - in your project. + Install + carbon-components-svelte + as a development dependency in your project.

Using Yarn:

@@ -111,18 +121,26 @@ This library ships with six pre-compiled CSS StyleSheets built from carbon-components .

+ + +

+ +

+ +

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

@@ -130,8 +148,31 @@ This is best suited for rapid prototyping or if your set-up does not use a CSS loader.

+ + +

+ +

+ + + + +

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

- Content 3