├── .gitignore ├── .prettierrc ├── README.md ├── __sapper__ ├── build │ ├── build.json │ ├── client │ │ ├── 1dde4b077584459886d3 │ │ │ ├── index.0.js │ │ │ ├── main.js │ │ │ └── vendors~index.2.js │ │ └── shimport@1.0.1.js │ └── template.html └── dev │ ├── build.json │ ├── server │ └── server.js │ └── service-worker.js ├── cypress.json ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── global.css └── index.html ├── scripts └── setupTypeScript.js ├── src ├── App.svelte ├── client.js ├── components │ ├── CopyButtons.svelte │ ├── CustomCollapsible.svelte │ ├── DocTemplate.svelte │ ├── Header.svelte │ ├── Template.svelte │ ├── Templates.svelte │ ├── TemplatesNew.svelte │ ├── Tooltip.svelte │ ├── sections │ │ ├── DataCode.svelte │ │ ├── Decoration.svelte │ │ ├── PageStructure.svelte │ │ ├── PaginationUtil.svelte │ │ └── UI.svelte │ └── templates-code.js ├── examples │ ├── AutocompleteExample.svelte │ ├── BriefMessageExample.svelte │ ├── CheckboxExample.svelte │ ├── CodeExample.svelte │ ├── CollapsibleSectionExample.svelte │ ├── ConfettiExample.svelte │ ├── DataDownloadExample.svelte │ ├── IconExample.svelte │ ├── NumberExample.svelte │ ├── PaginationExample.svelte │ ├── ProgressDotExample.svelte │ ├── RadioExample.svelte │ ├── ScatterplotExample.svelte │ ├── SetExample.svelte │ ├── SwitchExample.svelte │ └── TableExample.svelte ├── main.js ├── node_modules │ └── @sapper │ │ ├── app.mjs │ │ ├── internal │ │ ├── App.svelte │ │ ├── error.svelte │ │ ├── layout.svelte │ │ ├── manifest-client.mjs │ │ ├── manifest-server.mjs │ │ └── shared.mjs │ │ ├── server.mjs │ │ └── service-worker.js ├── routes │ ├── _error.svelte │ ├── _layout.svelte │ └── index.svelte ├── server.js ├── service-worker.js ├── template.html └── utils │ └── highlight-svelte.js ├── static ├── favicon.ico ├── favicon.png ├── fonts.css ├── fonts │ ├── national │ │ ├── National2NarrowWeb-Black.woff │ │ ├── National2NarrowWeb-Black.woff2 │ │ ├── National2NarrowWeb-Bold.woff │ │ ├── National2NarrowWeb-Bold.woff2 │ │ ├── National2NarrowWeb-Extralight.woff │ │ ├── National2NarrowWeb-Extralight.woff2 │ │ ├── National2NarrowWeb-Regular.woff │ │ ├── National2NarrowWeb-Regular.woff2 │ │ ├── National2Web-Bold.woff │ │ ├── National2Web-Bold.woff2 │ │ ├── National2Web-Regular.woff │ │ └── National2Web-Regular.woff2 │ └── tiempos │ │ ├── TiemposHeadlineWeb-Regular.woff │ │ ├── TiemposHeadlineWeb-Regular.woff2 │ │ ├── TiemposTextWeb-Bold.woff │ │ ├── TiemposTextWeb-Bold.woff2 │ │ ├── TiemposTextWeb-Regular.woff │ │ └── TiemposTextWeb-Regular.woff2 ├── global.css ├── logo-192.png ├── logo-512.png ├── manifest.json └── wordmark.svg ├── templates ├── Autocomplete.svelte ├── BriefMessage.svelte ├── ButtonSet.svelte ├── Checkbox.svelte ├── CodeBlock.svelte ├── CollapsibleSection.svelte ├── Confetti.svelte ├── DataDownload.svelte ├── Icon.svelte ├── IconLocal.svelte ├── InView.svelte ├── Number.svelte ├── Pagination.svelte ├── ProgressDots.svelte ├── Radio.svelte ├── Scatterplot.svelte ├── Switch.svelte ├── Table.svelte ├── Toggle.svelte ├── icon-paths.js ├── move.js └── tweened-staggered.js ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | /__sapper__/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "svelteSortOrder": "scripts-markup-styles" 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Svelte Templates 2 | 3 | This is a collection of svelte components for you to use and modify for your projects. 4 | 5 | [See the components](https://pudding-svelte-templates.netlify.app/) 6 | 7 | All of the templates live in the `/templates` folder. 8 | 9 | ## Template guidelines 10 | 11 | By default, create an unstyled / MVP styled version. For an opinionated styling, put all CSS below the `/* gravy */` comment in your style tag. 12 | 13 | Make sure any UI elements either [two-way bind](https://svelte.dev/docs#bind_component_property) or [dispatch an event](https://svelte.dev/docs#createEventDispatcher) so the component can expose values. 14 | 15 | ## Adding a template 16 | 17 | As you create new basic components for svelte projects, add them to the `/templates` folder! 18 | 19 | Then, you can add documentation about your fancy new component to the site! 20 | 21 | Inside `src/components/sections` you'll find an individual svelte file for each top-level section on our site. Currently, they are: 22 | * UI Elements 23 | * Pagination 24 | * Page Structure 25 | * Data & Code 26 | * Decoration 27 | 28 | If your new component fits well under one of those categories, jump ahead to [Adding Documentation for a New Template](#newTemplate). Otherwise, start at [Adding Documentation for a New Section](#newSection). 29 | 30 | ## Adding Documentation for a New Section 31 | 32 | Each section should have its own file in `src/components/sections` so go ahead and add one. In it, you'll want to import the component `DocTemplate`. 33 | 34 | ```svelte 35 | import DocTemplate from './../DocTemplate.svelte' 36 | ``` 37 | 38 | Then, add a new `h2` element with the title for your section. 39 | 40 | ``` 41 |