{"id":17124605,"url":"https://github.com/asika32764/silicone","last_synced_at":"2025-04-13T06:11:46.643Z","repository":{"id":57359537,"uuid":"77694630","full_name":"asika32764/silicone","owner":"asika32764","description":"A simple css helper to extend bootstrap and other css frameworks","archived":false,"fork":false,"pushed_at":"2018-06-03T09:33:35.000Z","size":81,"stargazers_count":42,"open_issues_count":5,"forks_count":13,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-13T06:11:33.227Z","etag":null,"topics":["background-mask","css-framework","margin","padding","vertical-align"],"latest_commit_sha":null,"homepage":"https://asika32764.github.io/silicone/","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/asika32764.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}},"created_at":"2016-12-30T15:33:55.000Z","updated_at":"2024-01-19T21:59:32.000Z","dependencies_parsed_at":"2022-09-06T22:21:41.914Z","dependency_job_id":null,"html_url":"https://github.com/asika32764/silicone","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asika32764%2Fsilicone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asika32764%2Fsilicone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asika32764%2Fsilicone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asika32764%2Fsilicone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asika32764","download_url":"https://codeload.github.com/asika32764/silicone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670435,"owners_count":21142904,"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":["background-mask","css-framework","margin","padding","vertical-align"],"created_at":"2024-10-14T18:42:59.704Z","updated_at":"2025-04-13T06:11:46.623Z","avatar_url":"https://github.com/asika32764.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Silicone.css\n\nA simple css helper to use with every css frameworks.\n\n## Getting Started\n\n[Download](https://github.com/asika32764/silicone/tree/master/dist) latest version or install by bower:\n\n``` bash\nbower install silicone\n```\n\nThen just include it by HTML link:\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"css/silicone.min.css\" /\u003e\n```\n\n### CDN\n\nUse [Unpkg](https://unpkg.com) to get latest version file.\n\n```\nhttps://unpkg.com/silicone/dist/silicone.min.css\n```\n\n## Box Centered\n\nUse `.box-center` to make an `\u003cdiv\u003e` element align centered. (By using `margin: 0 auto;`)\n\nIt will remove float styles from this element.\n\n## Vertical Align\n\n``` html\n\u003cdiv class=\"vertical-align\" style=\"height: 200px\"\u003e\n    \u003cdiv class=\"vertical-align-middle\"\u003e\n        Content\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThis is an full example.\n\n``` html\n\u003cdiv class=\"container\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-md-6\"\u003e\n            \u003ch2\u003eMiddle\u003c/h2\u003e\n            \u003cdiv class=\"well vertical-align\" style=\"height: 200px\"\u003e\n                \u003cdiv class=\"vertical-align-middle\"\u003e\n                    \u003cp\u003e\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                    \u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        \u003cdiv class=\"col-md-6\"\u003e\n            \u003ch2\u003eBottom\u003c/h2\u003e\n            \u003cdiv class=\"well vertical-align\" style=\"height: 200px\"\u003e\n                \u003cdiv class=\"vertical-align-bottom\"\u003e\n                    \u003cp\u003e\n                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                    \u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![p-2016-12-31-001](https://cloud.githubusercontent.com/assets/1639206/21569521/88cad84c-cef8-11e6-83c6-32e5a01f6066.jpg)\n\n### Use `.table-layout`\n\n`table-layout` can help us do vertical align with `display: table` method but won't break bootstrap `col-*` classes.\n\nAlso supported media queries (`xs-` ~ `lg-`) to create RWD sites.\n\n``` html\n\u003cdiv class=\"row table-layout\"\u003e\n    \u003cdiv class=\"col-md-6 md-table-cell vertical-align-middle\"\u003e\n       ...\n    \u003c/div\u003e\n\n    \u003cdiv class=\"col-md-6 md-table-cell vertical-align-middle\"\u003e\n        ...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Clearfix\n\nUse `float-group` class to wrap elements, this name is more semantic.\n\n``` html\n\u003cdiv class=\"float-group\"\u003e\n    \u003cdiv class=\"pull-left\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"pull-left\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"pull-left\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nOr use classic `sc-clearfix` class.\n\n``` html\n\u003cdiv\u003e\n    \u003cdiv class=\"pull-left\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"pull-left\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"pull-left\"\u003e\u003c/div\u003e\n\n    \u003cdiv class=\"sc-clearfix\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Sizing\n\n### Height\n\nA simple class set to set `vh` height to elements.\n\n- `.height-xs`: 20vh\n- `.height-sm`: 40vh\n- `.height-md`: 60vh\n- `.height-lg`: 80vh\n- `.height-full`: 100vh\n\n### Width\n\nWidth classes is useful if you want some elements full width in RWD.\n\nThis example will make button 100% width when breakpoint small than 767px.\n\n```html\n\u003cbutton class=\"btn btn-primary sm-width-full\"\u003eSubmit\u003c/button\u003e\n```\n\n- `.xs-width-full`: Full width if \u003c= 479px\n- `.sm-width-full`: Full width if \u003c= 575px\n- `.md-width-full`: Full width if \u003c= 991px\n- `.lg-width-full`: Full width if \u003c= 1199px\n- `.xl-width-full`: Always full width.\n\n## Grid Columns Equal Height\n\nUse `.equal-hight` on row div to make child columns equal height.\n\n```html\n\u003cdiv class=\"row equal-height\"\u003e\n    \u003cdiv class=\"col-lg-4\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-lg-4\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"col-lg-4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\u003e This class uses `flex-wrap` property.\n\n## Background Mask\n\nbg-mask class helps us set a background mask to element.\n\nThis example use `bg-mask` to create black ::before element and `bg-mask-op-5` add opacity 0.5 to overlay\nthe background image. And the `bg-mask-content` make sure content text will float on the top.\n\n``` html\n\u003cdiv class=\"bg-mask bg-mask-op-5\" style=\"background-image: url(http://i.imgur.com/6FWMGdH.jpg);\"\u003e\n    \u003cdiv class=\"bg-mask-content\"\u003e\n        \u003ch1 style=\"color: white\"\u003eHello World\u003c/h1\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThe full example is:\n\n``` html\n\u003cdiv class=\"bg-mask bg-mask-op-5 text-center bg-cover bg-center-center\"\n    style=\"background-image: url(http://i.imgur.com/6FWMGdH.jpg);\"\u003e\n    \u003cdiv class=\"height-md vertical-align\"\u003e\n        \u003cdiv class=\"vertical-align-middle bg-mask-content\"\u003e\n            \u003ch1 style=\"color: white\"\u003eHello World\u003c/h1\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n![p-2016-12-31-002](https://cloud.githubusercontent.com/assets/1639206/21569625/7f16f3f2-cef9-11e6-881b-303de111a15e.jpg)\n\nThe `bg-mask-op-*` support 1 to 9.\n\n`bg-cover` is a helpful class to set `background-size: cover`.\n\n## Background Blur\n\n``` html\n\u003cdiv class=\"bg-blur bg-blur-full\"\u003e\n    \u003cdiv class=\"bg-blur-content\"\u003e\n        ...\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Background Position\n\nYou can use `.bg-{position}` classes to set background position.\n\n- `.bg-center-center`\n- `.bg-top`\n- `.bg-middle`\n- `.bg-bottpm`\n- `.bg-left`\n- `.bg-center`\n- `.bg-right`\n\n## Margin and Padding\n\nMargin and Padding is a fork of [less-space](http://aslanbakan.com/en/blog/less-space-responsive-css-margin-and-padding-helper-classes/) library.\n\n``` html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv id=\"content\" class=\"col-md-8 xs-mb-40 md-mb-20\"\u003e\n    \u003c/div\u003e\u003c!-- content --\u003e\n    \u003cdiv id=\"sidebar\" class=\"col-md-4 xs-mb-40 md-mb-20\"\u003e\n    \u003c/div\u003e\u003c!-- sidebar --\u003e\n  \u003c/div\u003e\u003c!-- \"row\" --\u003e\n\u003c/div\u003e\u003c!-- \"container\" --\u003e\n```\n\nYou don't need to know Bootstrap or any other CSS Framework to understand `xs-mb-20` actually does.\nLet's examine these 3 parted class with a visual diagram.\n\n![](http://i.imgur.com/bdWcX2Z.png)\n\n### Red area:\n\nThis section defines which viewport that element belongs right now.\n\n- `xs` Mobile phones and bigger screen sizes..\nxs represents global viewport size by the way. If we want margin or padding values stay same on all screen sizes, we use xs to achieve that.\n- `sm` (\u003e= 576px) Tablet devices and bigger screens.\n- `md` (\u003e= 768px) Desktop and bigger screens\n- `lg` (\u003e= 992px) Large viewport sizes.\n- `xl` (\u003e= 1200px) Extra large wide viewport sizes.\n\n### Blue area\n\nThis section defines the attribute that you want to use, either `margin` or `padding`\n\n- `p` padding\n- `pt` padding-top\n- `pr` padding-right\n- `pb` padding-bottom\n- `pl` padding-left\n- `m` margin\n- `mt` margin-top\n- `mr` margin-right\n- `mb` margin-bottom\n- `ml` margin-left\n\n### Green area\n\nThis is the integer section that you want to set.\n\n- It could be zero \"0\"\n- Only digits.\n- Minus values will not be accepted. (I Didn't define them consider its using rate.)\n- Currently supports: 5, 10, 15, 20, 25, 30, 40, 50, 75, 100\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasika32764%2Fsilicone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasika32764%2Fsilicone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasika32764%2Fsilicone/lists"}