Bootstrap: New 'Content' component feature

[sts-ryan-holton]

How many times have you come across a bunch of content within a <div> or an <article> tag with a bunch of <p>, <ul> and possibly even headings and thought to yourself if only there was a simple classname I can add to the div that would prevent me having to add specific classes to all of these elements?

This is an issue I've come across, and whilst I'm sure Bootstrap provides some base default styling, I'm not totally convinced that this is appropriate in most projects.

I was thinking this...

To add a new component under the 'Components' heading on the docs (https://getbootstrap.com/docs/4.1/getting-started/introduction/) called something like: 'Content'

The purpose of this component is to provide a simple method for styling elements within a div or article element, all the user would need to do is add a class called .content to their parent element, and elements within would be styled. I was thinking of adding support for the following HTML elements:

• <p> paragraphs
• <ul>, <ol> and <dl> lists
• <h1> to <h6> headings
• <blockquote> quotes
• <em>, <b> and <strong> tags
• <table> with _relevant child elements of a table_

What's people's opinion on this?

[herbalite]

I've used jquery-ui before and am right now adapting a project to bootstrap. So much where I am coming from with my answer. jquery-ui does what you suggested.

If that component feature should be implemented, make it an entirely optional plug-in.

In short there is too much JS overhead involved, losing design flexibility as well. Also there are always CSS hacks needed to override certain features. Usually I change the component (often omit something, that a JS component would introduce) to accommodate the projects needs

And if JS is off then things look worse, because nothing has the required CSS classes. A hard coded version still looks decent. And then is the issue if something changes.

A better way IMO is to make code pieces of common Bootstrap HTML components in ones preferred editor. Copy the component in, and add the specifics. If things change, change the template. Everything else I found when maintaining projects is too messy.

[sts-ryan-holton]

@herbalite I think you’ve gotten a little confused with what I’m suggesting here.

creating a CSS class for content wouldn’t require any JS at all, not quite sure whether youve got confused with something else

[MartijnCuppens]

@sts-ryan-holton "I think" what you're suggesting is something like Bulma is doing here: https://bulma.io/documentation/elements/content/

The Bootstrap docs also use a .bd-content class to control spacing between headings:
https://github.com/twbs/bootstrap/blob/7b2372f35319ce392cb3f6ddab7c2de879a8a354/assets/scss/_content.scss#L70-L95

I personally also use a .content class to control spacings between headings, parargraphs, lists,...

Would you also add additional theming or just use it to control spacing?

[sts-ryan-holton]

@MartijnCuppens We'd ideally it would mainly be for spacing and layout, e.g: lists, headings etc. I don't think we need to go as complex as say what Bulma has, but something similar would be useful for the user.

[sts-ryan-holton]

Any update on this? @Johann-S @MartijnCuppens

[MartijnCuppens]

@sts-ryan-holton, maybe you can make a PR for this?

[mdo]

I'm intrigued by it for what it's worth. We do this for GitHub's Markdown styles: .markdown-body is on the parent and everything typographically gets adjusted. Bummer is you basically cannot reliably use components within this given the nesting (e.g., <h2 class="h1">Heading</h2> would be overridden quite easily). We'd flat out not support anything by type, images, code, and tables I imagine.

An additional concern would be how much CSS it is, but I feel we could perhaps keep the styles reigned in.

[sts-ryan-holton]

@mdo I appreciate the response, but here's a small use case:

Lately I've been working on some projects related to properties. We have a custom CMS system where admins can go in and add new properties, and for the property information (description) it usually contains headings, paragraphs and some lists. The admin essentially has a simple WYSIWG editor where they can add their content.

The problem with this, is that it doesn't do a great job and clients tend to come back and ask why a heading has some wrong sizing, or fonts, or why this text is bold etc... and whilst the editor usually has options, clients don't really know how to use it and can't reliably create their own little layouts for displaying information.

By us creating a simply .content wrapper class, we can apply styling and utilise the SCSS variables.

e.g:

.content {
  ...
  h1 {
    font-weight: $font-weight-normal;
  }
  p {
    font-weight: $font-weight-light;
  }
  ...
}

Or something similar.

[MartijnCuppens]

@sts-ryan-holton, I think the example you're presenting is quite specific for the type of projects you're working with.

I frequently use a .content class myself for theming WYSIWG content but I must admit I always change the theming per project.

The idea is great, but implementing an universal solution is going to a lot harder.

[jonathanhefner]

I like this proposal. I was trying to achieve something similar (though less specific to content / copy) in #29481.

[mdo]

Duplicate of #30177