Elements of the design system explained.
Eleventy 3.0.0
- package.json (scripts + devDependencies)
- Git workflow
- eleventy.config.mjs
- LiquidJS
- JSON datas
- semantic HTML5 (header, main, footer, nav, aside, section)
- navigation with collections and "aria-current=page"
- pagination of collections or 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 (foreground, border, background, utility, dark-mode)
- typography (font-family, font-size, font-weight, line-height)
- spacing (margin, padding, gap)
- sizing (width, height)
- stroke (border radii, stroke width)
- effects (shadow, blur, gradient)
Components
- navigation (with aria-current=page)
- primary (dropdown, flat, fixe, responsive)
- secondary (aside)
- footer
- paginate
- cards
- buttons
Elements
- classes
- CSS normalize
- wireframe
- themes
- icons