DIYBootstrap/G93 Required
Artifact is a GitHub repository (if you’re looking for a name, why not “shoelace” ;) All CSS files are in a css/ directory. Main page is called demo.html and includes an example of each component. No external CSS libraries/modules are used. Everything is written from scratch. The artifact produced is properly licensed, preferably with the MIT license. Stage 1: Reverse Engineer Bootstrap Components
Styles include replicas of Bootstrap’s typography: Headings Body copy Addresses Blockquotes Styles include replicas of Bootstrap’s buttons Components include replicas of Bootstrap’s: Button Groups: Toolbar Breadcrumbs Pagination Labels Badges Jumbotron Page Header Thumbnails Alerts List Group Panels Wells Each component is featured on the demo HTML page demo.html under its own header along with the code used to generate it (for a simple example of what this could look like, see https://purecss.io/buttons/) Stage 2: Modify the Styles
Now it’s time to make it look good 😎. Make changes to the CSS (not the HTML) to apply your own styles to the design.
Demo page demo.html shows components/elements with customized styles, including (but not limited to): A different typeface (take a look at Google Fonts for inspiration) A unique and different color palette (take a look at Adobe Color CC for inspiration) Style should be cohesive, connecting the elements as a whole. For example, a similar color palette is chosen. Stretch
Demo page for stylized components is published as a GitHub Pages site Site includes instructions for how to include and use your framework