A workshop for learning/testing basics of CSS
npm installnpm testto start the Karma testing server. Follow the given URL to capture a browser for testing. So far, this workshop has only been tested with Chrome- Keep your browser window open/on top of other tabs as timeouts/async errors can occur otherwise
- Make sure that your browser is set to 100% zoom for best results. Some of these tests check pixel values that can be changed by browser zoom.
This workshop is designed as a basic CSS tutorial to get up and running with CSS rules and their interactions in browsers.
Start at the .css file in each folder to get a sense of the spec. If you need to edit the HTML file as well, the spec will tell you.
If a folder has a .secrets.js file, this is to hide the raw CSS style checking while you are reading the test specs. You can see the actual values being tested against in the secrets file, but you should avoid this if possible
basicsfolder - try this out to learn a few basicsborderfolder - learn a few border rules and shorthandslistfolder - try out some basic unordered list styling within a HTML filepositionsfolder - position absolute/relative and spacing practicesimple-columnsfolder - basic width setting with noclearfixnavbarfolder - create horizontal navbars in standard and breadcrumb style
npm run reset [<name> <--all>] will overwrite CSS files with their starting point. <name> represents the folder name of the workshop stage or --all can be used to reset the entire workshop.
Note: this workshop is in development, so some of the reset scripts load the solution, not a blank template
These test specs are under construction and using the open source Quixote testing library. If the testing is too opionated, brittle, or incorrect, open an issue or submit a pull request!