DevUI

devUI 2.0

hello World!

App Icons

CutterCroix Logo

CutterCroix Ball

CutterCroix Wordmark

GiddyUp

Giddy Up Product Badges

Spurs

Canvasser Logo

Customer Connect Logo

Show Floor Logo

Cutter Kiosk iOS

Cutter Kiosk Android

Other Kiosk Files

eMail Responses

Flyers

Helper Classes

CutterWaves does a few things to overide bootstrap and these are the classes that can be used to achieve normal performance, or to perform easy layout fixes.

Positioning

Relative.posRel {position: relative}
Absolute.posAbs {position: absolute}
Fixed.posFix {position: fixed}
Static.posStatic {position: static}

Left 0.l0 {left: 0!important}
Right 0.r0 {right: 0!important}

Top 0.top0 {top: 0!important}
Top 10.top10 {top: 10!important}
Top 20.top20 {top: 20!important}

Bottom 0.bottom0 {bottom: 0!important}
Bottom 10.bottom10 {bottom: 10!important}
Bottom 20.bottom20 {bottom: 20!important}

100% viewport height.height100 {height: 100vh!important}
100% viewport width.width100 {width: 100vw!important}

Scrolling

Vertical Scrolling.scrollY {overflow-y: scroll!important}
Horizontal Scrolling.scrollX {overflow-x: scroll!important}
No Scrolling.noScroll {overflow: hidden!important}

Grid System

CutterWaves has the the responsive 12 column bootstrap grid system built into it. for more information on the grid visit http://getbootstrap.com/css/#grid

row

col-xs-1

col-xs-2

col-xs-10

col-xs-3

col-xs-4

col-xs-6

Padding

Padding is the MINIMUM space inside the div that surrounds the object. CutterWaves supports padding, padding left, padding right, padding top, and padding bottom.Currently we support the following distances (0,5,10,15,20,25,40) px
Example CSS .p5{padding: 5px!important}

Padding

p10

p15

p20

p25

p40

Padding Left

pl0

pl5

pl10

pl15

pl20

pl25

pl40

Padding Right

pr0

pr5

pr10

pr15

pr20

pr25

pr40

Padding Top

pt0

pt5

pt10

pt15

pt20

pt25

pt40

Padding Bottom

pb0

pb5

pb10

pb15

pt20

pb25

pb40

Margin

Margin is the MINIMUM space outside the div that surrounds the object. CutterWaves supports margin, margin left, margin right, margin top, and margin bottom.Currently we support the following distances (0,5,10,15,20,25,40) px
Example CSS .m5{margin: 5px!important}

Margin

m40

Margin Left

ml0

ml5

ml10

ml15

ml20

ml25

ml40

Margin Right

mr0

mr5

mr10

mr15

mr20

mr25

mr40

Margin Top

mt0

mt5

mt10

mt15

mt20

mt25

mt40

Margin Bottom

mb0

mb5

mb10

mb15

mb20

mb25

mb40

Cutter Color Pallete

{{item.class}}-text

RGB({{item.rgbVal}})

#{{item.hexVal}}

Material Color Pallete

{{item.class}}-text

{{item.class}} lighten-1

{{item.class}}-text text-lighten-1

{{item.class}} lighten-2

{{item.class}}-text text-lighten-2

{{item.class}} lighten-3

{{item.class}}-text text-lighten-3

{{item.class}} lighten-4

{{item.class}}-text text-lighten-4

{{item.class}} lighten-5

{{item.class}}-text text-lighten-5

{{item.class}} darken-1

{{item.class}}-text text-darken-1

{{item.class}} darken-2

{{item.class}}-text text-darken-2

{{item.class}} darken-3

{{item.class}}-text text-darken-3

{{item.class}} darken-4

{{item.class}}-text text-darken-4

{{item.class}} accent-1

{{item.class}}-text text-accent-1

{{item.class}} accent-2

{{item.class}}-text text-accent-2

{{item.class}} accent-3

{{item.class}}-text text-accent-3

{{item.class}} accent-4

{{item.class}}-text text-accent-4

Font Styles and weights

The class on the left dictates the behavior on the right

fw100

fw200

fw300

fw400

fw500

fw600

fw700

fw800

bold

italic

Text positioning classes need to be applied to the div that contains the text

left

center

right

Font Sizes

Cutter Waves has multiple font sizes that are based on standard sizes. They can be accessed by using a class that stargts with "f" and is followed by the size in pixels. .f6{font-size: 6px!important}

f10

f11

f12

f14

f16

f18

f20

f22

f24

f26

f28

f30

f32

f34

f36

f38

f40

f48

f64