{"id":18096789,"url":"https://github.com/bredele/css-bundle","last_synced_at":"2025-04-13T10:07:46.624Z","repository":{"id":6476377,"uuid":"7716448","full_name":"bredele/css-bundle","owner":"bredele","description":"This is a bundle of CSS tips that have been very helpful in my projects.","archived":false,"fork":false,"pushed_at":"2013-05-26T20:41:47.000Z","size":172,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T01:35:28.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/bredele.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":"2013-01-20T13:08:00.000Z","updated_at":"2018-01-01T23:42:01.000Z","dependencies_parsed_at":"2022-08-29T14:41:50.956Z","dependency_job_id":null,"html_url":"https://github.com/bredele/css-bundle","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/bredele%2Fcss-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bredele%2Fcss-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bredele%2Fcss-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bredele%2Fcss-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bredele","download_url":"https://codeload.github.com/bredele/css-bundle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248695447,"owners_count":21146955,"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-10-31T19:15:29.179Z","updated_at":"2025-04-13T10:07:46.603Z","avatar_url":"https://github.com/bredele.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"css-bundle\n==========\n\n\u003e This is a bundle of CSS tips that have been very helpful in my projects. \n\n\n## Vertical and Horizontal centering \n\nhttps://github.com/bredele/css-bundle/tree/master/vertical-centering\n\nTrying to center elements vertically and horizontally is a real puzzle and the internet is not realy \nhelpful in this task. \n\nA solutions exists since the development of CSS2 thanks to display:table (and it works with IE8...magical!).\n\n\n```css\n\nhtml {\n\tdisplay: table;\n\ttable-layout: fixed;\n\twidth: 100%; height: 100%;\n}\n\nbody {\t\n\tdisplay: table-cell;\t\n\twidth: 100%; height: 100%;\n\tvertical-align: middle;\n\tmargin:0;\n}\n\n/* the element to center */\n.vertical {\n\twidth: 50%;\n\tmargin: auto;\n}\n\n```\nThis tip comes from a talented web designer named Raphaël Goetter: http://lab.goetter.fr/post/37906297786/centrer-un-site-verticalement-et-horizontalement.\n\nHere an other vertical centering demo with a flexible box layout:\n\n```css\n\nhtml, body {\n  height:100%;\n}\nbody{\n  display:-webkit-flex;\n  display:flex;\n\n  -webkit-align-items: center;\n  align-items: center;\n}\n\n.vertical {\n  margin:0 auto;\n}\n\n```\n\n## CSS positions\n\nhttps://github.com/bredele/css-bundle/tree/master/css-positions\n\nThe position's base : a must know!\n\n## Sticky footer\n\nhttps://github.com/bredele/css-bundle/tree/master/sticky-footer\n\nA cross-browser solution (works since IE8) based on display:table. No extra markup, no clearfix, a flexible content height and just a couple of lines.\n\n```css\n\nhtml, body {\n  margin: 0; \n  padding: 0;\n  height: 100%;\n}\n\n.wrapper {\n  display : table;\n  height: 100%;\n  width:100%;\n  behavior: url(display-table.min.htc);\n}\n\nheader, footer{\n  display : table-row;\n  height: 100px;\n}\n\n.content {\n  display : table-row;\n}\n\n```\n\nThis css use the behavior attribute to load a polyfill library intended to emulate CSS properties of display: table* family in Internet Explorer 6 and 7.\n\n## Text wrapping\n\nhttps://github.com/bredele/css-bundle/tree/master/text-overflow\n\nThere is a simple way to determine what should happen when the text overflows the containing element : the text-overflow property.\n\n\nThis property allows to display an ellipsis, a clip or a string...and you don't need JavaScript.\n\n```css\n\n.ellipsis {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n```\nThings become difficult when you try to overflow a block of multi-lines. \n\n## Flexible box layout\n\nhttps://github.com/bredele/css-bundle/tree/master/flexbox\n\nYou will find lots of dynamic or flexible layout for your website. \nMost of them are just like a plate of spaghetti. I really like meat balls but not in my code! Float positionning with relative margin, clearfix, extra markups...berk!\n\nThankfully, new specifications describe a flexible box model optimized (i.e. less css, more maintainable) for user interface design. You can use it with the property display : flex.\n\n```css\n  display:-webkit-flex;\n  display:flex;\n```\n\nIn this model, the children of a flex container can be laid out in any direction and can flex their sizes, fill unused space, etc. See http://www.w3.org/TR/css3-flexbox/ for more information.\n\nI tried in this repository to gather useful layout using flexbox. The first one (website.html) is a responsive layout for your website with header, section, aside and footer.\n\n## Inset text-shadow\n\nhttps://github.com/bredele/css-bundle/tree/master/inset-text-shadow\n\nAt the opposite of box-shadow, text-shadow doesn't have an inset property. However, it is possible to get the same effect : \n\n```css\nbody { \n  background: white;\n}\n\n\n.inset {\n  color:rgba(0,0,0,.6);\n  text-shadow: 1px 4px 6px white, 0 0 0 #000;\n}\n```\n\nThe background color of the parent element (here the body) has to be the same than one of the text-shadow (here the first one). The fake inset shadow is visible under slightly transparent text.\n\n**Note**: With webkit you can play with -webkit-mask-image to apply gradient color to your text. \n\n## Icon fonts\n\nhttps://github.com/bredele/css-bundle/tree/master/icon-fonts\n\nI absolutely love icon fonts. If you need simple icons for your application such as home, delete, clear, etc ... icon fonts are the best for the following reasons:\n  - it is scalable (icons fonts are vector which is great for hight ppi displays)\n  - it is 100% accessible\n  - it is optimized and lightweight\n  - you can apply any CSS effect that is appliable to text\n\nFor most of your needs icon-fonts are largely suffisent (see http://css-tricks.com/flat-icons-icon-fonts/).\n\n## CSS3 transform\n\nhttps://github.com/bredele/css-bundle/tree/master/css-transform\n\nAn example of facebook-like navigation using CSS3 translate3d.\n\n```css∏\n  -webkit-transform:translate3d(180px,0,0);\n  -moz-transform:translate3d(180px,0,0);\n  -ms-transform:translate3d(180px,0,0);\n  -o-transform:translate3d(180px,0,0);\n  transform:translate3d(180px,0,0);\n```\nI used hardware accelerated css for optimal quality on both desktop and mobile interfaces. The translate3d property is the only sure way to trigger hardware acceleration. See http://bredele.tumblr.com/post/43477636846/html5-dom-and-css3-high-performance.\n\n## CSS3 scoped attribute\n\nhttps://github.com/bredele/css-bundle/tree/master/css-scoped\n\nThe CSS scoped attribute allows developers to apply styles to only the host element and descendant elements (it overrides the document stylesheet but not inline styles).\n\n```html\n\u003cdiv class=\"child\"\u003e\u003c/div\u003e\n\u003cdiv class=\"wrapper\"\u003e\n  \u003cstyle scoped\u003e\n    .child {\n      background:red;\n    }\n  \u003c/style\u003e\n  \u003cdiv class=\"child\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n Here's a post I wrote about it: http://bredele.tumblr.com/post/43489520580/better-widgets-with-shadow-dom-and-css-scoped.\n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbredele%2Fcss-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbredele%2Fcss-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbredele%2Fcss-bundle/lists"}