https://github.com/5t3ph/11ty-design-system-example
https://github.com/5t3ph/11ty-design-system-example
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/5t3ph/11ty-design-system-example
- Owner: 5t3ph
- Created: 2022-03-04T15:28:51.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-03T15:02:52.000Z (about 4 years ago)
- Last Synced: 2025-03-28T04:35:40.184Z (over 1 year ago)
- Language: SCSS
- Size: 199 KB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# 11ty Design System Example
In-progress, being built on Twitch! Join us Fridays at 9 AM Central, [subscribe to 5t3phDev](https://twitch.tv/5t3phDev) for go-live notifications.
Created by [@5t3ph](https://twitter.com/5t3ph)
## Development Scripts
**`npm start`**
> Run 11ty with hot reload at localhost:8080, including reload based on Sass changes
**`npm run build`**
> Production build includes minified, autoprefixed CSS
Use this as the "Publish command" if needed by hosting such as Netlify.
## Resources to extend this and learn 11ty
**Ensure accessible colors** by adding my [a11y-color-tokens package](https://www.npmjs.com/package/a11y-color-tokens)
**Learn to build an 11ty site in 20 mins** with my [egghead video course](https://5t3ph.dev/learn-11ty) and see how to add a blog and custom data.
**Add auto-generated social media images** with [my plugin](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-social-images)
**Explore advanced setup of custom data** through my [tutorial on building a community site](https://css-tricks.com/a-community-driven-site-with-eleventy-building-the-site/)
**For a more full-featured starter** check out my [11ty Netlify Jumpstart](https://11ty-netlify-jumpstart.netlify.app/) (also works for hosts other than Netlify).