CSS Helpers Builder

By Carlos Maldonado (@choquo)


Lines    Step by    Filename (optional)   

Allow step number (separate by space)    Disallow step number (separate by space)

      Restart

Templates

Wildcard $ will be replaced for the numeric value of each iteration, use {s} to add a string into a classname, and {u} to replace string values inside the css declaration.

Classname
Property name

{s} String to use in classname
{u} String to use in value inside css rule

LG CSS Rule Label for the option (on select component)
Value for the option (on select component)
MD CSS Rule Label for the option (on select component)
Value for the option (on select component)
SM CSS Rule Label for the option (on select component)
Value for the option (on select component)
XS CSS Rule Label for the option (on select component)
Value for the option (on select component)
XSL CSS Rule Label for the option (on select component)
Value for the option (on select component)

LG or DEFAULT

Note that classnames on default doesn't have suffix -lg, usually i don't write for LG because this classes can be placed at the top of your css (so, it's the default size), in some cases other helper classes may need declare the -lg suffix, if this is your case just modify your LG templates adding -lg suffix and rebuild.


/* 
-----------------------------------------------------------------
This file was generated automatically by CSS Helpers Builder Tool
Demo: http://develus.com/github/css-helpers-builder/
Github: https://github.com/choquo/css-helpers-builder
Licence: MIT https://github.com/choquo/css-helpers-builder/blob/master/LICENSE
Author: Carlos Maldonado @choquo
Build date: 2026-08-18
*/

.mt2px{ margin-top: 2px !important; }
.mt4px{ margin-top: 4px !important; }
.mt6px{ margin-top: 6px !important; }
.mt8px{ margin-top: 8px !important; }
.mt10px{ margin-top: 10px !important; }



MD

/* MD Tablet, ipad portrait*/
/*@media only screen and (max-width : 992px){*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
	.mt2px-md{ margin-top: 2px !important; }
	.mt4px-md{ margin-top: 4px !important; }
	.mt6px-md{ margin-top: 6px !important; }
	.mt8px-md{ margin-top: 8px !important; }
	.mt10px-md{ margin-top: 10px !important; }

}



SM

/* SM Tablet, ipad landscape*/ 
/*@media only screen and (max-width : 768px){*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.mt2px-sm{ margin-top: 2px !important; }
	.mt4px-sm{ margin-top: 4px !important; }
	.mt6px-sm{ margin-top: 6px !important; }
	.mt8px-sm{ margin-top: 8px !important; }
	.mt10px-sm{ margin-top: 10px !important; }

}



XS

/* XS Mobile portrait*/
/*@media only screen and (max-width : 480px){*/
@media only screen and (max-width: 767px) {
	.mt2px-xs{ margin-top: 2px !important; }
	.mt4px-xs{ margin-top: 4px !important; }
	.mt6px-xs{ margin-top: 6px !important; }
	.mt8px-xs{ margin-top: 8px !important; }
	.mt10px-xs{ margin-top: 10px !important; }

}



XSL

/* XSL Mobile landscape*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.mt2px-xsl{ margin-top: 2px !important; }
	.mt4px-xsl{ margin-top: 4px !important; }
	.mt6px-xsl{ margin-top: 6px !important; }
	.mt8px-xsl{ margin-top: 8px !important; }
	.mt10px-xsl{ margin-top: 10px !important; }

}