planckcss = miligram + flexboxgrid2;

Buttons

Table

Id Name Marks
1 John 90%
1 John 90%
1 John 90%

Form

Image

image sample

Blockquote

The Lorem ipsum dolor sit amet.

Code


.test{
    color: red;
}

Mics

float-left
float-right

Grid(Bootstrap based)

1
2
3

Media Queries


//xs = Smaller than 576px

@media only screen and (min-width: 576px) { //sm
    ...
}
@media only screen and (min-width: 768px) { //md
    ...
}
@media only screen and (min-width: 992px) { //lg
    ...
}
@media only screen and (min-width: 1200px) { //xl
    ...
}

Shadow & Border

Extension

Form extended utility (form_extended.css)

Spacing Utility (extension_spacing.css)

Margin & Padding
  • xs and above - .m{side}-{size}
  • sm and above - .m{side}-sm-{size}
  • md and above - .m{side}-md-{size}
  • lg and above - .m{side}-lg-{size}
  • xl and above - .m{side}-xl-{size}
  • xs and above - .p{side}-{size}
  • sm and above - .p{side}-sm-{size}
  • md and above - .p{side}-md-{size}
  • lg and above - .p{side}-lg-{size}
  • xl and above - .p{side}-xl-{size}
Note: Spacing utility classes are same as bootstrap's spacing, But it does not include auto and x,y Read more >>
.ml-5 .mr-md-5 .pl-2

Color Utility (extension_colors.css)

.bg-white
.bg-dark
.bg-primary
.bg-success
.bg-danger
.bg-warning
.text-white
.text-dark
.text-primary
.text-success
.text-danger
.text-warning

Success: This is alert example using colors utility. x

Toggle Utility (extension_toggle.css)

Dropdown
Collapse
This is collapse content. Lorem ipsum dolor sit amet. This is collapse content. Lorem ipsum dolor sit amet. This is collapse content. Lorem ipsum dolor sit amet.
Sidebar
Tabs
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, veritatis!
As the era of the masses does away with the instruments monopolizing power, wealth and arms, it will, inevitably, destroy the monopoly of social activity in such areas as sports, horsemanship, and so forth
Societies which consider materialistic knowledge taboo are likewise reactionary societies, biased towards ignorance and hostile to freedom

Display Utility (extension_display.css)

Display
.d-inline .d-md-none
.d-inline-block
Sizing
.w-25 .h-75