Documentation

Everything you can do with Beauter


Utilities


Beauter adds some inbuilt CSS utilities to make it easier to use. These utilities can be used independently as class = " _utility" inside their tags and divs with any element. Multiple utilities can be mixed and used to make the element more customized.

_width100
_width75 
_width50
_max-full-width
_min-full-width
_width100
_width75
_width50
_max-full-width
_min-full-width
_floatRight
_floatLeft
_floatRight
_floatLeft
_wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque. Pellentesque sit amet ultricies ante. Nullam molestie euismod iaculis. Sed pellentesque mauris eleifend mattis tempor. Aenean id tempus urna. Donec rutrum mauris et erat accumsan porttitor.
_alignLeft 
_alignRight
_alignCenter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque.

_debugmode
_gray
_blur
_clear

div left right


div left right

_hidden
_hide-mobile
_hide-phablet
_hide-tablet
_hide-desktop
_hide-widescreen
_hidden
_hide-mobile
_hide-phablet
_hide-tablet
_hide-desktop
_hide-widescreen
_disabled
_noReaction
_unselectable
_disabled _noReaction
AN unSelectable text
_noMargin
_noPadding
_noMargin
_noPadding
_round
_box
_shadow
_dark
_cream
_purple
_danger
_success
_info
_warning
_active
_disabled
_primary
_xsmall
_small
_large
_xlarge
_transparent
_truncate
_expandable-truncate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi enim augue, pellentesque id nibh at, laoreet placerat mi. Sed rutrum diam auctor mollis scelerisque.



News

  • New 'Examples' section coming with wonderful tutorials!
  • Adding animations and transitions effects soon.
  • 0.3 development started. Join us here.

Get Involved

Your contribution can make beauter more beautiful. Visit Github to collaborate.

Star Fork

Sitemap Designed with by Shubham Ramdeo
Follow @ramdeoshubham
outboxcraft logoOutboxcraft
© 2017