Homepage
Elements of the design system explained.
Eleventy
- package.json (scripts + devDependencies)
- Git workflow
- eleventy.config.js (addWatchTarget "./_css")
- LiquidJS template engine
- JSON datas
- semantic HTML5 (header, main, footer, nav, aside, section)
- navigation with collections and "aria-current=page"
- pagination of collections and JSON datas
- stylesheet files included in style.liquid with permalink /css/style.css
- DecapCMS content management
- GitHub Pages configuration file
CSS Framework
Layout
- responsive (flex & grid)
- centered content
Tokens (variables)
- colors
- typography
- spacing
- dark mode
Components
- navigation (with aria-current=page)
- primary (dropdown, flat, fixe, responsive)
- secondary (aside)
- footer
- paginate
- cards
- buttons
Elements
- classes
- CSS normalize
- wireframe
- themes