https://github.com/protoship/codegen-sample-book-collection
Sample code generated by Codegen for Book Collection design
https://github.com/protoship/codegen-sample-book-collection
Last synced: 2 months ago
JSON representation
Sample code generated by Codegen for Book Collection design
- Host: GitHub
- URL: https://github.com/protoship/codegen-sample-book-collection
- Owner: protoship
- Created: 2019-03-11T10:03:02.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-11T10:27:24.000Z (over 7 years ago)
- Last Synced: 2025-01-12T11:29:49.280Z (over 1 year ago)
- Language: CSS
- Size: 6.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introduction
Preview the artboard here: [CollectionView.html](https://protoship.github.io/codegen-sample-book-collection/artboards/CollectionView.html).
Download the source Sketch design here: [book-collection.sketch](https://github.com/protoship/codegen-sample-book-collection/raw/master/book-collection.sketch).
# Codegen
This directory was generated by [Protoship Codegen](https://protoship.io/). 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.
## Exploring the code
Take a look at [tailwind.css](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](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](https://tailwindcss.com/docs/what-is-tailwind).
## Development
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](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css).
## A note on code quality
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 [hello@protoship.io](mailto:hello@protoship.io).