{"id":22177284,"url":"https://github.com/derekbtw/color-cards","last_synced_at":"2026-04-30T17:31:57.018Z","repository":{"id":257765956,"uuid":"80988309","full_name":"derekbtw/color-cards","owner":"derekbtw","description":"Flexbox color scheme cards","archived":false,"fork":false,"pushed_at":"2018-09-12T16:55:50.000Z","size":358,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T18:27:52.243Z","etag":null,"topics":["branding","brands","card","cards","color-scheme","colors","css","flexbox","sass","scss","themes"],"latest_commit_sha":null,"homepage":"http://derekbtw.com/color-cards","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/derekbtw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-02-05T11:26:46.000Z","updated_at":"2022-05-10T13:24:10.000Z","dependencies_parsed_at":"2024-09-18T15:44:00.252Z","dependency_job_id":"e0a7be66-c69e-4055-9124-0d735d6b938e","html_url":"https://github.com/derekbtw/color-cards","commit_stats":null,"previous_names":["derekbtw/color-cards"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/derekbtw/color-cards","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fcolor-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fcolor-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fcolor-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fcolor-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/derekbtw","download_url":"https://codeload.github.com/derekbtw/color-cards/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fcolor-cards/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32472396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["branding","brands","card","cards","color-scheme","colors","css","flexbox","sass","scss","themes"],"created_at":"2024-12-02T08:26:48.384Z","updated_at":"2026-04-30T17:31:57.003Z","avatar_url":"https://github.com/derekbtw.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Cards\n\n### [View Demo](http://derekbtw.com/color-cards/)\n\n## Usage\n\nAdd the CSS found in [/dist/color-cards.css](https://github.com/derekbtw/color-cards/blob/master/dist/color-cards.css) to your project.\n\n-or-\n\nYou can use the RawGit CDN\n\n\u003cdetails\u003e\n\u003csummary\u003eCDN URL\u003c/summary\u003e\n```html\nhttps://cdn.rawgit.com/derekbtw/color-cards/56c92dd7/dist/color-cards.css\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eCDN with link tag\u003c/summary\u003e\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.rawgit.com/derekbtw/color-cards/56c92dd7/dist/color-cards.css\"\u003e\n```\n\u003c/details\u003e\n\n### Markup\n\nSince Color Cards use flexbox, it's easy to use 1-5 different colors on each card. However, using more than 5 will need a little customization to your CSS. The cards must be inside ```.flex-grid``` - here's an example:\n\n```html\n  \u003cdiv class=\"flex-grid\"\u003e\n  \n    \u003cdiv class=\"palette\" id=\"01\"\u003e\n      \u003cdiv class=\"wrapper\"\u003e\n        \u003cdiv class=\"colors\"\u003e\n          \u003cdiv class=\"color\" style=\"background: #F9ED69\"\u003e\u003cspan\u003e#F9ED69\u003c/span\u003e\u003c/div\u003e\n          \u003cdiv class=\"color\" style=\"background: #F08A5D\"\u003e\u003cspan\u003e#F08A5D\u003c/span\u003e\u003c/div\u003e\n          \u003cdiv class=\"color\" style=\"background: #B83B5E\"\u003e\u003cspan\u003e#B83B5E\u003c/span\u003e\u003c/div\u003e\n          \u003cdiv class=\"color\" style=\"background: #6A2C70\"\u003e\u003cspan\u003e#6A2C70\u003c/span\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cfooter\u003eExample\u003c/footer\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    ...\n  \u003c/div\u003e\n```\n\nAs you can probably see, it's extremely easy to add new cards. There's no messing with any CSS files, just change the color values right in the inline styles using HTML. Also, since Color Cards utilize flexbox, you can simply add as many cards as you want and flexbox takes care of the spacing.\n\nThe font used on the demo is called Reenie Beanie. Add the Google Font library to your page:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Reenie+Beanie\"\u003e\n```\n```css\n.palette {\n  font-family: \"Reenie Beanie\", sans-serif;\n}\n```\n\nIf you'd like to contribute to the project, PLEASE DO!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderekbtw%2Fcolor-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderekbtw%2Fcolor-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderekbtw%2Fcolor-cards/lists"}