Helper classes

    imagePersonally, sometimes, when making a regular page or changing an existing page, I need (or just want to) add a few simple style options. I don’t really want to write a style definition in the markup, not only because it is a set of a fairly long line, 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 every single CSS-style file, the same style classes sometimes lie on the same line. For a long time I was going to define for myself a certain library with a set of such styles and with the names established forever. And this is the result.

    xclasses.css


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

    /*

    "w-" -- width

    "t-" -- text

    "b-" -- block

    "l-" -- list

    */

    .clear-both

    {

    clear: both;

    }

    .w-full

    {

    width: 100%;

    }

    .w-half

    {

    width: 50%;

    }

    /* Block */

    .b-inline

    {

    display: inline;

    }

    .b-center

    {

    margin: 0 auto;

    }

    .b-float

    {

    float: left;

    }

    .b-floatr

    {

    float: right;

    }

    /* Text */

    .t-right

    {

    text-align: right;

    }

    .t-left

    {

    text-align: left;

    }

    .t-center

    {

    text-align: center;

    }

    .t-middle

    {

    vertical-align: middle;

    }

    .t-bold

    {

    font-weight: bold;

    }

    /* State */

    .error

    {

    color: #F00;

    }

    .warn

    {

    color: #FF0;

    }

    .ok

    {

    color: #0F0;

    }

    .hidden

    {

    display: none;

    }

    /* List */

    ul.l-nostyle

    {

    list-style-type: none;

    }

    ul.l-nopad,

    ul.l-nopad > li

    {

    padding: 0;

    margin: 0;

    }

    ul.l-flat > li

    {

    display: inline;

    }

    /* Border */

    .border-all > *,

    .border

    {

    border: solid 1px;

    }

    /* Links */

    .lnk-nounderline

    {

    text-decoration: none;

    }

    .lnk-border

    {

    text-decoration: none;

    border-bottom: dashed 1px;

    }

    /**/

    .enum

    {

    padding-left: 10px;

    }

    Explanations


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

    This set was made for itself, until it includes many other necessary styles. But this is a matter of time and desire, at the moment, this set satisfies me. For my own use, I suppose, it may be necessary to change constant values, for example, for the ".enum" class. If anyone finds this set of classes interesting, I suggest adding or improving it.

    PS: I ask all opponents of creating their bikes to pass by, I know your opinion in advance


    Also popular now: