Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asika32764/silicone
A simple css helper to extend bootstrap and other css frameworks
https://github.com/asika32764/silicone
background-mask css-framework margin padding vertical-align
Last synced: 4 months ago
JSON representation
A simple css helper to extend bootstrap and other css frameworks
- Host: GitHub
- URL: https://github.com/asika32764/silicone
- Owner: asika32764
- License: mit
- Created: 2016-12-30T15:33:55.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-03T09:33:35.000Z (over 6 years ago)
- Last Synced: 2024-10-07T19:49:04.758Z (4 months ago)
- Topics: background-mask, css-framework, margin, padding, vertical-align
- Language: CSS
- Homepage: https://asika32764.github.io/silicone/
- Size: 79.1 KB
- Stars: 42
- Watchers: 6
- Forks: 13
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Silicone.css
A simple css helper to use with every css frameworks.
## Getting Started
[Download](https://github.com/asika32764/silicone/tree/master/dist) latest version or install by bower:
``` bash
bower install silicone
```
Then just include it by HTML link:
``` html
```
### CDN
Use [Unpkg](https://unpkg.com) to get latest version file.
```
https://unpkg.com/silicone/dist/silicone.min.css
```
## Box Centered
Use `.box-center` to make an `
` element align centered. (By using `margin: 0 auto;`)
It will remove float styles from this element.
## Vertical Align
``` html
Content
```
This is an full example.
``` html
Middle
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
```
### Use `.table-layout`
`table-layout` can help us do vertical align with `display: table` method but won't break bootstrap `col-*` classes.
Also supported media queries (`xs-` ~ `lg-`) to create RWD sites.
``` html
...
...
```
## Clearfix
Use `float-group` class to wrap elements, this name is more semantic.
``` html
```
Or use classic `sc-clearfix` class.
``` html
```
## Sizing
### Height
A simple class set to set `vh` height to elements.
- `.height-xs`: 20vh
- `.height-sm`: 40vh
- `.height-md`: 60vh
- `.height-lg`: 80vh
- `.height-full`: 100vh
### Width
Width classes is useful if you want some elements full width in RWD.
This example will make button 100% width when breakpoint small than 767px.
```html
Submit
```
- `.xs-width-full`: Full width if <= 479px
- `.sm-width-full`: Full width if <= 575px
- `.md-width-full`: Full width if <= 991px
- `.lg-width-full`: Full width if <= 1199px
- `.xl-width-full`: Always full width.
## Grid Columns Equal Height
Use `.equal-hight` on row div to make child columns equal height.
```html
```
> This class uses `flex-wrap` property.
## Background Mask
bg-mask class helps us set a background mask to element.
This example use `bg-mask` to create black ::before element and `bg-mask-op-5` add opacity 0.5 to overlay
the background image. And the `bg-mask-content` make sure content text will float on the top.
``` html
Hello World
```
The full example is:
``` html
Hello World
```
The `bg-mask-op-*` support 1 to 9.
`bg-cover` is a helpful class to set `background-size: cover`.
## Background Blur
``` html
...
```
## Background Position
You can use `.bg-{position}` classes to set background position.
- `.bg-center-center`
- `.bg-top`
- `.bg-middle`
- `.bg-bottpm`
- `.bg-left`
- `.bg-center`
- `.bg-right`
## Margin and Padding
Margin and Padding is a fork of [less-space](http://aslanbakan.com/en/blog/less-space-responsive-css-margin-and-padding-helper-classes/) library.
``` html
```
You don't need to know Bootstrap or any other CSS Framework to understand `xs-mb-20` actually does.
Let's examine these 3 parted class with a visual diagram.
### Red area:
This section defines which viewport that element belongs right now.
- `xs` Mobile phones and bigger screen sizes..
xs 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.
- `sm` (>= 576px) Tablet devices and bigger screens.
- `md` (>= 768px) Desktop and bigger screens
- `lg` (>= 992px) Large viewport sizes.
- `xl` (>= 1200px) Extra large wide viewport sizes.
### Blue area
This section defines the attribute that you want to use, either `margin` or `padding`
- `p` padding
- `pt` padding-top
- `pr` padding-right
- `pb` padding-bottom
- `pl` padding-left
- `m` margin
- `mt` margin-top
- `mr` margin-right
- `mb` margin-bottom
- `ml` margin-left
### Green area
This is the integer section that you want to set.
- It could be zero "0"
- Only digits.
- Minus values will not be accepted. (I Didn't define them consider its using rate.)
- Currently supports: 5, 10, 15, 20, 25, 30, 40, 50, 75, 100