{"id":19656817,"url":"https://github.com/daggerok/css-examples","last_synced_at":"2025-10-19T08:18:05.302Z","repository":{"id":151041485,"uuid":"142341726","full_name":"daggerok/css-examples","owner":"daggerok","description":"CSS/SCSS/LESS/Stylus/etc examples...","archived":false,"fork":false,"pushed_at":"2020-04-30T18:17:55.000Z","size":4724,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-10T00:45:48.940Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://daggerok.github.io/css-examples/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/daggerok.png","metadata":{"files":{"readme":"README.adoc","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-25T18:59:07.000Z","updated_at":"2020-04-30T18:17:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"c4fc7df5-8c10-42e1-ab54-3673ae3b71fa","html_url":"https://github.com/daggerok/css-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fcss-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fcss-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fcss-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daggerok%2Fcss-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daggerok","download_url":"https://codeload.github.com/daggerok/css-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240964935,"owners_count":19885832,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-11T15:28:59.866Z","updated_at":"2025-10-19T08:18:00.269Z","avatar_url":"https://github.com/daggerok.png","language":"HTML","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\"]\n\nimage::ui-principles.png[]\n\n//tag::content[]\n\nreference:\n\n- link:https://www.youtube.com/watch?v=GZTZTZ69bqY[YouTube: CSS Variables]\n- link:https://www.youtube.com/watch?v=6zGTxITQkN0[YouTube: Super Lightweight Scroll Animations with Sal.js - 2.8kb!]\n- link:https://en.parceljs.org/recipes.html#bootstrap-+-fontawesome[Parcel Bundler + Bootstrap 4 + Font Awesome]\n- link:https://github.com/parcel-bundler/parcel/issues/1080#issuecomment-584745016[Parcel Bundler copy static resources assets files]\n- link:https://daggerok.github.io/css-examples[Project reference documentation]\n\n_ui / ux \"must have\" topics_\n\n- color \u0026 contrast\n- white space\n- visual hierarchy\n- complexity cs simplicity\n- consistency\n- scale\n\n_css \"must have\" topics_\n\n- css selectors\n- css properties\n- css values\n- css units: `css-property: valu e{unit}`\n  . absolute: mm, cm, px, in, pt, pc\n  . relative: %, em, rm, vw, vh, vmin, vmax\n- css multiple selectors\n- css functions:\n  . rgba: `background-color: rgba(0,0,0,0.4)`\n  . calc: `margin: calc(2em * 5em)`\n  . ...\n- css animations\n  . animation\n  . keyframes\n  . `transitions` between 2 css values\n- css media queries\n  . `@media only screen and (min-width: 650px) { /* scoped css rules... */ }`\n- css selectors weight\n  . by element selector == 1\n  . by class name selector == 100\n  . by id selector == 1000\n\n_other repositories_\n\n- link:https://github.com/daggerok/flex-box[Flexbox]\n- link:https://github.com/daggerok/css-grid[Css Grid]\n- link:https://github.com/daggerok/vue-bulma-parcel-playground[GitHub: daggerok/vue-bulma-parcel-playground]\n- link:https://github.com/daggerok/tachyons-example[GitHub: daggerok/tachyons-example]\n- link:https://github.com/daggerok/css-grid-layout-example[GitHub: daggerok/css-grid-layout-example]\n- https://github.com/daggerok/html-footer\n\nInitially generated by using link:https://github.com/daggerok/generator-jvm/[generator-jvm] yeoman generator (java-parent-multi-project)\n\n//end::content[]\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Fcss-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaggerok%2Fcss-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaggerok%2Fcss-examples/lists"}