taka1156のブログサイトです(https://blog.taka1156.site)
Storybookはこちら(https://taka1156.github.io/nuxt-blog/)
- Nuxt.js
- marked.js
- highlight.js
- Storybook
- normalize.css
- github-markdown-css
素材
アトミックデザインを試しに導入してみました。(以下一覧)
Atoms
- BaseBtn
- BaseImg
- BaseText
- BaseLink
- BaseNavIcon
- BaseHeading
Molecules
- ArticleBadge
- ArticleDate
- ArticlePagination
- IndexNav
- IndexList
- IndexListItem
- NavBar
- NavBarPc
- NavListItem
- NavListItemPc
- NavList
- NavListPc
- SnsIcon
Organisms
- ArticleCategory ※1
- ArticleTag ※1
- ArticleHeader
- ArticleListItem ※2
- ArticleList
- ClassificationListItem ※2
- ClassificationList
- ClassificationTitle
- ContributionBox
- IndexNavigation
- SnsIcons
- TheNavigation
- TheCopyright
※1
ArticleCategory 、ArticleTagは汎用性が高いのですが
MoleculesのArticleBadgeを使っていること、ルーティング処理を内包していることより、Organismsにしています。
※2
~ListItem は汎用性が低い(=List系と強く結びついてる)ため
Atoms要素しかないClassificationListもOrganismsに設定しています。