{"id":13401327,"url":"https://github.com/felipefialho/css-components","last_synced_at":"2025-12-12T04:40:59.608Z","repository":{"id":15463682,"uuid":"18196847","full_name":"felipefialho/css-components","owner":"felipefialho","description":":coffee: A set of common UI Components using just the power of CSS and without JavaScript.","archived":false,"fork":false,"pushed_at":"2024-10-11T11:44:41.000Z","size":1200,"stargazers_count":694,"open_issues_count":6,"forks_count":127,"subscribers_count":26,"default_branch":"main","last_synced_at":"2025-05-11T07:08:13.689Z","etag":null,"topics":["boostrap","carousel","collapse","components","css","css-components","modal","no-javascript","pure-css","purecss","tooltip"],"latest_commit_sha":null,"homepage":"https://css-components.felipefialho.com/","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/felipefialho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","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,"zenodo":null}},"created_at":"2014-03-28T00:56:20.000Z","updated_at":"2025-04-26T19:41:52.000Z","dependencies_parsed_at":"2024-03-18T13:28:32.845Z","dependency_job_id":"656d3d87-1b29-48f0-81fd-65ee12ae2eda","html_url":"https://github.com/felipefialho/css-components","commit_stats":null,"previous_names":["lfeh/css-components"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcss-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcss-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcss-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipefialho%2Fcss-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/felipefialho","download_url":"https://codeload.github.com/felipefialho/css-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535827,"owners_count":22087399,"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":["boostrap","carousel","collapse","components","css","css-components","modal","no-javascript","pure-css","purecss","tooltip"],"created_at":"2024-07-30T19:01:01.523Z","updated_at":"2025-12-12T04:40:59.568Z","avatar_url":"https://github.com/felipefialho.png","language":"HTML","readme":"\r\n## ⚠️ Disclaimer\r\n\r\nThis is an old project, when I made it in 2014 I was tried use some possibilities about HTML/CSS and I loved the result. So I know a lot of people that used these components in production projects (I've used a lot of times).\r\n\r\nBut the things changed in the nexts years and there are better choices to made these components.\r\n\r\nSo I just maintain this project as an experimental thing and I probability won't make changes anymore.\r\n\r\nBut you is free to use it as you want 😁❤️\r\n\r\n___\r\n\r\n![Pure CSS Components Logo](logo-pcc.jpg \"Pure CSS Components\")\r\n\r\n[![Netlify Status](https://api.netlify.com/api/v1/badges/566334bb-2cd1-4548-91b0-b2869a85158b/deploy-status)](https://app.netlify.com/sites/css-components/deploys)\r\n[![license](https://img.shields.io/github/license/felipefialho/css-components.svg)](./license.md)\r\n[![GitHub contributors](https://img.shields.io/github/contributors/felipefialho/css-components.svg)](https://github.com/felipefialho/css-components/graphs/contributors)\r\n\r\n\u003e A set of common UI Components using the power of CSS and without Javascript\r\n\r\n[View the project](https://css-components.felipefialho.com)\r\n\r\n## Install\r\n\r\nInstall via [Bower](https://bower.io/) or\r\n[download the zip](https://css-components.felipefialho.com/build/css-components.zip)\r\n\r\n```bash\r\nbower install css-components\r\n```\r\n\r\n## Components\r\n\r\n- [Carousel](https://css-components.felipefialho.com/#component-carousel \"Carousel\")\r\n- [Collapse](https://css-components.felipefialho.com/#component-collapse \"Collapse\")\r\n- [Dropdown](https://css-components.felipefialho.com/#component-dropdown \"Dropdown\")\r\n- [Modal](https://css-components.felipefialho.com/#component-modal \"Modal\")\r\n- [Tab](https://css-components.felipefialho.com/#component-tab \"Tab\")\r\n- [Tooltip](https://css-components.felipefialho.com/#component-tooltip \"Tooltip\")\r\n\r\n## Browser Support\r\n\r\n|          | Chrome  | Firefox  | Edge     | Safari \r\n| -------- | ------- | -------- | -------- | ---- |\r\n| Android  | Yes     | Yes      | Yes      | Yes  | \r\n| iOS      | Yes     | Yes      | Yes      | Yes  | \r\n| Mac OS X | Yes     | Yes      | Yes      | Yes  | \r\n| Windows  | Yes     | Yes      | Yes.     | Yes  |\r\n\r\n\r\n\\* [CSS3 transitions](https://caniuse.com/#search=css%20transition) are not supported in IE8 and below.\r\n\\*\\* Janky z-index. See [tooltip on right example](https://css-components.felipefialho.com/#component-tooltip).\r\n\r\n**Notes:**\r\n\r\n- Most tests performed with Browserstack.\r\n- Components that perform action on hover may not work on touchscreens eg. _dropdown with hover_. Oddly _tooltip_ does work. Bootstrap mentions this, “[Sticky :hover/:focus on mobile.](https://getbootstrap.com/getting-started/#support-sticky-hover-mobile)\r\n  Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make :hover ‘sticky’. In other words, :hover styles start applying after tapping an element and only stop applying after the user taps some other element.”\r\n- Probably the main reason why the components fail in earlier versions of IE is because they use [advanced CSS selectors](https://caniuse.com/#search=CSS3%20selectors) which aren’t supported. It may be possible to patch this with the use of something like [selectivizr](https://selectivizr.com). This may defeat the purpose of using these javascript free components but on the other hand it may be acceptable for older IE.\r\n- The components do not fail gracefully. In most cases some elements are visible but interaction will not have any effect. The _carousel_ component won't show anything.\r\n- Some layout issues with _tab_ when wrapping on smaller screen sizes.\r\n- Weird flash when _carousel_ loops around to first slide.\r\n\r\n## Contributing\r\n\r\nPlease read this [Coding Style](https://github.com/felipefialho/coding-style/) for [Issues](https://github.com/felipefialho/css-components/issues), pull requests and coding standards.\r\n\r\nAll changes must be made in `/dev` folder. The CSS should be modified using the [Stylus](https://learnboost.github.io/stylus/) preprocessor.\r\n\r\n### Getting Started\r\n\r\n```bash\r\n\r\n# 1. Fork this repository and clone it into the current directory\r\ngit clone https://github.com/\u003cyour-username\u003e/css-components.git\r\n\r\n# 2. Navigate to the newly cloned directory\r\ncd css-components\r\n\r\n# 3. Install the dependencies\r\nnpm install\r\n\r\n```\r\n\r\n### Development\r\n\r\n```bash\r\n\r\n# For start the server, watching your .styl files changes and compile CSS\r\ngrunt w\r\n\r\n```\r\n\r\n### Pull Requests\r\n\r\n```bash\r\n\r\n# Compress zip files\r\ngrunt build\r\n\r\n# Build the project for deploy\r\ngrunt dist\r\n\r\n# View your project release in GhPages\r\nhttps://\u003cyour-username\u003e.github.io/css-components/\r\n\r\n# Open your Pull Request\r\n\r\n```\r\n\r\n## License\r\n\r\nMIT License © Felipe Fialho\r\n","funding_links":[],"categories":["HTML","Uncategorized","Tools"],"sub_categories":["Uncategorized","WebTools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipefialho%2Fcss-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelipefialho%2Fcss-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipefialho%2Fcss-components/lists"}