Embedded Files
The Suite Fleet Flagship lessons include a large variety of minor, but helpful classes. They may not work in all places, but are worth a try.
Display, Visibility, and Opacity
Display, Visibility, and Opacity
Display
Display
The "display" collection of classes can change the display style of an element.
Custom CSS Class
Hides element, will not preserve the space
display-none
Displays element inline with text
display-inline
Displays element inline with text and retains sizing
display-inline-block
Displays element as a block
display-block
Visibility
Visibility
Visibility hides the element while preserving the space
Custom CSS Class
Hides element
visibility-hidden
Shows Element if visibility is hidden
visibility-visible
Opacity
Opacity
The "opacity" collection of classes can change the amount an element is faded.
Custom CSS Class
opacity0 - Element is fully transparent
opacity05
opacity10
opacity15
opacity20
opacity40
opacity60
opacity80
opacity100 - Element is fully opaque
Float
Float
The "float" collection of classes specifies alignment of an element inline with content
Custom CSS Class
Aligns an element to the left and inline with content
float-left
Aligns an element to the rightand inline with content
float-right
Removes float if needed
float-none
Same thing??
clearfix
Transformation
Transformation
Transformation classes allow you to scale, flip, rotate, skew, and translate elements
Scale
Scale
Element scales in size from the center. It stays in place and may extend into nearby content.
Custom CSS Class
scalePercent25 - Scales element down to a quarter of the orignal size
scalePercent50
scalePercent75
scalePercent100 - Original size of element
scalePercent150
scalePercent175
scalePercent200 - Scales element up to double the original size
Flip
Flip
Element flips along an axis
Flips element along the x-axis
flip-horizontal
Flips element along the y-axis
flip-vertical
Flips element along the x and y axis
.flip-both
Rotate
Rotate
Element rotates around the center. It stays in place and may extend into nearby content.
Rotate element clockwise
Custom CSS Class
rotate0 - Original orientation (0 degrees)
rotate5
rotate10
rotate15
rotate20
...
repeats in increments of 5
...
rotate85
rotate90
Rotate element counter-clockwise
Custom CSS Class
rotateNeg0 - Original orientation (0 degrees)
rotateNeg5
rotateNeg10
rotateNeg15
rotateNeg20
...
repeats in increments of 5
...
rotateNeg85
rotateNeg90
Skew
Skew
Element skews giving it a slanted look.
Skew to the left
Custom CSS Class
skewX-left01 - Skews 1 degree to the left
skewX-left02
skewX-left03
skewX-left04
skewX-left05
skewX-left06
skewX-left07
skewX-left08
skewX-left09
skewX-left10
Skew to the right
Custom CSS Class
skewX-right01 - Skews 1 degree to the right
skewX-right02
skewX-right03
skewX-right04
skewX-right05
skewX-right06
skewX-right07
skewX-right08
skewX-right09
skewX-right10
Translate
Translate
Moves an element around it's current position based on it's size.
Translate up
Custom CSS Class
translateY-up0
translateY-up25
translateY-up33
translateY-up50
translateY-up66
translateY-up75
translateY-up100
Translate right
Custom CSS Class
translateX-right0
translateX-right25
translateX-right33
translateX-right50
translateX-right66
translateX-right75
translateX-right100
Translate down
Custom CSS Class
translateY-down0
translateY-down25
translateY-down33
translateY-down50
translateY-down66
translateY-down75
translateY-down100
Translate left
Custom CSS Class
translateX-left0
translateX-left25
translateX-left33
translateX-left50
translateX-left66
translateX-left75
translateX-left100
Sizing
Sizing
Width
Width
The "width" collection of classes sets the width of an element. Should even override the value give while in authoring.
Custom CSS Class
Pixels
w-0px
w-5px
w-10px
w-15px
w-20px
...
repeats in increments of 5
...
w-445px
w-450px
Percent
w-0percent
w-5percent
w-10percent
w-15percent
w-20percent
...
repeats in increments of 5
...
w-95percent
w-100percent
Viewport
w-0vw
w-5vw
w-10vw
w-15vw
w-20vw
...
repeats in increments of 5
...
w-95vw
w-100vw
Height
Height
The "height" collection of classes sets the height of an element. Should even override the value give while in authoring.
Custom CSS Class
Pixels
h-0
h-5
h-10
h-15
h-20
...
repeats in increments of 5
...
h-445
h-450
Percent
h-0percent
h-5percent
h-10percent
h-15percent
h-20percent
...
repeats in increments of 5
...
h-95percent
h-100percent
Viewport
h-0vh
h-5vh
h-10vh
h-15vh
h-20vh
...
repeats in increments of 5
...
h-95vh
h-100vh
Margin, Padding, and Border
Margin, Padding, and Border
Margin
Margin
The "margin" collection of classes adds space to the outside of an element. The number in the class name is in pixels
Custom CSS Class
All sides
m-0
m-5
m-10
m-15
m-20
...
repeats in increments of 5
...
m-195
m-200
Top
mt-0
mt-5
mt-10
mt-15
mt-20
...
repeats in increments of 5
...
mt-195
mt-200
Right
mr-0
mr-5
mr-10
mr-15
mr-20
...
repeats in increments of 5
...
mr-195
mr-200
Bottom
mb-0
mb-5
mb-10
mb-15
mb-20
...
repeats in increments of 5
...
mb-195
mb-200
Left
ml-0
ml-5
ml-10
ml-15
ml-20
...
repeats in increments of 5
...
ml-195
ml-200
Padding
Padding
The "padding" collection of classes adds space to the inside of an element. The number in the class name is in pixels
Custom CSS Class
All sides
p-0
p-5
p-10
p-15
p-20
p-30
p-40
Top
pt-0
pt-5
pt-10
pt-15
pt-20
pt-30
pt-40
Right
pr-0
pr-5
pr-10
pr-15
pr-20
pr-30
pr-40
Bottom
pb-0
pb-5
pb-10
pb-15
pb-20
pb-30
pb-40
Left
pl-0
pl-5
pl-10
pl-15
pl-20
pl-30
pl-40
Border
Border
The "border" collection of classes adds or removes a solid 1px gray border to the outside of an element
Custom CSS Class
Adds a border
All sides
border
Top
border-top
Right
border-right
Bottom
border-bottom
Left
border-left
Removes a border
All sides
border-0
Top
border-top-0
Right
border-right-0
Bottom
border-bottom-0
Left
border-left-0
Positioning
Positioning
Position Type
Position Type
The "position" collection of classes can change the positioning type, and then set the location of an element (see below)
Custom CSS Class
default
position-default
-or-
position-static
inherit
position-inherit
initial
position-initial
relative
position-relative
absolute
position-absolute
fixed
position-fixed
Position in Pixels
Position in Pixels
You can place an element onscreen using pixels as coordinates. You can even mix and match.
For example t-0 l-20 will place an element 0 pixels from the top, and 20 pixels from the left.
Top
t-0px
t-5px
t-10px
t-15px
t-20px
t-25px
...
repeats in increments of 5
...
t-495px
t-500px
Right
r-0px
r-5px
r-10px
r-15px
r-20px
r-25px
...
repeats in increments of 5
...
r-495px
r-500px
Bottom
b-0px
b-5px
b-10px
b-15px
b-20px
b-25px
...
repeats in increments of 5
...
b-495px
b-500px
Left
l-0px
l-5px
l-10px
l-15px
l-20px
l-25px
...
repeats in increments of 5
...
l-495px
l-500px
Position in Percent
Position in Percent
You can place an element onscreen using percentages. For example, l-50percent will place an element half-way across.
Pro Tip
The following set of classes will center an element: position-absolute l-50percent t-50percent translate-center
Top
t-0percent
t-5percent
t-10percent
t-15percent
t-20percent
t-25percent
...
repeats in increments of 5
...
t-95percent
t-100percent
Right
r-0percent
r-5percent
r-10percent
r-15percent
r-20percent
r-25percent
...
repeats in increments of 5
...
r-95percent
r-100percent
Bottom
b-0percent
b-5percent
b-10percent
b-15percent
b-20percent
b-25percent
...
repeats in increments of 5
...
b-95percent
b-100percent
Left
l-0percent
l-5percent
l-10percent
l-15percent
l-20percent
l-25percent
...
repeats in increments of 5
...
l-95percent
l-100percent
Image
Image
When in a Classic Layout screen, images without Class names will stretch to the size you enter.
Cover
Cover
Scales an image to fill within the center of its container. Requires a defined height.
Custom CSS Class
image-cover
Contain
Contain
Scales an image to fit within the center of its container.
Custom CSS Class
image-contain
Pixelate
Pixelate
Sharpens the blur of smaller images that are scaled up. Most commonly used for pixel art.
Custom CSS Class
image-pixelate
Rounded Corners
Rounded Corners
The "rounded corners" collection of classes can set the corners of an element to sharp or rounded
Custom CSS Class
Removes rounded corners
rounded-0
Crops element within a ellipse.
rounded-ellipse
Crops element within a pill-shape.
rounded-circle
Page updated
Report abuse