The following warnings occurred:
Warning [2] Undefined variable $unreadreports - Line: 26 - File: global.php(961) : eval()'d code PHP 8.1.2-1ubuntu2.14 (Linux)
File Line Function
/global.php(961) : eval()'d code 26 errorHandler->error
/global.php 961 eval
/showthread.php 28 require_once





× This forum is read only. As of July 23, 2019, the UserSpice forums have been closed. To receive support, please join our Discord by clicking here. Thank you!

  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Grids
#1
Bootstrap Grid - Docs

It's far less forgiving than XHTML, if you play by the rules it will truly sing to you.

I pulled out some main points from the link above:

Where I refer to row, this is a div with class of row <div class="row">.
A column, is a div inside a row that may have one or more special Bootstrap classes to control it's width.

1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width).
The outermost wrapper of your site. You cannot nest container or container-fluid.

2. No Cols in cols. Use rows to create horizontal groups of columns. Only columns may be immediate children of rows.
A row must contain columns. If you need to split a column, use another row inside the column and then add further columns.

3. The number 12. The number of columns in every row must add up to 12. (! I know!)
This is where those col-*-* classes come into play.
You can specify multiple column classes that dictate how that column will behave across differing device sizes.

A common example is 3 columns of content - mostly centered, and a pleasing width on wide devices.
For mobile, it's desirable to have the content stack vertically.
Bootstrap provides this with the row and col rules.

<div class="container">

<div class="row">

<div class="col-xs-12 col-md-4 col-lg-6">
Left becomes top
</div>

<div class="col-xs-6 col-md-4 col-lg-3">
Small 1 becomes bottom left
</div>

<div class="col-xs-6 col-md-4 col-lg-3">
Small 2 becomes bottom right
</div>

</div>

</div>


eta, indenting courtesy of the forum software Wink
  Reply
#2
So to carry on the above post:

col-xs-12 means full width (all 12 cols) on xtra small devices.
col-md-4 means the column will be equal width with the other two col-md-4's in the row.
col-lg-6 means half the width of the screen on full size monitors
  Reply
#3
I definitely need to be better about that sort of stuff. I'm glad I have you and Brian going behind me and finding/fixing that stuff.
  Reply
#4
So does that mean if I switched the template to container from container-fluid, I could get the behavior I want and set the width in pixels? I found a #page-wrapper with a width set to 100{3bc1fe685386cc4c3ab89a3f76566d8931e181ad17f08aed9ad73b30bf28114d} that I could change for that effect, as well as in the <nav> tags as well. It revealed the footer has it's own width setting also. I really don't want to go modifying the core files since upgrades then become a nightmare.

And thanks for the run down on bootstrap. Screw mobiles! Some of us still use computers for our web browsing!
  Reply
#5
eg in /users/admin.php? Yes.

<div id="page-wrapper">
<!-- <div class="container-fluid"> -->
<div class="container">
....

Constrains the content to a traditional column.
  Reply
#6
You could also achieve the same result without changing that file at all.

In a custom CSS file, redefine #page-wrapper { width: 962px; margin: 0px auto;}

Might break your mobile view though Smile (ducks)
  Reply
#7
I was thinking the custom CSS route too...just needed to know what DIV IDs to over-ride. And "good mobile view" is in the eye of the beholder. I think some mobile views are hideous...

Thanks.
  Reply
#8
I do like the idea of having 3 layers of cascading in our CSS. I kind of look at it this way. That first one lets bootstrap be bootstrap. The sb-admin lets UserSpice work its magic. The custom.css lets you change whatever you want knowing that our patches aren't going to mess with it. If anyone gets a good custom.css that you guys thing is worth rolling into the sb-admin itself, I'm down.
  Reply
#9
You're right on the layers of CSS but I think sb-admin is breaking more than it's helping.

We should have a us-admin for styling UserSpice, not a mangled* sb-admin.

Let the core Bootstrap do all the structure and most of the styling. Then find what it is about sb-admin that works best and make our us-admin an enhancement to that.

The top layer can then be purely user overrides or a Bootswatch type for colour.

I'll have a go at the dashboard this weekend so I can try and illustrate better.


* Users were invited to mangle it Smile



  Reply
#10
Haha. You definitely are invited to mangle it. No problems there. I'm definitely not a designer. Or really a coder for that matter.
  Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)