{"id":13459642,"url":"https://github.com/lifeparticle/CSS-Cheatsheet","last_synced_at":"2025-03-24T18:30:59.101Z","repository":{"id":78268350,"uuid":"560698380","full_name":"lifeparticle/CSS-Cheatsheet","owner":"lifeparticle","description":null,"archived":false,"fork":false,"pushed_at":"2024-07-14T12:49:52.000Z","size":44,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-08-01T10:19:18.854Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/lifeparticle.png","metadata":{"files":{"readme":"README.md","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},"funding":{"github":["lifeparticle"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-11-02T03:59:14.000Z","updated_at":"2024-07-14T12:49:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"c2c037d2-bc32-4622-a503-204de041ba75","html_url":"https://github.com/lifeparticle/CSS-Cheatsheet","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/lifeparticle%2FCSS-Cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeparticle%2FCSS-Cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeparticle%2FCSS-Cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lifeparticle%2FCSS-Cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lifeparticle","download_url":"https://codeload.github.com/lifeparticle/CSS-Cheatsheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221995733,"owners_count":16913552,"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":[],"created_at":"2024-07-31T10:00:23.808Z","updated_at":"2024-10-29T05:31:10.317Z","avatar_url":"https://github.com/lifeparticle.png","language":null,"funding_links":["https://github.com/sponsors/lifeparticle"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# My CSS Articles\n\n1. [How To Create a User Interface Using CSS Grid](https://medium.com/geekculture/how-to-create-a-user-interface-using-css-grid-738d0b51282)\n\n# Books\n1. https://www.refactoringui.com/\n\n# Code\n\n```html\n\u003cdiv className=\"card-content\"\u003e\n    \u003cp className=\"card-date\"\u003e{formattedDate}\u003c/p\u003e\n    \u003ch6 className=\"card-title\" data-date={formattedDate}\u003e\n      {post.title}\n    \u003c/h6\u003e\n\u003c/div\u003e\n```\n\n```css\n.card-content {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  gap: 5px;\n}\n\n.card-title::after {\n\t\tcontent: \" — \" attr(data-date);\n\t\tfont-size: smaller;\n\t\tcolor: gray;\n}\n\n.card-date {\n  display: none;\n} \n```\n\n# Tools\nhttps://cssstats.com/\n\n\n\n# Resources\n1. https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/\n2. https://github.com/jareware/css-architecture\n3. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp\n4. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity\n5. http://smacss.com/\n6. https://frontendmasters.com/courses/css-variables/dry-fallback-strategies/\n7. https://open-props.style/\n8. https://nerdy.dev/\n9. https://styleguide.github.com/\n10. https://bradfrost.com/blog/post/atomic-web-design/\n11. https://css-weekly.com/\n12. https://frontendfoc.us/\n13. https://www.lightningdesignsystem.com/components/overview/\n14. https://www.youtube.com/watch?v=7hYOLLO2gc4\u0026t=1357s\u0026ab_channel=YouGottaLoveFrontend\n15. https://courses.rachelnabors.com/p/web-animation-essentials-css-animations-and-transitions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeparticle%2FCSS-Cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flifeparticle%2FCSS-Cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flifeparticle%2FCSS-Cheatsheet/lists"}