What's special?

SickleS :

With Sickles included, you can write css like this :

.header[max-width~="500px"] {background-color: #eee;}

or like this:

.header[min-width~="31.250em"][max-width~="48em"] .nav {clear: both;}

Pratically it mean browser now understand another couple of pseudo slelector: [min-width~="x"][max-width~="x"]

Browser support

• IE 9+
• Chrome,Firefox,Opera,Safari
• Mobile browsers(only Android 2.3 native browser tested)

Please drop me a message to tell me whatever you think,or just chit-chat also can <3 : singgum3b@gmail.com

Credits

• Inspired by Tysonmatanich/elementQuery
• Inspired by Bootstrap
• Footable plugin modded from bradvin/FooTable
• Normalize
• Me, for being a nerd.

Usage

Dependency: Jquery. I recommended Jquery 2.x, since Sickles doesnt support ie 6-8 anyway

Sickles consist of 2 file just like bootstrap : sickles.min.js(5kb) and sickles.min.css(38kb) not gzipped

sickles.min.js(5kb) must be place right before the body closing tag </body>

Also header require this meta tag, just like bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sickles doesn't include footable plugin, if you need reponsive footable,add it before sickles.min.js(5kb)

Headers

This is h1

This is h2

This is h3

This is h4

This is h5

This is h6

.h-master

Viewport reponsive

.viewport-ref

.viewport-ref mark the element which below classes reference width from,instead of the media-query

You can have as many viewport-ref as you want,but the nearest .viewport-ref parent count

Other support: .slidershow and .img-thumbnail classes

Breakpoint 30em and 48em

.pc-hidden

.tablet-hidden

.phone-hidden

Nav and Menu

Provide flexible menu components.

.nav

• ITEM 01
• ITEM 02
• ITEM 03
• ITEM 04
• ITEM 05

.nav-minimal

• Item 01
• Item 02
• Item 03
• Item 04
• Item 05

.nav .nav-vertical

• ITEM 01
• ITEM 02
• ITEM 03
• ITEM 04
  • Action
  • Another action
  • Something else here
  • Dropdown header
  • Separated link
  • One more separated link
• ITEM 05

.menu .nav

See top menu for demo, support collapsable and nested dropdown

Responsive width reference from .menu element

Dropdown

Tabs

Pagination

ol .pagi

ol .pagi .pagi-dark

Slidershow

Simply slide & reponsive. Support content hiding classes for adapt with small screens.I actually write dedicated plugin code for it.

Support .viewport-ref classes

Methods

Retrieve plugin instance

obj = $('.slidershow').data('slidershow')

If you query more than one instance,use each()

Slide methods & option

The methods name pretty much say its all.Index start from 0.

obj.slideTo(index)

obj.slideNext()

obj.slidePrev()

obj.slide()

obj.slideStop()

obj.speed

obj.interval

Image classes

.img-rounded .img-circle .img-polaroid

.img-thumbnail

You can use in conjunction with those viewport classes to switch between different image proportion

Button

Button 01 Button 02 Button 05

Button disabled

Button 01 Button 02 Button 05

Link, button, input style

Link Button Hellofolk

Button sizing

Button 01

Button 01 large

Button 01 x-large

Button 01 xx-large

Button block

Progress bars

.progress

.progress .progress-3d

.progress .progress-3d .progress-stripe

Wizard step

.wizard

Any number of step with simple markup

1. 1Step 1
2. 2Step 2
3. 3Step 3
4. 4Step 4
5. 5Step 5

.wizard .x-large

Combine with x-large classes

1. 1Step 1
2. 2Step 2
3. 3Step 3
4. 4Step 4
5. 5Finish!

Message classes

.msg

.msg .msg-warning

.msg .msg-fail

.msg .msg-success

Notice classes

.notice

This is default notice

.notice .notice-warning

This is warning notice

.notice .notice-fail

This is fail notice

.notice .notice-success

This is success notice

Box classes

Provide some helpful class to make your content standout

Note that the outside backgrounds are for demonstration only

.box-glass

.box-simple

.box-3d

.box-cap

.box-cap is a supporting class for boxes.It help you styling your boxes

.box-title

.box-title is a supporting class for boxes.It help you quickly create an article like page

Paragraph

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Blockquote

Pardon me. It seems to me that what you folks need is a hero.

said Hercules

Quote

Vestibulum erat wisi, condimentum sed.

Blockquote .pull-right .text-right

Think your nanny goat would go berserk if you played hooky this afternoon?

said Megara

Quisque sit amet est et sapien ullamcorper pharetra: Vestibulum erat wisi, condimentum sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Table

.table

Name	Phone	Date
Hollee	1-664-520-4588	August 2nd, 2012
Colette	862-3211	July 3rd, 2014
Margaret	326-1614	August 27th, 2013
Adrienne	1-159-147-6757	October 31st, 2012
Mira	1-203-121-0270	June 27th, 2014

.table.table-zebra

Name	Phone	Date
Hollee	1-664-520-4588	August 2nd, 2012
Colette	862-3211	July 3rd, 2014
Margaret	326-1614	August 27th, 2013
Adrienne	1-159-147-6757	October 31st, 2012
Mira	1-203-121-0270	June 27th, 2014

.table.table-relax & .table-bordered

Name	Phone	Date
Hollee	1-664-520-4588	August 2nd, 2012
Colette	862-3211	July 3rd, 2014
Margaret	326-1614	August 27th, 2013
Adrienne	1-159-147-6757	October 31st, 2012
Mira	1-203-121-0270	June 27th, 2014

.table.table-zebra-column & .table-hover

Name	Phone	Date
Hollee	1-664-520-4588	August 2nd, 2012
Colette	862-3211	July 3rd, 2014
Margaret	326-1614	August 27th, 2013
Adrienne	1-159-147-6757	October 31st, 2012
Mira	1-203-121-0270	June 27th, 2014

.table.table-zebra-both

Name	Phone	Date
Hollee	1-664-520-4588	August 2nd, 2012
Colette	862-3211	July 3rd, 2014
Margaret	326-1614	August 27th, 2013
Adrienne	1-159-147-6757	October 31st, 2012
Mira	1-203-121-0270	June 27th, 2014

.table.footable.table-zebra

Monthly savings

Name	Phone	Email	Date
Hollee	1-664-520-4588	example@email.com	August 2nd, 2012
Colette	862-3211	example@email.com	July 3rd, 2014
Margaret	326-1614	example@email.com	August 27th, 2013
Adrienne	1-159-147-6757	example@email.com	October 31st, 2012
Mira	1-203-121-0270	example@email.com	June 27th, 2014

Forms

Basic forms

Stiff form

Label name

Label name

Remember me

Inline form

Remember me

Drafty forms

Crabby King Crabby King Crabby King Label name

Option one is this and that�be sure to include why it's great Option one is this and that�be sure to include why it's great

Inline Label

Alpha Beta Gamma

Multiline select

1 2 3 4 5 Example block-level help text here. Check me out Submit

Misc Classes

Sizing classes

.large .x-large .xx-large

Clearfix

Useful clear floating

Lists

Unstyled list

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.

Pre tag

#header h1 a {
display: block;
width: 300px;
height: 80px;
}

code tag

• min-width: 25em /* 400px */

• min-width: 40em /* 640px */

• min-width: 50em /* 800px */