A simple css helper to extend bootstrap and other css frameworks
MIT License
A simple css helper to use with every css frameworks.
Download latest version or install by bower:
bower install silicone
Then just include it by HTML link:
<link rel="stylesheet" href="css/silicone.min.css" />
Use Unpkg to get latest version file.
https://unpkg.com/silicone/dist/silicone.min.css
Use .box-center
to make an <div>
element align centered. (By using margin: 0 auto;
)
It will remove float styles from this element.
<div class="vertical-align" style="height: 200px">
<div class="vertical-align-middle">
Content
</div>
</div>
This is an full example.
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Middle</h2>
<div class="well vertical-align" style="height: 200px">
<div class="vertical-align-middle">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="col-md-6">
<h2>Bottom</h2>
<div class="well vertical-align" style="height: 200px">
<div class="vertical-align-bottom">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
</div>
</div>
</div>
.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.
<div class="row table-layout">
<div class="col-md-6 md-table-cell vertical-align-middle">
...
</div>
<div class="col-md-6 md-table-cell vertical-align-middle">
...
</div>
</div>
Use float-group
class to wrap elements, this name is more semantic.
<div class="float-group">
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="pull-left"></div>
</div>
Or use classic sc-clearfix
class.
<div>
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="pull-left"></div>
<div class="sc-clearfix"></div>
</div>
A simple class set to set vh
height to elements.
.height-xs
: 20vh.height-sm
: 40vh.height-md
: 60vh.height-lg
: 80vh.height-full
: 100vhWidth classes is useful if you want some elements full width in RWD.
This example will make button 100% width when breakpoint small than 767px.
<button class="btn btn-primary sm-width-full">Submit</button>
.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.Use .equal-hight
on row div to make child columns equal height.
<div class="row equal-height">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
This class uses
flex-wrap
property.
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.
<div class="bg-mask bg-mask-op-5" style="background-image: url(http://i.imgur.com/6FWMGdH.jpg);">
<div class="bg-mask-content">
<h1 style="color: white">Hello World</h1>
</div>
</div>
The full example is:
<div class="bg-mask bg-mask-op-5 text-center bg-cover bg-center-center"
style="background-image: url(http://i.imgur.com/6FWMGdH.jpg);">
<div class="height-md vertical-align">
<div class="vertical-align-middle bg-mask-content">
<h1 style="color: white">Hello World</h1>
</div>
</div>
</div>
The bg-mask-op-*
support 1 to 9.
bg-cover
is a helpful class to set background-size: cover
.
<div class="bg-blur bg-blur-full">
<div class="bg-blur-content">
...
</div>
</div>
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 is a fork of less-space library.
<div class="container">
<div class="row">
<div id="content" class="col-md-8 xs-mb-40 md-mb-20">
</div><!-- content -->
<div id="sidebar" class="col-md-4 xs-mb-40 md-mb-20">
</div><!-- sidebar -->
</div><!-- "row" -->
</div><!-- "container" -->
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.
This section defines which viewport that element belongs right now.
xs
Mobile phones and bigger screen sizes..sm
(>= 576px) Tablet devices and bigger screens.md
(>= 768px) Desktop and bigger screenslg
(>= 992px) Large viewport sizes.xl
(>= 1200px) Extra large wide viewport sizes.This section defines the attribute that you want to use, either margin
or padding
p
paddingpt
padding-toppr
padding-rightpb
padding-bottompl
padding-leftm
marginmt
margin-topmr
margin-rightmb
margin-bottomml
margin-leftThis is the integer section that you want to set.