Svelte & TailwindCSS
今年になってSvelteとTailwindCSSをやってみたいと思いDocを読むだけではと思いFlowbite-Svelteを作ってみました。
今のところ以下のUI Componentが揃っています。(2022年4月6日更新）
- Accordions
- Alerts
- Avatar
- Badges
- Button Groups
- Buttons
- Cards
- Dark mode
- Dropdowns
- Forms
- Footer
- Icons
- List group
- Modals
- Navbar
- Pagination
- Progress bar
- Sidebar
- Spinners
- Tabs
- Timeline
- Toast
- Tooltip
Flowbite-SvelteはFlowbiteというTailwindCSS component libraryのCSSを使っています。
当初はFlowbiteのJavaScriptを使っていたのですがそれではあまりSvelteを使っている意味がないのでInteractivityは全てSvelteで行うことにしました。
またこのサイトを作るのに必要な他のAppも作ったのでここに紹介しておきます。
Flowbite-Svelte
Flowbite-Svelte GitHub Repo
Installationはここをみてください。
Images
このサイトで使っているImageはText to photoで作りました。このAppは去年作ったのですがSvelte-flow用にアップデートしました。TextをImageの上に貼れダウンロードできます。
accordions.jpg
Heroicons
アイコンが必要だったのでSvelte-Herosも作りました。
Simpleicons
Social Media用のアイコンが必要だったのでsvelte-simplesも作りました。
Svelte SVG Icon Creator (SSIC)
SSICは上記のアイコンを作るために作りました。アイコンは何千もあるので手作業では無理なので。
Simple-iconsは色々他のcomponentを試したのですがどれも動かなくじゃ作ってしまおうと。
Image optimization
Imageをオプティマイズするためにconsizeをつくました。PNGからWebPに変えてResizeしました。
その結果Lighthouseでほぼ100％の結果が出ました。
Svelte-Sidebar-Menu
トップメニューでは入りきれなくなったのでsvelte-sidebarを使っています。これはSvelte-flowの前に作ったのですが実際使えて満足です。
まだまだこれからもっとコンポーネントを増やしていく予定です。できればGitHubへのContribution願います。
また使ってみて何か改良するようなところがあればぜひ連絡ください。