Container within container-fluid

[Plutarch]

Hi - new to BSS.

I just wanted to check that I have the correct way of doing something:

For designs that have sections with 100% page width (for backgrounds etc), but where the content itself is contained/boxed:

I see I cannot drag a container into container-fluid. So instead, I drag a div inside container-fluid, and manually give the div a class of ‘container’. That seems to achieve the same thing.

Is this the right way to do it? If so, is there a reason I can’t drag a container within a container for the boxing purpose described above? Am I missing out on editing features doing it manually?

Many thanks.

[printninja]

The hierarchy (at least the one I use) should be section > container > row > column(s).

Sections are 100% width by default, and can have whatever background you choose. You don’t have to use them, but I do because it just makes things neat and clean.

Containers are max 1200 px by default (XL in Bootstrap) unless you set them to “fluid” using the Options panel (there is a toggle switch), which will cause them to fill 100% of the horizontal space in the section (or the page body if you forgo using sections.)

Does this help?

[jo-r]

It’s also not necessary to add a container within a container (meaning container labeled of course), nor is it good practice to do so. You’ll see this a lot if you try dragging many of the premade componenets from the online components area into your project. In most cases you will need to drag the component to the top or bottom of the site and then remove it from the container itself to put it where you want it. Be sure you add a div/row/col to the outer layer if the container had other classes on it.

Hope that helps.

[Plutarch]

@printninja Huge help. I completely forgot about sections. I’m all good now…thanks again.

@jo-r Understood. Glad you gave me a reminder before I went nuts and created entire projects. It’s been a while since I’ve touched BS, but I’ve come back to, concluding that it is the way to go.

Could you just clarify what you meant by this:

Be sure you add a div/row/col to the outer layer if the container had other classes on it.

[jo-r]

Yw and sure. Usually when you pull content out of a container or block that was created for the Online Components and such, you’re putting it into some other enclosing component such as a Div, Section, Row, Col, etc. Before you delete the old container that you removed the content from, be sure to check to see if it has any extra classes or ID’s other than the default bootstrap ones so you can pass them on to either the component you put the new content in, or a newly created component you will put the content in. This way you won’t lose the functionality of the component, or it’s styles.

It’s like this:

start Container - container’s class: “fuzzy slippers” (this has colors and textures and sizing and … you get the idea I’m sure)
… content
end container

Now say you created a new Row for a some column’s that were inside the original container, you would then do this:

start Row - Row’s class: this is where you would now put “fuzzy slippers”
… content
end row

And if the original container has no extra classes or ID’s then you need put nothing in the new Row.

Did that make more sense I hope?

[Plutarch]

@jo-r Ah yes, I understand exactly what you’re saying. Thanks for the reply.

While I have you here - and before I do too much more work - if I can pose another, more fundamental question:

It’s about mobile first v desktop first. On my big desktop monitors, it’s tempting (or even natural) to want to design everything in XXL mode first, and work out the media queries as I make my way down in screen sizes. Perhaps this is not the best way to do it. What is best practice? What do you guys do?

It’s been a while since I’ve worked with Bootstrap, but obviously mobile is more important than ever. I just find it awkward to conceptualize the entire design and brand in a mobile layout.

Any thoughts would be massively appreciated. Starting point / direction of media queries (min or max width ?) - you know what I’m asking. It’s a project workflow question, and possibly a code organization one too.

Thanks.

[printninja]

I have and feel those EXACT same concerns. My thinking is, “websites were built to be viewed on monitors, not screens the size of a baseball card!” But the world has changed, and like it or not, depending on the industry, 70%-80% of website traffic is now coming from mobile phones, so not only is it mandatory to rehabitualize yourself to think in terms of “mobile first” but also to consider the UX on a mobile device is going to be quite different from a desktop, so you, me, all of us developers just have to bite the bullet and accept this is where things are now.

A simple example is breaking up page sections. On desktop the info that fits in the “above the fold” area used to be the gold-standard in terms of user-engagement. Five years ago, everyone was saying, “ya gotta grab them in the area above the fold because statistically, less than 30% of people scroll to the bottom of a desktop page. people don’t like to scroll.”

That’s no longer the case. Scrolling is not only an accepted practice, it’s EXPECTED. Users on phones are actually now conditioned to scroll to see the next “chunk” of information, so mobile-first development also means finding ways to break up your content into chunks in the neighborhood of 500 to 700 px in height, and then making them distinct from the next chunk that follows. This is stuff we never gave a thought to on desktop. It’s a whole new ballgame.

And then there’s the speed factor. Lazy loading is super-important on mobile because you don’t want people having to wait more than 2-3 seconds for the mobile site to allow interactivity. On desktop, you had both the luxury of generally higher speed connections, and no data caps. So when you design for mobile-first, you have to think efficiency, file size, tapping (as opposed to clicking and hovering), so all the stuff we worked so hard to create on desktop with nice CSS hover effects and rollover actions is all meaningless on a phone where there’s no mouse pointer.

I still have a tendency to start my sites at full desktop size (old habits), but I spend a LOT of time making sure the mobile experience is at least as rewarding and engaging as the desktop, even though it might not have as many cool features. It’s just something you have to force yourself to do, because the new generation of web developers are not just using phones to visit websites, they’re even using them to BUILD websites!

[jo-r]

I can’t tell you when or if I will ever adopt fully the mobile first setup, but I’ve created a pretty good system for going desktop first.

Main thing to consider here is that all styles are mobile first, so add your components in desktop mode and see how they look (usually this means size wise and placement wise, asthetics are irrelevant for this lol). If all looks good, go mobile size and work your way up. Usually not much to do if it starts out looking good in both sizes.

To be honest I’ve had very very few times where I really needed to do much work to make something work, and most of the time it’s a custom code component that I’ve added and have to set correct classes and sizes for. Especially if you’re using something that’s older that you aren’t ready to part with yet. My galleries come to mind and now I’m forced to change apps/components because the app I’ve used for years is not updating to my new Mac Mini’s OS version … yet … if at all. So in that case you will definitely want to work from mobile first.

Other than that, all I can say is play it by ear. Almost everything falls into place as it should naturally and without much hassle. When it does, just remember that the small size media queries are the boss and you’ll be fine.

[Plutarch]

@printninja & @jo-r - thanks again for your responses. There’s nothing worse than proceeding blind, thinking that perhaps the whole approach is flawed. Your insights both help me immeasurably.

I’ve started re-creating my projects. I can already conclude that BSS is invaluable, and irreplaceable, and will significantly impact my productivity and enjoyment levels. And thanks again to you both for the warm welcome by way of your replies.

[printninja]

Do not be concerned that you chose a flawed approach. Bootstrap isn’t going anywhere, anytime soon. Bootstrap is still the most popular CSS framework in the world.

[Plutarch]

For sure. I just meant the approach within the framework (responsiveness strategy, etc).

[jensklang]

I just worked on a large enterprise project, using BSS, and can say Mobile-first is the way to go. Way easier to make the different desktop versions good based on a good mobile (XS) than the other way around.

And what I learned the hard way and sometimes still make wrong is the flexbox design elements. They are all based on XS as default and then going up. So if you design on desktop (XL), all your flex rules are ONLY for that size and UP. Meaning that NONE of the flexbox settings are applied to the smaller sizes, and smaller sizes then default to “default”. So if you center an element using the flexbox on XL, it will still be aligned left on XS (mobile) and you have to change the setting again.

It’s just much easier to start with SM; then it’s the default, and change them as you increase the site and sees where the element ends up.

[Plutarch]

Thanks for the information - it is very valuable, especially with the enterprise insight. If SM inherits from XS (default), then we just change the default only, and larger sizes only if needed? I think I understand what you’re saying…simply to design mobile (default/XS) first…

[printninja]

Now you got it! It took a bit of time coming from Bootstrap 3 (which worked in the opposite fashion) but there is wisdom to mobile first design - namely that the majority of website traffic is now mobile. I have one client who went from DT-80% MOB-20% to MOB-82% DT-18% in the last 4 years. I told them they literally cannot afford to not upgrade their website. I’m even offering to defer the increase in cost for 3 months just to get them on to a responsive platform because aside from the traffic I know they’re losing, I’m getting rusty opening up and updating websites I built 5-6 years ago with a different program. I sometimes can’t remember how I managed to implement certain things on their fixed layouts because I’ve been doing responsive design with Pinegrow and BSS for the last three years now.

[Plutarch]

Hmmm. I’m stumped. Just trying to figure out the CSS order of media queries and getting a bizarre issue.

Should they be ordered, as you go down the page, smallest to largest, or largest to smallest?

I’m working in BSS, so I have the usual style.css. I am also using an external stylesheet for some global styles. But they seem to work opposite to each other, and it’s frustrating me!

In BSS, when I order media queries from smallest to largest as you travel down the page, it doesn’t work. It just uses the smallest and crosses out the rest. However, when I paste that same order into my external stylesheet, it works, and actually doesn’t work when the order is reversed (ie. largest to smallest in external stylesheet doesn’t work).

The following does not work properly in BSS, but does work in my other stylesheet:

@media (min-width: 300px) {
  #product-content h3 {
    margin-top: 45px;
    margin-bottom: 12px;
    font-size: 1.3em;
  }
}

@media (min-width: 576px) {
  #product-content h3 {
    margin-top: 45px;
    margin-bottom: 12px;
    font-size: 1.5em;
  }
}

@media (min-width: 768px) {
  #product-content h3 {
    margin-top: 50px;
    margin-bottom: 15px;
    font-size: 1.6em;
  }
}

@media (min-width: 992px) {
  #product-content h3 {
    margin-top: 60px;
    margin-bottom: 15px;
    font-size: 1.6em;
  }
}

#product-content h3 {
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2em;
  letter-spacing: 1.9px;
  color: rgba(0,0,0,0.8);
  font-family: serif;
}

Anyone have an explanation for this? I don’t want to switch between two opposite methods…Many thanks.

[printninja]

It doesn’t help that when you create a new website, BSS creates a new custom styles sheet called “styles.css” because that makes it easy to get confused as to whether you’re talking about the CSS listed in the Style TAB/PANEL (which is the order your website follows in terms of the cascade) or whether you’re talking about the default custom stylesheet styles.css (which really should be named something like “custom.css”) to avoid this fundamental confusion.

But your confusion is not unwarranted. It is not particularly clear in the Tutorials in the official Bootstrap Documentation this off phenomenon which is as follows…

When you look at CSS in the STYLES TAB, which shows it in the order the browser interprets it when it renders the page, media queries will display in order from smallest to largest (as you can see in the first image displayed here.) Note that I’ve highlighted a paragraph of text that has a class applied to it called .att-text-sub, and you can see there are two media queries to change the size of the text… once when the viewport is wider than 992px and again when it’s wider than 1200 px. The base font size is the first one listed (24px), which has no media query, and covers everything from 0px to 991px.

However, when you look at the CSS in the file MA-Home-Page.css, where I’ve created the class .att-text-sub, the media queries are displayed in the OPPOSITE order - from largest to smallest.

Way back when I first started using BSS, someone in the forum explained to me the reason the program works this works this way. I don’t recall what it is.

All I know is that when you write your custom CSS the lower down the class is, the higher its specificity (weight). So in my second example image, if I were to duplicate the last class and change the font size rule to a smaller size than in the rule above it, because it appears lower on the stylesheet, it will be the one that gets applied to the text. The same holds true for media queries. When editing a custom stylesheet, your media queries should go from smallest to largest to have the desired effect on your website.

Personally, the only time I look at the “raw” css in the Styles Tab us when I want to see what Bootstrap classes are applied to a component so I can copy them to a custom CSS stylesheet to modify them (or if I forget which of my custom classes are affecting a given component.) 99% of my CSS coding time is spent in my custom CSS stylesheets, and I’ve learned to think in terms of writing my CSS from top to bottom (even though it’s shown in the opposite order in the Styles Tab.)

I hope this clears it up for you.

[Plutarch]

@printninja What would I do without you?? Seriously, I wouldn’t have figured that one out if my life depended on it. I’ve been working mostly in the styles TAB, only referring to the actual styles.css file when dealing with non-BSS classes. I assumed it was basically a facsimile.

I got it now.

You just saved my deadline.

To summarize:

Write CSS in styles.css (not STYLES tab).
In styles.css (custom css), order media queries smallest to largest as they read down the page, like so:

/* written directly in styles.css: */

/* base class styles */

.my-class {styles} 

/* media queries */

/* XS */
@media (min-width: 300px) {

.my-class {styles}

}

/* SM */
@media (min-width: 576px) {

.my-class {styles}

}

/* MD */
@media (min-width: 768px) {

.my-class {styles}

}

/* LG */
@media (min-width: 992px) {

.my-class {styles}

}

/* XL */
@media (min-width: 1200px) {

.my-class {styles}

}

/* XXL */
@media (min-width: 1400px) {

.my-class {styles} 

}

Thank you for your kindness. It is a massive help.

[printninja]

YES!!! It looks like you’ve got it figured out now. Do all your CSS work in your own style sheets. On a typical project, I may have 5-10 different stylesheets, some of which are only loaded on certain pages because they style components that are only on those pages. Getting comfortable with creating your own CSS stylesheets, and writing your own CSS classes and rules, and applying them through the attributes panel is one of the things that makes this program so powerful.

You’re not limited to staying with Bootstrap’s “look and feel.” You can make your site look and work however you want by writing your own Custom CSS, and as long as you don’t change the name, any Bootstrap class you copy from the Styles Tab into your custom CSS file will override the Bootstrap styling. In this way, you have total control to make Bootstrap “look” and work however you want.

For example, I don’t always follow the Bootstrap breakpoints, either. Sometimes I will even use max-width in my media queries when I want particular things to behave a particular way on mobile devices or very large screens. Bootstrap uses 1200px as their cutoff for XL. Nowadays, 1920px by 1080px monitors are the most popular size. Sometimes I will used a fluid container (so content spans the full width of the screen, but limit the max width on a row to 1600px. Things like that.

I’m going to sleep now, but I’ll be around and working most of the day Saturday from about 2pm (Eastern Standard Time) until 11-12pm at night. That’s my “9-10 hr productivity zone”, so if you get stuck, that’s when I’ll be available.