diff --git a/src/Grid/Column.svelte b/src/Grid/Column.svelte new file mode 100644 index 00000000..349ba466 --- /dev/null +++ b/src/Grid/Column.svelte @@ -0,0 +1,58 @@ + + +{#if as} + +{:else} +
+ +
+{/if} diff --git a/src/Grid/Grid.Story.svelte b/src/Grid/Grid.Story.svelte new file mode 100644 index 00000000..8d8191d5 --- /dev/null +++ b/src/Grid/Grid.Story.svelte @@ -0,0 +1,229 @@ + + + + +
+
Columns with auto-width
+ + + + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + + + +
Responsive Grid
+ + + + +
+
sm: 1/4, md: 1/2, lg: 2/3
+
+ + +
+
sm: 1/4, md: 1/4, lg: 1/6
+
+ + +
+
sm: 1/4, md: 1/8, lg: 1/12
+
+ + +
+
sm: 1/4, md: 1/8, lg: 1/12
+
+ + + + +
Columns with Offset
+ + + + +
+
Small Screen Offset 3
+
+ + +
+
Small Screen Offset 2
+
+ + +
+
Small Screen Offset 1
+
+ + +
+
Small Screen Offset 0
+
+ + + + +
Condensed Grid
+ + + + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + + + +
Condensed Columns
+ + + + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + + + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + + + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + + + +
Full Width
+ + + + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + +
+
1/4
+
+ + + +
diff --git a/src/Grid/Grid.stories.js b/src/Grid/Grid.stories.js new file mode 100644 index 00000000..b8043e2a --- /dev/null +++ b/src/Grid/Grid.stories.js @@ -0,0 +1,6 @@ +import { withKnobs } from "@storybook/addon-knobs"; +import Component from "./Grid.Story.svelte"; + +export default { title: "Grid", decorators: [withKnobs] }; + +export const Default = () => ({ Component }); diff --git a/src/Grid/Grid.svelte b/src/Grid/Grid.svelte new file mode 100644 index 00000000..ac597167 --- /dev/null +++ b/src/Grid/Grid.svelte @@ -0,0 +1,25 @@ + + +{#if as} + +{:else} +
+ +
+{/if} diff --git a/src/Grid/Row.svelte b/src/Grid/Row.svelte new file mode 100644 index 00000000..cc0fdc48 --- /dev/null +++ b/src/Grid/Row.svelte @@ -0,0 +1,19 @@ + + +{#if as} + +{:else} +
+ +
+{/if} diff --git a/src/Grid/index.js b/src/Grid/index.js new file mode 100644 index 00000000..b5362604 --- /dev/null +++ b/src/Grid/index.js @@ -0,0 +1,3 @@ +export { default as Grid } from "./Grid.svelte"; +export { default as Row } from "./Row.svelte"; +export { default as Column } from "./Column.svelte"; diff --git a/src/index.js b/src/index.js index ff7e94a8..0c92f76a 100644 --- a/src/index.js +++ b/src/index.js @@ -37,6 +37,7 @@ export { Form } from "./Form"; export { FormGroup } from "./FormGroup"; export { FormItem } from "./FormItem"; export { FormLabel } from "./FormLabel"; +export { Grid, Row, Column } from "./Grid"; export { Icon, IconSkeleton } from "./Icon"; export { InlineLoading } from "./InlineLoading"; export { Link } from "./Link";