https://github.com/tomhazledine/css-presentation

A whistle-stop tour through my CSS set up, linked to an in-browser illustration.
https://github.com/tomhazledine/css-presentation

Last synced: about 2 months ago
JSON representation

A whistle-stop tour through my CSS set up, linked to an in-browser illustration.

• Host: GitHub
• URL: https://github.com/tomhazledine/css-presentation
• Owner: tomhazledine
• Created: 2016-01-26T09:06:06.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-28T08:55:21.000Z (almost 9 years ago)
• Last Synced: 2024-10-12T23:44:16.776Z (3 months ago)
• Language: CSS
• Size: 25.6 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Presentation

Presentation to Cornwall Geeks meetup, 20160128.

> A whistle-stop tour through my CSS set up, linked to an in-browser illustration

---

Portfolio of CSS creations:

* starfield

* pong

* calculator

* keyboard

* tape

---

Add "Pong Loaded" to full-blown illustration.

* Gameboy?

* Arcade unit?

* Old-school TV?

Simplify Pong code (remove J.Long-specific syntax).

Upgrade to `gulp-cssnano`?

---

Intro to my CSS exploits.

* tape

* starfield

* bear

* calculator

* keyboard (dig out old "realistic" render?)

Sublime Text

* code completion

* find-in-project

Gulp setup:

* SASS pre-processing

* Concatenation

* Minification

* Autoprefixer

* Error reporting

* Linter (if I want it: talk about edge-cases)

* Live-reload

* Asset management (with other tasks: JS, SVG, Images, etc.)

* Consistent structure, no matter what the project

SASS Grammar

* nesting

* indentation

* source-order (ITCSS)

* breakpoints

Step-by-step walk-through for Pong animation.