📜 ⬆️ ⬇️

Helper classes

image Personally, I sometimes need to add (or simply want to) add a few simplest style parameters when creating a regular page or changing an existing page. I do not really want to write the definition of style in the markup, not only because it is a set of a long enough string, but also because this definition can then remain in the markup forever (as they say: there is nothing more permanent than temporary). In addition, in each separate CSS-style file, sometimes the same style classes lie in one line. For a long time I was going to define for myself a certain library with a set of such styles and with names forever established. And so this was the result.

xclasses.css


A primitive demonstration of the use of these classes is available at this address .

/*<br/>
"w-" -- width<br/>
"t-" -- text<br/>
"b-" -- block<br/>
"l-" -- list<br/>
*/
<br/>
.clear-both <br/>
{ <br/>
clear : both ;<br/>
} <br/>
.w-full <br/>
{ <br/>
width : 100 % ;<br/>
} <br/>
.w-half <br/>
{ <br/>
width : 50 % ;<br/>
} <br/>
/* Block */ <br/>
.b-inline <br/>
{ <br/>
display : inline ;<br/>
} <br/>
.b-center <br/>
{ <br/>
margin : 0 auto ;<br/>
} <br/>
.b-float <br/>
{ <br/>
float : left ; <br/>
} <br/>
.b-floatr <br/>
{ <br/>
float : right ;<br/>
} <br/>
/* Text */ <br/>
.t-right <br/>
{ <br/>
text-align : right ;<br/>
} <br/>
.t-left <br/>
{ <br/>
text-align : left ;<br/>
} <br/>
.t-center <br/>
{ <br/>
text-align : center ;<br/>
} <br/>
.t-middle <br/>
{ <br/>
vertical-align : middle ;<br/>
} <br/>
.t-bold <br/>
{ <br/>
font-weight : bold ;<br/>
} <br/>
/* State */ <br/>
.error <br/>
{ <br/>
color : #F00 ;<br/>
} <br/>
.warn <br/>
{ <br/>
color : #FF0 ;<br/>
} <br/>
.ok <br/>
{ <br/>
color : #0F0 ;<br/>
} <br/>
.hidden <br/>
{ <br/>
display : none ;<br/>
} <br/>
/* List */ <br/>
ul .l-nostyle <br/>
{ <br/>
list-style-type : none ; <br/>
} <br/>
ul.l-nopad , <br/>
ul .l-nopad > li<br/>
{ <br/>
padding : 0;<br/>
margin : 0;<br/>
} <br/>
ul .l-flat > li<br/>
{ <br/>
display : inline ;<br/>
} <br/>
/* Border */ <br/>
.border-all > *, <br/>
.border <br/>
{ <br/>
border : solid 1px ;<br/>
} <br/>
/* Links */ <br/>
.lnk-nounderline <br/>
{ <br/>
text-decoration : none ;<br/>
} <br/>
.lnk-border <br/>
{ <br/>
text-decoration : none ;<br/>
border-bottom : dashed 1px ;<br/>
} <br/>
/**/ <br/>
.enum <br/>
{ <br/>
padding-left : 10px ;<br/>
}

Explanations


What is it for. Personally, I need these classes in the process of preparing the markup, in the process of working on the pages.
When it should not be used. The final version of your pages should not contain these classes or should contain them in a minimum quantity, since, in an amicable way, all elements of the pages should have their classes with a strict definition of styles.

This set was made by itself, until it includes many other necessary styles. But it is a matter of time and desire, for the moment, this set satisfies me. For my own use, I believe, it may be necessary to change constant values, for example, for the class ".enum". If anyone finds this set of classes interesting, I suggest adding or improving it.
')
PS: I ask all opponents of building their bikes to pass by, I know your opinion in advance

Source: https://habr.com/ru/post/47305/


All Articles