mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 03:49:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: add styling instructions

Browse source
This commit is contained in:
Eric Y Liu 2021-07-18 05:27:27 -07:00
commit 16fd0681d4
3 changed files with 62 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

57
docs/src/pages/index.svelte
View file

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