17 Oct
2014
17 Oct
'14
12:45 p.m.
Hello guys,
I have tried to learn a bit of bootstrap last night to figure out how to do
things, and I did the following test page to test the grid system:
http://incubator.myxwiki.org/xwiki/bin/view/Sandbox/TestFlamingo?skin=flami…
I have a few questions related to using the grid system (I didn't yet get
to other parts of bootstrap/flamingo):
The questions will get fuzzy-er and fuzzy-er as they advance. Please bare
with me, I have a lot of questions and little knowledge about bootstrap, I
am trying to figure out how should it be used in general (it's supposed to
be simple but I don't feel like it) and if there are some special rules of
usage in XWiki.
1/ What would be the proper structure if we wanted to make a grid layout in
a wiki page ?
My experiments show that the first example, div class=row and then columns
inside will not work (example "doesn't fit properly"). The second example
works, but that means we need to add .container-fluid all around that.
Let's assume for the next questions that we're using the .container-fluid
structure.
2/ On the bootstrap website here
http://getbootstrap.com/css/#overview-container I found that "neither
container is nestable" . I don't really know how to understand this phrase,
especially in the context of needing to put it in the content of my page in
order to make a grid. Is it dangerous to put it? Could it end up being
nested and thus not good?
3/ On the bootstrap website here http://getbootstrap.com/css/#grid I found
that any row must be in a container (which matches my usage). But I am
looking at the .document-header which contains the title and the edit
buttons, and it is not in a container. Or is it? If that one is in a
container, does that mean that we have a "global" container in the page in
XWiki which would also surround the page content (#xwikicontent) and then
if I put another .container-fluid in the document content in order to make
the grid I would be nesting containers?
4/ I didn't fully understand this story about the negative margins that
compensate for padding in order for columns to align with non-grid
content... ( 5th and 6th bullets in here http://getbootstrap.com/css/#grid ).
I did some examples in my test page in section "Fits properly", and I would
like to understand better this principle / approach. What would be the
correct way to mix & match full width elements and grid in the document
content? (by full width I mean either a paragraph with text, or other
elements that need to take up the whole width of the document content area
#xwikicontent).
a) anything that has to be full-width should be out of a .container-fluid
and whenever I want columns I make a new .container-fluid? -- the text
"this is the " in section Fits Properly
b) can I put stuff in a container fluid? If I do, then why is it indented?
The text "dancing" in section Fits Properly
c) I read in BS documentation that only columns should be direct children
of .row so the text "text" in section Fits Properly is not an option
(although correctly displayed). Please confirm
d) I added a third column, with size 12 at the end, to get something full
width. I guess this is one approach, but then its text is not aligned with
the left of the column, but, because it is a column itself, it has a
padding of 10px. So the texts are aligned (text in half column with text in
full width but the full width text is not aligned with the border of the
half column). Is it a bad practice to put borders directly on the
bootstraps column? Should I be putting border on an element that I have put
inside the bootstrap column? In this case, I would get a lot of space
between the left side of the screen and my text. Maybe some of that space
gets colored in a different color theme?
e) should I be matching and mixing full-width stuff and grid stuff at all?
Is this a good idea? or if I need a part of the content in a grid then I
just make all content a grid and make col-12 for all the stuff that needs
to be full-width?
5/ Also, I just noticed now that the content of a page is not (in) a column
( #xwikicontent ). I was thinking that it could be a 12 size column which
we could split further by using this strategy:
http://getbootstrap.com/css/#grid-nesting . Since the document-header is a
row with columns, I was thinking that the lower part of the page could be
as well... This way, aligning stuff inside could be more natural (see
subquestion 4 d before).
Thank you a lot for your patience, I do take RTFMs as I am sure there are
parts of the internet that could enlight me on the topic. What I would like
to know is how did we plan to use bootstrap grid in the context of XWiki
for custom stuff, if there are some special rules...
Anca