The source for the online home of the new London CSS!
git clone git@github.com:LondonCSS/website.git
cd website
yarn
yarn start- Sass pipeline: see details
- Houdini-powered social images: see details
- Dynamic site map
- Headers checked with Security Headers
- Powered by Eleventy…
- Hosted on Netlify
-
Source Sass files are under
src/scss -
Compilation is via templates at
src/assets/cssUsing templates means that Eleventy's own watchers trigger compilation and ensure that changes to Sass files are kept in sync with Browsersync's refresh schedule.
-
CSS is transpiled to the same path under
distas the templates exist undersrc:// input src/assets/css/{filename}.11ty.js // output dist/assets/css/{filename}.css
Each event has an associated Houdini-powered background image sourced from sites like @una's iconic extra.css and @malchata's awesome paintlets.
In order to generate social media images
- A special version of the
/eventspage -src/events/puppeteer.njk- loads custom CSS, paintlet modules and fonts - Puppeteer snapshots the event nodes
- The images are stored in
dist/static/events
- Rollup-based JS pipeline
- Full PWA status