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 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)
|
||||
|
||||
<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.
|
||||
|
||||
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
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
target="_blank"
|
||||
>
|
||||
<img
|
||||
height="36px"
|
||||
height="40px"
|
||||
src="/powered-by-vercel.svg"
|
||||
alt="Deploys by Vercel"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,16 @@
|
|||
g90: "Gray 90",
|
||||
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>
|
||||
|
||||
<Content>
|
||||
|
|
@ -46,15 +56,14 @@
|
|||
>
|
||||
Svelte
|
||||
</Link>
|
||||
component library that implements the Carbon Design System, an
|
||||
component library that implements the
|
||||
<Link
|
||||
inline
|
||||
class="big-link"
|
||||
href="https://www.carbondesignsystem.com/"
|
||||
>
|
||||
open source design system
|
||||
</Link>
|
||||
by IBM.
|
||||
Carbon Design System
|
||||
</Link>, an open source design system by IBM.
|
||||
</p>
|
||||
<p>
|
||||
Design systems facilitate design and development through reuse,
|
||||
|
|
@ -66,8 +75,9 @@
|
|||
<Column>
|
||||
<h3>Installation</h3>
|
||||
<p>
|
||||
Install <code>carbon-components-svelte</code> as a development dependency
|
||||
in your project.
|
||||
Install
|
||||
<code>carbon-components-svelte</code>
|
||||
as a development dependency in your project.
|
||||
</p>
|
||||
<h4>Using Yarn:</h4>
|
||||
<Row noGutter>
|
||||
|
|
@ -111,18 +121,26 @@
|
|||
This library ships with six pre-compiled CSS StyleSheets built
|
||||
from
|
||||
<OutboundLink
|
||||
inline
|
||||
size="lg"
|
||||
href="https://github.com/carbon-design-system/carbon/tree/main/packages/components"
|
||||
>
|
||||
carbon-components
|
||||
</OutboundLink>.
|
||||
</p>
|
||||
<Row padding noGutter>
|
||||
<Column>
|
||||
<p>
|
||||
<CodeSnippet type="single" code="{cssImport}" />
|
||||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<p>
|
||||
An alternative to loading styles is to link an external
|
||||
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
|
||||
</OutboundLink>.
|
||||
</p>
|
||||
|
|
@ -130,8 +148,31 @@
|
|||
This is best suited for rapid prototyping or if your set-up does
|
||||
not use a CSS loader.
|
||||
</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>Content 3</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</Column>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue