{"id":13537419,"url":"https://github.com/frontaid/natural-selection","last_synced_at":"2025-04-02T04:30:38.628Z","repository":{"id":44389594,"uuid":"328124179","full_name":"frontaid/natural-selection","owner":"frontaid","description":"CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors","archived":false,"fork":false,"pushed_at":"2023-04-16T09:49:13.000Z","size":36,"stargazers_count":198,"open_issues_count":0,"forks_count":11,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-11-03T02:32:55.957Z","etag":null,"topics":["boilerplate","css","css-framework","css-library","framework","selector"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/frontaid.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}},"created_at":"2021-01-09T09:59:05.000Z","updated_at":"2024-10-30T04:56:17.000Z","dependencies_parsed_at":"2024-01-27T09:39:19.377Z","dependency_job_id":"3993ae60-7936-4a33-9097-a745d01535bc","html_url":"https://github.com/frontaid/natural-selection","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/frontaid%2Fnatural-selection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontaid%2Fnatural-selection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontaid%2Fnatural-selection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/frontaid%2Fnatural-selection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/frontaid","download_url":"https://codeload.github.com/frontaid/natural-selection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246756883,"owners_count":20828786,"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":["boilerplate","css","css-framework","css-library","framework","selector"],"created_at":"2024-08-01T09:00:58.851Z","updated_at":"2025-04-02T04:30:38.126Z","avatar_url":"https://github.com/frontaid.png","language":"CSS","readme":"# Natural Selection\n\nNatural Selection is a CSS framework without any styling at all.\nIt is just a collection of *selectors* that can be used to define *global* styles.\nNatural Selection aims to provide a best-practice **CSS boilerplate** that can be used to start projects.\nIt tries to encourage semantic HTML and the handling of accessibility concerns.\n\nNatural Selection almost exclusively uses generic element, attribute, and pseudo-class selectors.\nBut there are also very few *opinionated* selectors that rely on classes.\nSee the comments in the CSS file for more information.\nThe selector grouping is loosely based on MDN's\n[HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).\nOrdering is roughly based on how common certain elements or element groups are.\n\n\n## Instructions\n\n1. Download the [raw CSS](https://raw.githubusercontent.com/frontaid/natural-selection/main/boilerplate.css)\n1. Move it into your code base\n1. Evolve it according to your needs\n\n\n## Browser Compatibility\n\nAll modern browsers and almost all browsers still in use today should be more than capable of handling Natural Selection.\n\nNatural Selection is mostly based on element, attribute, and pseudo-class selectors.\nAll of them have been in the CSS specifications for ages.\nThough, there are some selectors that might not yet be widely supported.\nIn that case, Natural Selection provides ways to detect and/or overcome lacking browser support.\n\n\n## Contribute\n\nPlease create an issue when you have a suggestion.\nNote that the goal of this project is to provide a useful and minimal boilerplate for global CSS styling.\nIt is *not* the goal to add every single element or every possible element/attribute/pseudo-class combination.\n\n\n## Questions and Answers\n\n**Why is this called \"Natural Selection\"?**  \nThis is a collection of CSS *selectors*.\nAnd given the limited number of HTML elements and attributes, the list came about quite *naturally*.\n\n**What is element `X` used for?**  \nPlease read MDN's\n[HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).\n\n**What element(s) are matched by the selector `X`?**  \nPlease read MDN's\n[CSS selectors reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).\n\n\n## Notable Omissions\n\n### `div`, `span`\nBoth `div` and `span` are very generic. It does not really make sense to apply any *global* styling\nto them. If it does make sense in your specific use case, just add them yourself.\n\n### Reset Buttons\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset):\n\"You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake [...].\"\nAlso refer to [WebAIM](https://webaim.org/techniques/forms/controls#button) or [Nielsen Norman Group](https://www.nngroup.com/articles/reset-and-cancel-buttons/).\n","funding_links":[],"categories":["CSS","Base / Reset / Normalize","Frameworks / Resources"],"sub_categories":["N"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontaid%2Fnatural-selection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrontaid%2Fnatural-selection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrontaid%2Fnatural-selection/lists"}