Skip to content

CSS Classes

Bugfish CSS Framework simplifies web design with a robust set of pre-built classes for fast, responsive layouts. Speed up development and create professional designs effortlessly. To use, include the xcss_xfpe.css file from the css folder.

Add _f to a class name to apply !important automatically.

Column/Rows

Class Description
.xfpe_row Row Element (Put Col Elements in it to be placed next to each other)
.xfpe_col Row Element without width configuration
.xfpe_col-1 Row Element 1/12 width
.xfpe_col-2 Row Element 2/12 width
.xfpe_col-3 Row Element 3/12 width
.xfpe_col-4 Row Element 4/12 width
.xfpe_col-5 Row Element 5/12 width
.xfpe_col-6 Row Element 6/12 width
.xfpe_col-7 Row Element 7/12 width
.xfpe_col-8 Row Element 8/12 width
.xfpe_col-9 Row Element 9/12 width
.xfpe_col-10 Row Element 10/12 width
.xfpe_col-11 Row Element 11/12 width
.xfpe_col-12 Row Element 12/12 width

Background Colors

Class Description Possible Values
.xfpe_background* Sets Background Color (Replace * with possible value) red, yellow, green, blue, orange, purple, pink, brown, black, white, gray, cyan, magenta, lime
.xfpe_background*_f Forces Background Color (Replace * with possible value) red, yellow, green, blue, orange, purple, pink, brown, black, white, gray, cyan, magenta, lime

Text Colors

Class Description Possible Values
.xfpe_color* Sets Text Color (Replace * with possible value) red, yellow, green, blue, orange, purple, pink, brown, black, white, gray, cyan, magenta, lime
.xfpe_color*_f Forces Text Color (Replace * with possible value) red, yellow, green, blue, orange, purple, pink, brown, black, white, gray, cyan, magenta, lime

Margin Classes

Padding / Margin Class Description Possible Values Max Value of N
.xfpe_paddingauto Sets padding to "auto" for all sides
.xfpe_nopadding Removes padding from all sides (sets to 0px)
.xfpe_nopaddingtop Removes padding from the top (sets padding-top to 0px)
.xfpe_nopaddingbottom Removes padding from the bottom (sets padding-bottom to 0px)
.xfpe_nopaddingleft Removes padding from the left (sets padding-left to 0px)
.xfpe_nopaddingright Removes padding from the right (sets padding-right to 0px)
.xfpe_paddingleft{N}px Sets the left padding of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_paddingright{N}px Sets the right padding of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_paddingleftm{N}px Sets a negative left padding of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_paddingrightm{N}px Sets a negative right padding of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_paddingbottom{N}px Sets padding-bottom to a specific value in pixels (Xpx) N: 5, 10, 15, ... 150
.xfpe_paddingbottomm{N}px Sets negative padding-bottom to a specific value in pixels (-Xpx) N: 5, 10, 15, ... 150
.xfpe_paddingtop{N}px Sets padding-top to a specific value in pixels (Xpx) N: 5, 10, 15, ... 150
.xfpe_paddingtopm{N}px Sets negative padding-top to a specific value in pixels (-Xpx) N: 5, 10, 15, ... 150
.xfpe_marginauto Sets margin to "auto" for all sides
.xfpe_nomargin Removes margin from all sides (sets to 0px)
.xfpe_nomargintop Removes margin from the top (sets margin-top to 0px)
.xfpe_nomarginbottom Removes margin from the bottom (sets margin-bottom to 0px)
.xfpe_nomarginleft Removes margin from the left (sets margin-left to 0px)
.xfpe_nomarginright Removes margin from the right (sets margin-right to 0px)
.xfpe_marginleft{N}px Sets the left margin of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_marginright{N}px Sets the right margin of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_marginleftm{N}px Sets a negative left margin of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_marginrightm{N}px Sets a negative right margin of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_margintop{N}px Sets the top margin of the element to N pixels. N: 5, 10, 15, ... 150
.xfpe_margintopm{N}px Sets negative margin-top to a specific value in pixels (-Xpx) N: 5, 10, 15, ... 150
.xfpe_marginbottom{N}px Sets margin-bottom to a specific value in pixels (Xpx) N: 5, 10, 15, ... 150
.xfpe_marginbottomm{N}px Sets negative margin-bottom to a specific value in pixels (-Xpx) N: 5, 10, 15, ... 150

Width/Height Classes

Width / Height Class Description Possible Values Max Value of N
.xfpe_width{N}px Sets the element's width to N pixels. N: 25, 50, 75, 100, ... 1000
.xfpe_height{N}px Sets the element's height to N pixels. N: 25, 50, 75, 100, ... 1000
.xfpe_width{N}pct Sets the element's width to N percentage. N: 25, 50, 75, 100, ... 100
.xfpe_height{N}pct Sets the element's height to N percentage. N: 25, 50, 75, 100, ... 100
.xfpe_maxwidth{N}pct Sets the element's width to N percentage of parent. N: 25, 50, 100 100
.xfpe_maxwidth{N}px Sets the maximum width of the element to N pixels. N: 50, 100, 150, ... 1000
.xfpe_minwidth{N}px Sets the minimum width of the element to N pixels. N: 50, 100, 150, ... 1000
.xfpe_minwidth{N}pct Sets the minimum width of the element to N percentage of parent. N: 25, 50, 75, 100, ... 100

Font Size

Font Size Class Description Possible Values Max Value of N
.xfpe_fontsize{N}px Sets font size to N pixels. N: 10, 20, 30, 40, 50, ... 100
.xfpe_fontsize{N}pct Sets font size to N percentage. N: 25, 50, 75, 100, ... 100

Display

Class Name Description
.xfpe_dispinlineblock display: inline-block;
.xfpe_dispinline display: inline;
.xfpe_dispblock display: block;
.xfpe_dispnone display: none; (Hides the element)
.xfpe_dispflex display: flex; (Enables flexbox layout)
.xfpe_dispgrid display: grid; (Enables grid layout)
.xfpe_dispinlineflex display: inline-flex; (Inline flexbox layout)
.xfpe_dispinlinegrid display: inline-grid; (Inline grid layout)

Float

Class Name Description
.xfpe_floatleft float: left;
.xfpe_floatleft_f float: left !important;
.xfpe_floatright float: right;
.xfpe_floatright_f float: right !important;
.xfpe_floatnone float: none; (Clears any previous float)
.xfpe_floatinherit float: inherit; (Inherits the float property)
.xfpe_floatinitial float: initial; (Sets to default value)
.xfpe_floatunset float: unset; (Resets to inherited value)

Overflow

Class Name Description
.xfpe_overflowhidden overflow: hidden;
.xfpe_overflowhidden_f overflow: hidden !important;
.xfpe_overflowscroll overflow: scroll;
.xfpe_overflowscroll_f overflow: scroll !important;
.xfpe_overflowvisible overflow: visible; (Shows content overflowing)
.xfpe_overflowauto overflow: auto; (Adds scrollbars if needed)
.xfpe_overflowxhidden overflow-x: hidden;
.xfpe_overflowxhidden_f overflow-x: hidden !important;
.xfpe_overflowxscroll overflow-x: scroll;
.xfpe_overflowxscroll_f overflow-x: scroll !important;
.xfpe_overflowyhidden overflow-y: hidden;
.xfpe_overflowyhidden_f overflow-y: hidden !important;
.xfpe_overflowyscroll overflow-y: scroll;
.xfpe_overflowyscroll_f overflow-y: scroll !important;

Text Adjustments

Class Name Description
.xfpe_textbreakall white-space: pre; word-break: break-all;
.xfpe_textbreakall_f white-space: pre !important; word-break: break-all !important;
.xfpe_textnowrap white-space: nowrap;
.xfpe_textnowrap_f white-space: nowrap !important;
.xfpe_textuppercase text-transform: uppercase;
.xfpe_textuppercase_f text-transform: uppercase !important;
.xfpe_textlowercase text-transform: lowercase;
.xfpe_textlowercase_f text-transform: lowercase !important;
.xfpe_textcapitalize text-transform: capitalize;
.xfpe_textcapitalize_f text-transform: capitalize !important;

Align Adjustments

Class Name Description
.xfpe_aligncenter text-align: center;
.xfpe_aligncenter_f text-align: center !important;
.xfpe_alignleft text-align: left;
.xfpe_alignleft_f text-align: left !important;
.xfpe_alignright text-align: right;
.xfpe_alignright_f text-align: right !important;
.xfpe_alignjustify text-align: justify;
.xfpe_alignjustify_f text-align: justify !important;
.xfpe_verticalalignmiddle vertical-align: middle;
.xfpe_verticalalignmiddle_f vertical-align: middle !important;
.xfpe_verticalaligntop vertical-align: top;
.xfpe_verticalaligntop_f vertical-align: top !important;
.xfpe_verticalalignbottom vertical-align: bottom;
.xfpe_verticalalignbottom_f vertical-align: bottom !important;
.xfpe_alignbaseline vertical-align: baseline;
.xfpe_alignbaseline_f vertical-align: baseline !important;

Cursor

Class Name Description
.xfpe_cursorpointer cursor: pointer;
.xfpe_cursorpointer_f cursor: pointer !important;
.xfpe_cursordefault cursor: default; (Default cursor, usually an arrow)
.xfpe_cursorauto cursor: auto; (Automatically sets cursor based on the element)
.xfpe_cursorcrosshair cursor: crosshair; (Crosshair cursor)
.xfpe_cursorhelp cursor: help; (Help cursor, usually a question mark)
.xfpe_cursormove cursor: move; (Move cursor)
.xfpe_cursornotallowed cursor: not-allowed; (Not-allowed cursor)
.xfpe_cursorprogress cursor: progress; (Progress cursor)
.xfpe_cursortext cursor: text; (Text cursor, usually an I-beam)
.xfpe_cursorwait cursor: wait; (Wait cursor)
.xfpe_cursoralias cursor: alias; (Alias cursor)
.xfpe_cursorcopy cursor: copy; (Copy cursor)
.xfpe_cursorzoomin cursor: zoom-in; (Zoom-in cursor)
.xfpe_cursorzoomout cursor: zoom-out; (Zoom-out cursor)
.xfpe_cursorgrab cursor: grab; (Grab cursor)
.xfpe_cursorgrabbing cursor: grabbing; (Grabbing cursor)

Border

Class Name Description
.xfpe_bordernone border: none;
.xfpe_bordernone_f border: none !important;
.xfpe_outlinenone outline: none;
.xfpe_outlinenone_f outline: none !important;

Position

Class Name Description
.xfpe_absolute position: absolute;
.xfpe_absolute_f position: absolute !important;
.xfpe_fixed position: fixed;
.xfpe_fixed_f position: fixed !important;
.xfpe_relative position: relative;
.xfpe_relative_f position: relative !important;
.xfpe_static position: static;
.xfpe_static_f position: static !important;
.xfpe_sticky position: sticky;
.xfpe_sticky_f position: sticky !important;

Optimization

Class Name Description
.xfpe_t3d -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); (Enables hardware acceleration)
.xfpe_t3d_f -webkit-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important; (Enables hardware acceleration with !important)
.xfpe_borderbox -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; (Includes padding and border in element's total width and height)
.xfpe_borderbox_f -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; (Includes padding and border in element's total width and height with !important)