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 ) |