{"id":13549911,"url":"https://github.com/o-t-w/atomize","last_synced_at":"2025-04-02T23:31:21.377Z","repository":{"id":46789377,"uuid":"174556574","full_name":"o-t-w/atomize","owner":"o-t-w","description":"A library of atomic CSS classes.","archived":true,"fork":false,"pushed_at":"2021-09-25T20:05:31.000Z","size":542,"stargazers_count":49,"open_issues_count":5,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T09:44:34.491Z","etag":null,"topics":["atomic-css","css","css-framework","css-library","css3","design-systems","functional-css","responsive","utility-classes"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/o-t-w.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-08T14:57:38.000Z","updated_at":"2024-12-11T07:42:27.000Z","dependencies_parsed_at":"2022-09-26T19:12:06.820Z","dependency_job_id":null,"html_url":"https://github.com/o-t-w/atomize","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/o-t-w%2Fatomize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o-t-w%2Fatomize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o-t-w%2Fatomize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o-t-w%2Fatomize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/o-t-w","download_url":"https://codeload.github.com/o-t-w/atomize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246910955,"owners_count":20853652,"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":["atomic-css","css","css-framework","css-library","css3","design-systems","functional-css","responsive","utility-classes"],"created_at":"2024-08-01T12:01:26.936Z","updated_at":"2025-04-02T23:31:19.816Z","avatar_url":"https://github.com/o-t-w.png","language":"SCSS","funding_links":[],"categories":["SCSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg width=\"200\" src=\"./atomize.jpg\"\u003e\u003c/p\u003e\n\n# Atomize is a library of atomic CSS classes.\n\n**Low specificity. Predictable styles.**\n\nUtilities apply a single rule or a single piece of functionality. They are designed to be highly reusable.\n\nFor more information of this approach to CSS, see:\n\n- [On the Growing Popularity of Atomic CSS\n  ](https://css-tricks.com/growing-popularity-atomic-css/)\n- [CSS Utility Classes and \"Separation of Concerns\"\n  ](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/)\n\nThis project is heavily inspired by [Tailwind](https://tailwindcss.com/docs/what-is-tailwind/), [Basscss](http://basscss.com/) and [Tachyons](https://tachyons.io/).\n\n## Using Atomize\n\nAtomize purposefully keeps things simple. There is no CLI. There are not configuration files.\n\nYou can download the files from [GitHub](https://github.com/o-t-w/atomize).\nAtomize is also available on [NPM](https://www.npmjs.com/package/@pixelpusher/atomize).\n\nThe compiled CSS is also available to use from the [UNPKG CDN](https://unpkg.com/).\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@pixelpusher/atomize\" /\u003e\n```\n\n## Staying out of peoples way\n\nAtomize aims to be style neutral.\n\n- Some margin classes and grid classes are included as a reference implementation and commented out. Define your own depending on your design and use case.\n- `colors.scss` is included as an _example_ of the recommended way to handle colors. Define your own depending on your design.\n- Atomize does not include breakpoints. Define your own.\n\n## Grid classes\n\nThe amount of custom layout designs that could be implemented with CSS grid are almost infinite. You can use CSS grid for everything from a small widget to the entire layout of a page. Abstracting such a large amount of options into utility classes is not feasible. Define your own classes for using CSS grid.\n\n## At-A-Glance Understandability\n\nAtomize avoids overly abbreviated class names and instead strives for classes that are human-readable and easily understandable.\n\n## Escaping special characters\n\nAtomize makes use of the `@` symbol, percentage sign, and colons (`:`) in class names.\n\nThese characters have a special meaning in CSS. These characters can be [escaped with a backslash](https://mathiasbynens.be/notes/css-escapes) to remove their special meaning.\n\n## State Variants\n\nTo style elements on `hover`, `focus`, `active` or `focus-within`, use a `hover:`, `focus:`, `active:`, `focus-within:` prefix.\n\ne.g. given the following classes, the button will have a pink background, while on hover it will have a blue background.\n\n```\n.bg-pink { background-color:pink; }\n\n.hover\\:bg-blue:hover { background-color: var(--blue); }\n```\n\n```\n\u003cbutton class=\"bg-pink hover:bg-blue\"\u003eclick\u003c/button\u003e\n```\n\n## Handling media queries\n\nBreakpoints should be defined as Sass variables (CSS custom properties cannot be used for this purpose).\n\n### Breakpoint Suffixes\n\nHTML classes that have an impact only at specific screen sizes have a `@breakpoint-name` prefix.\n\ne.g.:\n\n```\n.font-xl {\n  font-size: 75px;\n}\n\n@media (max-width: $breakpoint-mobile) {\n  .\\@sm\\:font-l {\n    font-size: 50px;\n  }\n}\n```\n\nGiven the following markup, a `h1` would be 50 pixels on mobile and 75 pixels on all larger screens.\n\n```\n\u003ch1 class=\"font-xl @sm:font-l\"\u003eLorem Ipsum Heading\u003c/h1\u003e\n```\n\n## Normalize\n\nAtomize does not include Normalize. The vast majority of Normalize is for dealing with older browsers - particularly old versions of Internet Explorer. Atomize takes a modern approach to browser support. It does not bloat CSS with unneeded styles for obsolete long-dead browsers.\n\n## Opinionated Styles\n\n`base.scss` is opinionated.\n\nIt sets `box-sizing` to `border-box` for all elements rather than the browser default of `content-box`.\n\n`base.scss` also makes working with REM units easier.\n\nPixel values are generally more intuitive than relative sizes (em's and rem's). However, rem values should be used to size text in order to cater for users who want to enlarge the size of text using there browser settings. Understanding the pixel value of these relative sizes is made obvious.\n\n`1rem` is computed as `10px`. `1.6rem` is computed as `16px`. `1.7rem` is computed as `17px`. `5rem` is computed as `50px`. etc.\n\n## Font sizes\n\nIt's important to avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an `\u003ch2\u003e` in your code, the next heading used should be either `\u003ch2\u003e` or `\u003ch3\u003e`. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.\n\nAtomize applies styling directly to HTML heading elements, while also defining classes for overrides:\n\n```\nh1, .h1 {}\nh2, .h2 {}\nh3, .h3 {}\nh4, .h4 {}\nh5, .h5 {}\nh6, .h6 {}\n```\n\n## Styling shadow DOM\n\nClasses defined outside of shadow DOM don't work inside of shadow DOM. Atomize does, however, define some CSS custom properties, which _can_ be used. All colors and font sizes are defined as CSS custom properties.\n\n## Browser support\n\nThe vast majority of classes included here work in _all browsers_. However, this library is primarily aimed towards modern everygreen browsers. New classes will be added as new CSS features emerge.\n\nCSS features that do not work in Internet Explorer include:\n\n- CSS custom properties\n- CSS grid\n- `display: contents`\n- `min-content` and `max-content`\n- `object-fit`\n- `position: sticky`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo-t-w%2Fatomize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fo-t-w%2Fatomize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo-t-w%2Fatomize/lists"}