Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/olizilla/the-joy-of-css
How to touch a users eyes without hurting them or freaking out.
https://github.com/olizilla/the-joy-of-css
css joy slides stylelint tachyons
Last synced: about 2 months ago
JSON representation
How to touch a users eyes without hurting them or freaking out.
- Host: GitHub
- URL: https://github.com/olizilla/the-joy-of-css
- Owner: olizilla
- Created: 2017-01-09T10:24:00.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-02-17T12:30:53.000Z (over 7 years ago)
- Last Synced: 2024-06-12T11:28:46.285Z (3 months ago)
- Topics: css, joy, slides, stylelint, tachyons
- Language: HTML
- Homepage: https://olizilla.github.io/the-joy-of-css
- Size: 3.44 MB
- Stars: 17
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> How to touch a users eyes without hurting them or freaking out.
_A talk for [Founders & Coders], 2017-01-10_
## Usage
```
npm install
npm watch
```
Will open a browser pointing to http://localhost:3000 and show the slideshow.
The slide show is all HTML, CSS, and just enough JS to make it move.
The code is for edutainment purposes only. Feel free to fork it better.
```
npm test
```
Will show what it looks like to fail a [`stylelint`][stylelint] exam.
## Reading list
- Use hsla() for colors: https://css-tricks.com/yay-for-hsla/
- CSS color names are fun: http://colours.neilorangepeel.com
- Use good colors: http://clrs.cc/
- Generate a coherent palette: https://palx.jxnblk.com/
- http://colours.neilorangepeel.com
- Unicode, animated: http://oli.zilla.org.uk/unicode/v1/
- Use _the_ system font to blend in: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
- Do incredible things with 1 div: http://a.singlediv.com/
- That text shadow demo: https://github.com/codingdesigner/sassymothereffingtextshadow
- Read the (old) spec: https://www.w3.org/TR/CSS2/
- I did a nodebot: http://jsbin.com/iKaGel/18/edit?html,css,output
- Krav maga of design: https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda#.60xrb42l6
- Tachyons docs will teach you good things: http://tachyons.io/docs/
- See how bad it is: http://cssstats.com
- Automate yourself better: http://stylelint.io
[Founders & Coders]: http://www.foundersandcoders.com/
[stylelint]: http://stylelint.io
---
A [(╯°□°）╯︵TABLEFLIP](https://tableflip.io) technotalk.