mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
docs: add styling instructions
This commit is contained in:
Eric Y Liu
parent
93562c1241
commit
16fd0681d4
3 changed files with 62 additions and 14 deletions
17
README.md
17
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 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 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 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)
|
## [Documentation](http://ibm.biz/carbon-svelte)
|
||||||
|
|
||||||
<a href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank"><img height="34px" src="./docs/public/powered-by-vercel.svg" alt="Deploys by Vercel" /></a>
|
<a href="https://www.vercel.com?utm_source=carbon-components-svelte&utm_campaign=oss" target="_blank"><img height="40px" src="./docs/public/powered-by-vercel.svg" alt="Deploys by Vercel" /></a>
|
||||||
|
|
||||||
The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples.
|
The [documentation website](http://ibm.biz/carbon-svelte) contains live demos and examples.
|
||||||
|
|
||||||
Other forms of documentation are auto-generated:
|
Other forms of documentation are auto-generated:
|
||||||
|
|
||||||
- **[TypeScript definitions](types)**: Component TypeScript definitions
|
- **[TypeScript definitions](types)**: Component TypeScript definitions
|
||||||
- **[Component Index](COMPONENT_INDEX.md)**: Markdown file documenting component props, slots, and events
|
- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
|
||||||
- **[Component API](docs/src/COMPONENT_API.json)**: Component API metadata in JSON format
|
- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
|
||||||
|
|
||||||
## Getting started
|
## Installation
|
||||||
|
|
||||||
Install `carbon-components-svelte` as a development dependency.
|
Install `carbon-components-svelte` as a development dependency.
|
||||||
|
|
||||||
|
**Yarn**
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add -D carbon-components-svelte
|
yarn add -D carbon-components-svelte
|
||||||
# OR
|
```
|
||||||
|
|
||||||
|
**NPM**
|
||||||
|
|
||||||
|
```sh
|
||||||
npm i -D carbon-components-svelte
|
npm i -D carbon-components-svelte
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
height="36px"
|
height="40px"
|
||||||
src="/powered-by-vercel.svg"
|
src="/powered-by-vercel.svg"
|
||||||
alt="Deploys by Vercel"
|
alt="Deploys by Vercel"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,16 @@
|
||||||
g90: "Gray 90",
|
g90: "Gray 90",
|
||||||
g100: "Gray 100",
|
g100: "Gray 100",
|
||||||
};
|
};
|
||||||
|
$: cssImport = `import "carbon-components-svelte/css/${$theme}.css";`;
|
||||||
|
$: cssCdn = `<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://unpkg.com/carbon-components-svelte/css/${$theme}.css"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
</html>`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Content>
|
<Content>
|
||||||
|
|
@ -46,15 +56,14 @@
|
||||||
>
|
>
|
||||||
Svelte
|
Svelte
|
||||||
</Link>
|
</Link>
|
||||||
component library that implements the Carbon Design System, an
|
component library that implements the
|
||||||
<Link
|
<Link
|
||||||
inline
|
inline
|
||||||
class="big-link"
|
class="big-link"
|
||||||
href="https://www.carbondesignsystem.com/"
|
href="https://www.carbondesignsystem.com/"
|
||||||
>
|
>
|
||||||
open source design system
|
Carbon Design System
|
||||||
</Link>
|
</Link>, an open source design system by IBM.
|
||||||
by IBM.
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Design systems facilitate design and development through reuse,
|
Design systems facilitate design and development through reuse,
|
||||||
|
|
@ -66,8 +75,9 @@
|
||||||
<Column>
|
<Column>
|
||||||
<h3>Installation</h3>
|
<h3>Installation</h3>
|
||||||
<p>
|
<p>
|
||||||
Install <code>carbon-components-svelte</code> as a development dependency
|
Install
|
||||||
in your project.
|
<code>carbon-components-svelte</code>
|
||||||
|
as a development dependency in your project.
|
||||||
</p>
|
</p>
|
||||||
<h4>Using Yarn:</h4>
|
<h4>Using Yarn:</h4>
|
||||||
<Row noGutter>
|
<Row noGutter>
|
||||||
|
|
@ -111,18 +121,26 @@
|
||||||
This library ships with six pre-compiled CSS StyleSheets built
|
This library ships with six pre-compiled CSS StyleSheets built
|
||||||
from
|
from
|
||||||
<OutboundLink
|
<OutboundLink
|
||||||
|
inline
|
||||||
size="lg"
|
size="lg"
|
||||||
href="https://github.com/carbon-design-system/carbon/tree/main/packages/components"
|
href="https://github.com/carbon-design-system/carbon/tree/main/packages/components"
|
||||||
>
|
>
|
||||||
carbon-components
|
carbon-components
|
||||||
</OutboundLink>.
|
</OutboundLink>.
|
||||||
</p>
|
</p>
|
||||||
|
<Row padding noGutter>
|
||||||
|
<Column>
|
||||||
|
<p>
|
||||||
|
<CodeSnippet type="single" code="{cssImport}" />
|
||||||
|
</p>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
<TabContent>
|
<TabContent>
|
||||||
<p>
|
<p>
|
||||||
An alternative to loading styles is to link an external
|
An alternative to loading styles is to link an external
|
||||||
StyleSheet from a Content Delivery Networks (CDN) like
|
StyleSheet from a Content Delivery Networks (CDN) like
|
||||||
<OutboundLink size="lg" href="https://unpkg.com/">
|
<OutboundLink inline size="lg" href="https://unpkg.com/">
|
||||||
unpkg.com
|
unpkg.com
|
||||||
</OutboundLink>.
|
</OutboundLink>.
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -130,8 +148,31 @@
|
||||||
This is best suited for rapid prototyping or if your set-up does
|
This is best suited for rapid prototyping or if your set-up does
|
||||||
not use a CSS loader.
|
not use a CSS loader.
|
||||||
</p>
|
</p>
|
||||||
|
<Row padding noGutter>
|
||||||
|
<Column>
|
||||||
|
<p>
|
||||||
|
<CodeSnippet type="multi" code="{cssCdn}" />
|
||||||
|
</p>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</TabContent>
|
||||||
|
<TabContent>
|
||||||
|
<p>
|
||||||
|
The most performant method to load styles is to import SCSS
|
||||||
|
directly from <code>carbon-components</code>. 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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Refer to the <OutboundLink
|
||||||
|
inline
|
||||||
|
size="lg"
|
||||||
|
href="https://github.com/carbon-design-system/carbon/blob/main/docs/guides/sass.md"
|
||||||
|
>official Carbon guide on SASS</OutboundLink
|
||||||
|
> for documentation.
|
||||||
|
</p>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
<TabContent>Content 3</TabContent>
|
|
||||||
</div>
|
</div>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Column>
|
</Column>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue