To contribute a site:
- Create a new yaml file in the
src/site/_data/examplesfolder with a unique and descriptive name. Populate that file according to the structure shown below. - Add a thumbnail image to the
src/site/img/examplesfolder. (Image should be a jpeg 596px wide and 396px tall) - Submit a pull request
example site yaml reference:
title: Your site title
description: A short description of the site.
link: The URL of this site
thumbnailurl: /img/examples/this-site-thumbnail.jpg
tools:
- List
- of
- notable
- tools
- usedThis site uses TailwindCSS to offer utility CSS classes and provide a rapid means to styling the site. This means that most styling can be done without writing any additional CSS. Instead, utility classes can be added directly to the HTML. This can provide some very rapid development and also offer surprising levels of familiarity for these used to working in this way (since the conventions and classes are not per site.)
While running/developing locally, the npm run start command will generate the site including the CSS pipeline from Tailwind.
A small number of bespoke CSS rules are provided for efficiency of repeated or global classes. These reside in src/css/tailwind.css but these should be used sparingly, with most styling taking place in the HTML via Tailwind's utility classes.
During a production build, the CSS pipeline includes a step to remove all unused CSS statements and compress the resultant CSS. For development efficiency, this step is not performed during local development via the npm run start command. You can preview an optimised production build by running these commands:
# Run a production build
npm run build
# Serve the build locally
npm run start