https://github.com/daggerok/css-examples

CSS/SCSS/LESS/Stylus/etc examples...
https://github.com/daggerok/css-examples

css forever github-action github-action-node github-action-nodejs github-action-python github-actions github-actions-node github-actions-nodejs github-actions-python parcel parcel-bundler

Last synced: 4 months ago
JSON representation

CSS/SCSS/LESS/Stylus/etc examples...

• Host: GitHub
• URL: https://github.com/daggerok/css-examples
• Owner: daggerok
• License: mit
• Created: 2018-07-25T18:59:07.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-04-30T18:17:55.000Z (about 5 years ago)
• Last Synced: 2025-01-10T00:45:48.940Z (5 months ago)
• Topics: css, forever, github-action, github-action-node, github-action-nodejs, github-action-python, github-actions, github-actions-node, github-actions-nodejs, github-actions-python, parcel, parcel-bundler
• Language: HTML
• Homepage: https://daggerok.github.io/css-examples/
• Size: 4.51 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.adoc
  • License: LICENSE

Awesome Lists containing this project

README

        
= css-examples image:https://travis-ci.org/daggerok/css-examples.svg?branch=master["Build Status", link="https://travis-ci.org/daggerok/css-examples"] image:https://github.com/daggerok/css-examples/workflows/CI/badge.svg["CI", link="https://github.com/daggerok/css-examples/actions"]

image::ui-principles.png[]

//tag::content[]

reference:

- link:https://www.youtube.com/watch?v=GZTZTZ69bqY[YouTube: CSS Variables]

- link:https://www.youtube.com/watch?v=6zGTxITQkN0[YouTube: Super Lightweight Scroll Animations with Sal.js - 2.8kb!]

- link:https://en.parceljs.org/recipes.html#bootstrap-+-fontawesome[Parcel Bundler + Bootstrap 4 + Font Awesome]

- link:https://github.com/parcel-bundler/parcel/issues/1080#issuecomment-584745016[Parcel Bundler copy static resources assets files]

- link:https://daggerok.github.io/css-examples[Project reference documentation]

_ui / ux "must have" topics_

- color & contrast

- white space

- visual hierarchy

- complexity cs simplicity

- consistency

- scale

_css "must have" topics_

- css selectors

- css properties

- css values

- css units: `css-property: valu e{unit}`

  . absolute: mm, cm, px, in, pt, pc

  . relative: %, em, rm, vw, vh, vmin, vmax

- css multiple selectors

- css functions:

  . rgba: `background-color: rgba(0,0,0,0.4)`

  . calc: `margin: calc(2em * 5em)`

  . ...

- css animations

  . animation

  . keyframes

  . `transitions` between 2 css values

- css media queries

  . `@media only screen and (min-width: 650px) { /* scoped css rules... */ }`

- css selectors weight

  . by element selector == 1

  . by class name selector == 100

  . by id selector == 1000

_other repositories_

- link:https://github.com/daggerok/flex-box[Flexbox]

- link:https://github.com/daggerok/css-grid[Css Grid]

- link:https://github.com/daggerok/vue-bulma-parcel-playground[GitHub: daggerok/vue-bulma-parcel-playground]

- link:https://github.com/daggerok/tachyons-example[GitHub: daggerok/tachyons-example]

- link:https://github.com/daggerok/css-grid-layout-example[GitHub: daggerok/css-grid-layout-example]

- https://github.com/daggerok/html-footer

Initially generated by using link:https://github.com/daggerok/generator-jvm/[generator-jvm] yeoman generator (java-parent-multi-project)

//end::content[]