+- UserSpice (https://userspice.com/forums)
+-- Forum: Miscellaneous (https://userspice.com/forums/forumdisplay.php?fid=28)
+--- Forum: Modifications and Hackery (https://userspice.com/forums/forumdisplay.php?fid=29)
+--- Thread: Grids (/showthread.php?tid=74)
Grids - astropos - 02-19-2016
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
Grids - astropos - 02-19-2016
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
Grids - mudmin - 02-19-2016
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.
Grids - brian - 02-19-2016
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!
Grids - astropos - 02-19-2016
eg in /users/admin.php? Yes.
<div id="page-wrapper">
<!-- <div class="container-fluid"> -->
<div class="container">
....
Constrains the content to a traditional column.
Grids - astropos - 02-19-2016
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
(ducks)Grids - brian - 02-19-2016
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.
Grids - mudmin - 02-19-2016
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.
Grids - astropos - 02-19-2016
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
Grids - mudmin - 02-20-2016
Haha. You definitely are invited to mangle it. No problems there. I'm definitely not a designer. Or really a coder for that matter.