More Bootstrap Styling to be Available in the Upcoming Toolset Release

   Amir

Announcements

July 18, 2017
37

We’re almost ready with a major update for all Toolset plugins. This new version focuses on theme integration. However, it also includes an important addition to the Bootstrap styling that Toolset offers and we want to make sure it’s not going to cause issues on your sites.

Toolset includes the Bootstrap CSS and will load it by default. This allows you to use Layouts and grid elements in Views, without adding the Bootstrap CSS yourself. Until now, the Bootstrap CSS that shipped with Toolset was partial and only covered the grid elements. Due to popular demand, we’re updating the Bootstrap CSS file that ships with Toolset, to include convenience classes for styling.

Now, you will be able to read the Bootstrap documentation, pick the styling that you like and add these classes to your Toolset-based sites. Everything in the Bootstrap documentation will be available when you build sites with Toolset.

The full list of what we’re adding is here:

bootstrap-styling-additions 
.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4
}
@media (min-width: 768px) {
    .lead {
        font-size: 21px
    }
}
.text-left {
    text-align: left
}
.text-right {
    text-align: right
}
.text-center {
    text-align: center
}
.text-justify {
    text-align: justify
}
.text-nowrap {
    white-space: nowrap
}
.text-lowercase {
    text-transform: lowercase
}
.text-uppercase, .initialism {
    text-transform: uppercase
}
.text-capitalize {
    text-transform: capitalize
}
.text-muted {
    color: #777
}
.text-primary {
    color: #337ab7
}
a.text-primary:hover, a.text-primary:focus {
    color: #286090
}
.text-success {
    color: #3c763d
}
a.text-success:hover, a.text-success:focus {
    color: #2b542c
}
.text-info {
    color: #31708f
}
a.text-info:hover, a.text-info:focus {
    color: #245269
}
.text-warning {
    color: #8a6d3b
}
a.text-warning:hover, a.text-warning:focus {
    color: #66512c
}
.text-danger {
    color: #a94442
}
a.text-danger:hover, a.text-danger:focus {
    color: #843534
}
.bg-primary {
    color: #fff
}
.bg-primary {
    background-color: #337ab7
}
a.bg-primary:hover, a.bg-primary:focus {
    background-color: #286090
}
.bg-success {
    background-color: #dff0d8
}
a.bg-success:hover, a.bg-success:focus {
    background-color: #c1e2b3
}
.bg-info {
    background-color: #d9edf7
}
a.bg-info:hover, a.bg-info:focus {
    background-color: #afd9ee
}
.bg-warning {
    background-color: #fcf8e3
}
a.bg-warning:hover, a.bg-warning:focus {
    background-color: #f7ecb5
}
.bg-danger {
    background-color: #f2dede
}
a.bg-danger:hover, a.bg-danger:focus {
    background-color: #e4b9b9
}
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee
}
.list-unstyled, .list-inline {
    margin-top: 0;
    margin-bottom: 10px
}
.list-unstyled ul, .list-unstyled ol, .list-inline ul, .list-inline ol {
    margin-bottom: 0
}
.list-unstyled {
    padding-left: 0;
    list-style: none
}
.list-inline {
    padding-left: 0;
    list-style: none;
    margin-left: -5px
}
.list-inline > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px
}
.dl-horizontal {
    margin-top: 0;
    margin-bottom: 20px
}
.dl-horizontal dd {
    margin-left: 0
}
.dl-horizontal dd:before, .dl-horizontal dd:after {
    content: " ";
    display: table
}
.dl-horizontal dd:after {
    clear: both
}
.dl-horizontal dt {
    font-weight: bold
}
@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .dl-horizontal dd {
    margin-left: 180px
  }
}
abbr[title], abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777
}
.initialism {
    font-size: 90%
}
.blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee
}
.blockquote p:last-child, .blockquote ul:last-child, .blockquote ol:last-child {
    margin-bottom: 0
}
.blockquote footer {
    display: block;
    font-size: 80%;
    line-height: 1.42857;
    color: #777
}
.blockquote footer:before {
    content: '\2014 \00A0'
}
.blockquote-reverse {
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid #eee;
    border-left: 0;
    text-align: right
}
.blockquote-reverse footer:before, .blockquote-reverse small:before, .blockquote-reverse .small:before {
    content: ''
}
.blockquote-reverse footer:after, .blockquote-reverse small:after, .blockquote-reverse .small:after {
    content: '\00A0 \2014'
}

Want to test with a beta version?

You can try this right now. Go to your Toolset account, click on Downloads and switch to Beta. Download the betas of Types, Views, CRED and Layouts. You will see what’s coming in the next release, but please double-check that the updated CSS doesn’t modify anything on you sites.

Feedback?

We’re adding this CSS in order to make it easier to style sites. If you think that any of the new styling may conflict with your existing designs, please let us know by leaving a comment.

 

Comments 37 Responses

    • Toolset will load the Bootstrap CSS for all the front-end pages of your sites. I suggest to check and see that the right CSS is loaded there. If so, you can definitely use it.

      • Thanks Amir. It’s more the fact that there are no classes declared in the login form so there’s no Bootstrap styling for that and no way of adding it.

  2. All the user management is in diaper with respect to the memberships plugins of the market.
    For when an update of user management?

  3. I’d rather a choice. I want the Bootstrap grid elements. I usually don’t want a bunch of the rest…specifically their CSS overrides of heading styles, etc. I don’t like to have to add a bunch of CSS with “!important” to change bootstrap.

  5. Thank you for the update on the update Amir! I can’t wait to test StudioPress theme integration without the need for the Genesis integration plugin.

    You mention the ability to select the bootstrap classes we wish to use for our site. Does this mean that only the bootstrap elements we use are loaded to the site/theme CSS and not all of the bootstrap CSS?

    • There’s an option, under Toolset->Settings to choose if you want Toolset to load Bootstrap CSS. If you select it, Toolset will load the CSS file.

  6. It would be a major boon to us as developers (WP site designer/builders) to have SEGMENTS of this CSS be selectable.

    For example, you could have a separate segment (and different INCLUDE files in the build) for:
    – COLORS. Allow us to select one of several predefined color themes (skins) or design our own color theme using a live-demo color picker. You could open up the skins library to contributions from members who put together various themes. As a programmer, I am still miffed that CSS does not (yet) include relative colors, the way they do for relative sizes. Maybe you could do something like that in our selectors.
    – FONTS. Sure, give us default fonts for headers, body text, etc., but allow us to choose a font (using a live-demo picker) for each if we don’t want to use the defaults.
    – SPACINGS. Give us defaults (adjustable) for margins and paddings for all common elements, including the tags for p, blockquote, div, etc.
    – FONT SIZES. I have always thought there should only be one base-size font size; every other size in the style sheet should be in ems. This way, when you change the base size (i.e., font-size:18px;), everything else changes in the cascade. If we do not do this, use a relative size for everything except the base font, then when we want to change sizes, we have to seek out and change everything.

    When it comes down to it, the whole purpose of any tool, including the TOOLSET suite, is to make easier the tasks we need to do, particularly those we do over and over.

    These thoughts are offered in the spirit of helping Toolset be even more useful than it already is.

    • Thanks for the suggestions. Did you have a chance to see the styles that we’re adding to the CSS file?

  8. Doesn’t conflict with my styles, which I prefix. So as long as they don’t conflict with any default Divi theme styles etc then it’s probably fine for me.

  9. Just wondering how this plays out with Themes such as divi that I have mentioned inserts it’s own CSS (I have found pinching of cards etc on mobile using Divi and Bootstrap)?

  10. Have you tested with the7 Theme? It is a premium theme from Themeforest, one of the top sellers month on month. I have had conflicts using the7 Theme with Bootstrap before.

    Will the option to not use Bootstrap at all still be available? I’d quite like to use Bootstrap in Content Templates and Views, but because it clashes with my Theme I tend to use Visual Composer instead

    • We haven’t done detailed testing with The7 theme. You can go to Toolset->Settings and then choose not to load Bootstrap at all.

  11. @amir You mention: “Toolset will load the Bootstrap CSS for all the front-end pages of your sites. I suggest to check and see that the right CSS is loaded there. If so, you can definitely use it.”

    In another response you say: “There’s an option, under Toolset->Settings to choose if you want Toolset to load Bootstrap CSS. If you select it, Toolset will load the CSS file.”

    So to clarify: Will Toolset load its own CSS by default, or do we need to enable it Settings?

    I have many client sites that use Bootstrap as the framework and don’t have the time right now to test the beta version on all of them.

    • Already today, the default is for Toolset to load its own Bootstrap 3 CSS. Now, we are going to add a bit more styling to that CSS. You can control this loading. If you go to Toolset->Settings and scroll down, you will see the options for loading Bootstrap.

      From the feedback that we got here, I realized that it’s too risky to just update a CSS file. So, we’re not going to make it different by default. We’ll add a checkbox that will allow YOU to choose if you want to have these extra styles loaded. Old sites will have ZERO change.

      I hope this helps.

  12. Hi Amir.

    In the next release will there be anything included regarding the post relationships feature? We haven’t heard anything or seen any new demo videos in quite some time.

    Many of us are still patiently awaiting any news! Thanks!

    • Good question. We are 4 weeks now away from a public release of Types with complete support for post relationship.

      This update will include:
      * One-to-many and many-to-many relationship between posts
      * Very much improved performance for any post relationship
      * New admin screens for managing the relationships and the related posts
      * Repeating field groups and post reference fields (using one-to-many relationship under the hood)
      * Consolidation of all ‘fields’ (user, post, taxonomy-term)

      and a few other important changes.

      This will be a fully working beta. I need to check if it includes the migration wizard from the old schema to the new one.

      Once this is ready in Types, it will be a lot faster to complete the support in Views and in CRED.

      Please keep in mind that this version of Types and all future Types versions will only be available for Toolset clients. We will continue maintaining Types on WPORG for bugs and security, but not adding new features there.

      • That all sounds amazing!

        One thing… Would you mind going into a bit more detail as to what you mean by:
        “Consolidation of all ‘fields’ (user, post, taxonomy-term)”

        How do you intend on laying out and presenting all field types? All in a single page?

        Any further details or clarifications would be wonderful. That bit sounds like a serious UX improvement and am looking forward to this as well!!

        You guys seriously rock Amir. Thank you for all you do!

        • I’ll write a separate blog post about Types with a video that shows how it works and what it does. I think that this will be better than listing everything here.

      • Hi Amir,

        Congratulations! Post types relationship overhaul seems to be promising. Specially post reference fields will give us aggregation facility. We are already using wpt_field_options filter.

        I am a lifetime user of wp-types and wpml. I would like to bring your attention towards translations as well. For example, if a taxonomy is translated and we duplicate the post, the translated taxonomy will be selected. Hope this will be the case with post references that are already translated.

        Thanks

    • We’re moving away from our Toolset Starter theme. It will continue getting stability and compatibility updates, but not significant new features.

      Instead, this release of Toolset allows Toolset to work perfectly (not good) with other themes. We are adding all the controls that allow you to achieve designs exactly like you need them with a list of very nice themes. Right now, it’s GeneratePress, OceanWP and Astra.

      This is the first step for theme integration. Toolset will support theme configuration files that allow it to control how themes display templates and archives. We’re going to run this compatibility program with hundreds of popular themes, similarly to the successful compatibility program that we have for WPML.

      I hope that this will give Toolset clients the ability to build rich sites, with any theme, without having to apply hacks to control page content.

      • Oh….I was just about to use it along with Layouts to replace an existing theme on a fairly large site.

        The themes you mentioned are nice but aren’t based on Bootstrap.

  14. Hi folks, nice work including the full bootstrap css.

    I’ve run into one issue while I was playing with the beta layout plugin. I created a two column layout and noticed that when I narrowed the browser window to check the responsive layout adjustments the second column did not line up vertically with the first, it was indented by the 15px padding that in the larger view separates the columns. It looks to me like the css is not removing it for the smaller width settings.

    • Is this related to the changes to the Bootstrap CSS file, or is this just the way Bootstrap works?

  15. I realy hate bootstrap and don’t like being forced to use it. Furthermore, it is really a pain to have your website constantly break with changes such as this with toolset.

    • Obviously, we don’t want your site to break. What is this change breaking for you?

  16. Thank you for the update! Question – installing the beta plugin failed because the plugin already exists. I’m reluctant to disabled or uninstall the original plugins, since that would break the display of content on the site – suggestions? Thanks!

    • The process for updating WordPress plugins is:
      1. Disable the current version
      2. Install the new version
      3. Activate

      Please don’t use beta versions on production sites. If you can test it on a development/staging site, that’s great. Otherwise, best to wait for the production version, which will be ready very soon.

  17. Hello,

    I have a suggestion about “Tag classes” field in cell.
    Now you are using “jQuery Chosen”, The problem is if i want to change any spelling of class name i have to remove full class name and add this again. I think this is not a good practice.

    We don’t need “jQuery Chosen” here just keep a simple text field so that we can add/edit/remove easily. Please make it simple.

    Thank You