{"id":21651073,"url":"https://github.com/iansinnott/css-patterns","last_synced_at":"2025-07-20T08:33:22.506Z","repository":{"id":35997740,"uuid":"40289799","full_name":"iansinnott/css-patterns","owner":"iansinnott","description":null,"archived":false,"fork":false,"pushed_at":"2015-08-06T17:26:49.000Z","size":112,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-15T23:05:23.447Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/iansinnott.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}},"created_at":"2015-08-06T06:59:39.000Z","updated_at":"2015-08-06T06:59:58.000Z","dependencies_parsed_at":"2022-08-26T22:43:48.577Z","dependency_job_id":null,"html_url":"https://github.com/iansinnott/css-patterns","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iansinnott/css-patterns","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Fcss-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Fcss-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Fcss-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Fcss-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iansinnott","download_url":"https://codeload.github.com/iansinnott/css-patterns/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iansinnott%2Fcss-patterns/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266092691,"owners_count":23875518,"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-11-25T07:46:37.954Z","updated_at":"2025-07-20T08:33:22.478Z","avatar_url":"https://github.com/iansinnott.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Idioms\n\nSimple solutions to the most common problems we face when authoring CSS.\n\n## Why?\n\nI write a lot of CSS (well, [Stylus][] actually) and I often find myself reaching for the same CSS patterns over and over again. So I finally decided I should really write these down somewhere, for my own sake at least and hopefully for the benefit of others too. Let's jump in.\n\n\n## Terminology\n\n- **Fixed Size:** Any value defined by you that . Example: `width: 200px;`, `padding: 2%;`\n    \n    Examples of non-fixed, or partially-fixed size would be `width: auto;`, `margin: 0 auto;`\n\n- **Variable Size:** When an elements size is dependent on the content you put inside it. This is the default for most block elements\n\n## General Rules\n\n### Use a preprocessor\n\nYou'll be doing yourself a huge favor. Even if you pre-process [CSS Next][] down to regular CSS this is a big win. Once you write nested styles and variables you will never go back to plain CSS. \n\nHere are some options:\n\n* [Stylus][]\n* [Sass][]\n* [Less][]\n* [CSS Next][]\n\nMy favorite is [Stylus][], but use what you feel most comfortable with. The snippets you will find here are all written in Stylus, but I've included a compiled plain CSS file for anyone who's uncomfortable with Stylus syntax. \n\n[Stylus]: https://learnboost.github.io/stylus/\n[CSS Next]: https://github.com/cssnext/cssnext\n[Sass]: http://sass-lang.com/\n[Less]: http://lesscss.org/\n\n### Use `box-sizing border-box`\n\nThe `box-sizing border-box` property is [supported all the way back to IE8][box-sizing] so there's really no reason not to use it. It will _gretaly_ simplify your life authoring CSS.\n\nFor anyone not familiar `box-sizing border-box` basically makes the CSS box model actually reasonable. When you set `width 300px` that's what you get. Borders and padding will push the content of the element inward instead of increasing the effective width of the element outward.\n\nStill curious? [Read this](http://www.paulirish.com/2012/box-sizing-border-box-ftw/).\n\nThen add this to the beginning of all your style files:\n\n```css\n* { box-sizing: border-box; }\n```\n\n[box-sizing]: http://caniuse.com/#feat=css3-boxsizing\n\n## Layout\n\nCSS layout, if anything, is often the most vexing part of creating CSS. For that reason most of the idioms to follow revolve around achieving some layout.\n\n### Vertical Center\n\n- **Fixed Size Vertical Center:**\n  \n    If you're targetting only browsers that aren't terrible you can use the nifty `transform translateY(-50%)` in conjunction with absolute positioning:\n\n    ```stylus\n\n    // Containing element needs position relative of course\n    .vertical-center-parent\n      position relative\n\n    // \n    // By translating the element up (using a negative percentate)\n    .vertical-center\n      position absolute\n      top 50%\n      transform translateY(-50%)\n    ```\n\n    However, if you or your requirements insist on supporting terrible browsers you'll have to resort to the `display table` method: \n- **Variable Size Vertical Center:**\n\n### Horizontal Center\n\n- **Fixed Size Vertical Center:**\n- **Variable Size Vertical Center:**\n\n### Absolute Center\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiansinnott%2Fcss-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiansinnott%2Fcss-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiansinnott%2Fcss-patterns/lists"}