Structural adjustable classes

At times during web development process, developer comes across situations where she/he need to adjust html elements. Consulting UX guy at each adjustment is waste of time. Structural adjustable classes helps developer to make changes on his own.

Below are some handy classes, developers can use combinations of them to achieve desired layout.

To make elements look clickable

.pointer{
cursor: pointer;
}
----HTML----
<div class="mydiv pointer">Lorem</div>

Variable paddings

.padding10{
padding: 10px;
}
.padding22{
padding: 22px;
}
.padding35{
padding: 35px;
}
----HTML----
<div class="mydiv padding35">Lorem</div>

Same for variable margins

.margin10{
margin: 10px;
}
.margin22{
margin: 22px;
}
----HTML----
<div class="mydiv margin10">Lorem</div>

Set directional padding

.paddingSetRL{
padding-top: 0px;
padding-bottom: 0px;
}
.paddingSetTB{
padding-right: 0px;
padding-left: 0px;
}
.paddingSetT{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
}
.paddingSetR{
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
.paddingSetB{
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
}
.paddingSetL{
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
}

Set padding of 10px from top and bottom only
<div class="mydiv padding10 paddingSetTB">Lorem</div>

Similarly, you can also Nullify padding for a given direction via

.paddingNullT{
padding-top: 0px;
}
.paddingNullR{
padding-right: 0px;
}
.paddingNullB{
padding-bottom: 0px;
}
.paddingNullL{
padding-left: 0px;
}
----HTML----
<div class="mydiv padding10 paddingNullL">Lorem</div>
Or
<div class="mydiv padding10 paddingNullR paddingNullB">Lorem</div>

Same goes for margin

<div class="mydiv margin10 marginNullR marginNullB">Lorem</div>

You may also like

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *