Preview the artboard here: CollectionView.html.
Download the source Sketch design here: book-collection.sketch.
This directory was generated by Protoship Codegen. It contains the generated HTML & CSS for your Sketch designs.
The generated code is meant to be modified by programmers to build large real-world web applications. We use the Tailwind CSS library to maintain code quality. Tailwind makes the design-scales (spacings, colors, typography etc.) an explicit part of the code. This ensures that the site maintains visual consistency and helps keep the code clean.
Take a look at tailwind.css to see the entry-point to the CSS code. You can add any custom CSS you want here.
The scales generated for your designs are in tailwind.config.js. Most changes you might need in the CSS can be made by modifying this file.
Learn more about Tailwind from the official Tailwind documentation.
npm install
npm run build
Run npm run build every time the CSS configuration is changed so that the final bundle.css can be updated.
To learn how you can integrate Tailwind to your project's build pipeline, see Using Tailwind in your CSS.
Codegen tries to generate clean HTML & CSS that you can fully understand, change, and own as your own code. If you have any thoughts on how we can make this easier and improve the quality further we'd love to hear from you. Do write to us at [email protected].