4

I am looking for a smarter way for integrating bootstrap classes into my less file ?

What I do at the moment is ,but this has the drawback that not every "subclass" or connected class is going to be inherit for my own control:

.BWForm_form-control {
    .form-control;
}

I solved that issue( connected classes) I took the classes from bootstrap and adjust it to my control:

  /*#region ".BWForm_form-control" addition from bootstrap */

    .BWForm_form-control:-moz-placeholder {
        color: #999999;
    }

    .BWForm_form-control::-moz-placeholder {
        color: #999999;
    }

    .BWForm_form-control:-ms-input-placeholder {
        color: #999999;
    }

    .BWForm_form-control::-webkit-input-placeholder {
        color: #999999;
    }

    .BWForm_form-control:focus {
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }

    .BWForm_form-control[disabled],
    .BWForm_form-control[readonly],
    fieldset[disabled] .BWForm_form-control {
        cursor: not-allowed;
        background-color: #eeeeee;
    }

textarea.BWForm_form-control {
    height: auto;
}

.has-warning .BWForm_form-control {
    border-color: #c09853;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

    .has-warning .BWForm_form-control:focus {
        border-color: #a47e3c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
    }

.has-error .BWForm_form-control {
    border-color: #b94a48;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

    .has-error .BWForm_form-control:focus {
        border-color: #953b39;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
    }

.has-success .BWForm_form-control {
    border-color: #468847;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

    .has-success .BWForm_form-control:focus {
        border-color: #356635;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
    }

@media (min-width: 768px) {
    .form-inline .BWForm_form-control {
        display: inline-block;
    }
}

.input-group .BWForm_form-control {
    width: 100%;
    margin-bottom: 0;
}

.input-group-lg > .BWForm_form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

select.input-group-lg > .form-control,
select.input-group-lg > .input-group-addon,
select.input-group-lg > .input-group-btn > .btn {
    height: 45px;
    line-height: 45px;
}


textarea.input-group-lg > .BWForm_form-control,
textarea.input-group-lg > .input-group-addon,
textarea.input-group-lg > .input-group-btn > .btn {
    height: auto;
}


.input-group-sm > .BWForm_form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

select.input-group-sm > .BWForm_form-control,
select.input-group-sm > .input-group-addon,
select.input-group-sm > .input-group-btn > .btn {
    height: 30px;
    line-height: 30px;
}

textarea.input-group-sm > .BWForm_form-control,
textarea.input-group-sm > .input-group-addon,
textarea.input-group-sm > .input-group-btn > .btn {
    height: auto;
}

.input-group-addon,
.input-group-btn,
.input-group .BWForm_form-control {
    display: table-cell;
}

    .input-group-addon:not(:first-child):not(:last-child),
    .input-group-btn:not(:first-child):not(:last-child),
    .input-group .BWForm_form-control:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    .input-group .BWForm_form-control:first-child,
    .input-group-addon:first-child,
    .input-group-btn:first-child > .btn,
    .input-group-btn:first-child > .dropdown-toggle,
    .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

        .input-group .BWForm_form-control:last-child,
        .input-group-addon:last-child,
        .input-group-btn:last-child > .btn,
        .input-group-btn:last-child > .dropdown-toggle,
        .input-group-btn:first-child > .btn:not(:first-child) {
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

@media (min-width: 768px) {
    .navbar-form .BWForm_form-control {
        display: inline-block;
    }
}
/*#endregion */

To guarantee the full functionality of bootstrap for my personal controls. But I am sure that is not a clever, stable soultion it's just a fix and temporary solution.

But what is the best approach to create personal controls inherited from bootstrap(or even from another css/less file) whith all the functionality ?

Some Background informations for my project: Important NuGet Pakages:

  • Bootstrap (v 3.0.0 ) -> imported in the master page
  • Bootstrap.Less (v 2.3.2 ) ->these files I use for impor in "Site.less")
  • dotless (v 1.4.0.0)
  • html5shiv (v 0.1.0.8)
  • Modernizr (v 2.6.2) -> imported in the master page
  • Respond JS (v 1.2.0)

Actually I am not using this "Bootstrap.Less (v 2.3.2 )"-nuget package, i just took my bootstrap.css and renamed it to bootstrap.less" and used it to inherit from that new less-file.

Because I still have some issues whith it:

Visual Studio 2013

  • MVC5

Best regards Martin

Community
  • 1
  • 1
user254197
  • 883
  • 2
  • 9
  • 31
  • mmmh, what could have gone wrong ?... – user254197 Apr 10 '14 at 14:42
  • 2
    Well, in short I'd say there's no way to make it better. Simply because Bootstrap is not really meant to be used that way. Bootstrap classes are primarily designed to be used directly within HTML in the first place, and though Less allows you to re-use existing CSS classes as mixins (and provides other related features like `(reference)` and `extend`) this does not automatically makes such classes to be actually reusable. – seven-phases-max Apr 10 '14 at 20:09
  • 2
    The important thing to realize is that (roughly speaking) the Bootstrap is just a customizable theme/grid framework first of all and not a CSS component construction kit / building-blocks library. Strictly speaking the only "officially" reusable components there are the mixins defined in `mixins.less` and similar stuff (like variables etc.). – seven-phases-max Apr 10 '14 at 20:10
  • 2
    So in summary, no, there's no universal method to build your own classes using Bootstrap classes that would be "clever" and "stable" (Well, there're a lot of examples of such things here at the SO and some are actually "clever" and "elegant" but almost every case needs its own approach, trickery and deep understanding of Bootstrap internals). – seven-phases-max Apr 10 '14 at 20:10
  • 1
    For the particular `.form-control` case above the better solution would be to use [`extend`](http://lesscss.org/features/#extend-feature) feature instead, but you will have to switch from `dotless` to some more up-to-date Less tool (e.g. for the Visual Studio the common one is Web Essentials 2013). – seven-phases-max Apr 10 '14 at 20:38
  • ok, ty I will keep this in mind :) – user254197 Apr 11 '14 at 09:16
  • @user254197 Please answer this question yourself or remove it. Thanks :) – hitautodestruct May 28 '14 at 12:01
  • see also: http://stackoverflow.com/questions/23840711/bootstrap-3-with-less-how-to-handle-bootstraps-nested-rules/24643709, possible duplicate – Bass Jobsen Jul 10 '14 at 21:36

1 Answers1

0

You can simplify this using extend:

.BWForm_form-control:extend(.form-control all);
Rudi
  • 2,987
  • 1
  • 12
  • 18