I've created http://jira.xwiki.org/browse/XWIKI-11251
I didn't used LESS and I've added explicitly the 'row' and 'col-xs-12' classes in order to be easy for developers to see that it's a grid structure. Thanks for helping me fix this. There are other containers in XWiki that could be transformed in rows (like #mainContentArea, #xdocFooter, etc.) but all these containers depends on the skin and are not as easily customizable as #xwikicontent. Thanks, Caty On Fri, Oct 17, 2014 at 5:57 PM, Anca Luca <[email protected]> wrote: > On Fri, Oct 17, 2014 at 4:55 PM, Anca Luca <[email protected]> wrote: > > > Hi Cati, > > > > On Fri, Oct 17, 2014 at 3:03 PM, Ecaterina Moraru (Valica) < > > [email protected]> wrote: > > > >> On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca <[email protected]> wrote: > >> > >> > 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=flamingo > >> > > >> > 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. > >> > > >> > >> Theoretical you cannot nest .containers since they add padding and you > >> will > >> not be able to align the inner grids (they will be shifted with the > value > >> of the padding) (that's why the rows is using negative margin). > >> > >> In theory the good solution is the first one (just with the row). Why is > >> not working is because on #xwikicontent we have 'overflow: auto'. If you > >> remove that line, the grid should be displayed correctly (from the text > >> alignment point of view). Why we have 'overflow: auto'? Because of > >> http://jira.xwiki.org/browse/XWIKI-10791 and because in > XWiki.XWikiSyntax > >> we have very big tables, etc. I don't have a clear solution for this > >> problem, maybe is simpler than what I think, but the big issue is that > in > >> #xwikicontent we have, depending on the context, either layout > containers, > >> either text (for wiki pages). The user's content needs to be overflowed, > >> while when doing interface the developers are in control of the grid and > >> know 'exactly' was goes in. > >> > >> > >> > >> > 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? > >> > > >> > >> Flamingo is not a clean skin. We still haven't a response to the > Standards > >> discussion http://design.xwiki.org/xwiki/bin/view/Proposal/UIStandards > . > >> What do you do when writing application in Flamingo? Do you keep some of > >> the old classes? do you replace them with Bootstrap ones? In Flamingo we > >> have a mix :) depending on whom did the commit. You will see places > where > >> the old structure is kept and other places where you have Boostrap > >> classes. > >> Would you have expected to have something like "<div > >> id='xwikimaincontainer' class='container-fluid'>"? This is a solution > too, > >> but it increases the HTML. Also maybe we would want to add the Bootstrap > >> classes and remove the old ones (in order to keep the structure clean), > >> but > >> no one know if that ids and classes are used in some JS somewhere in the > >> platform and thus you shouldn't remove them. > >> > > > > Indeed, removing the ids can be dangerous. > > > > It would have been easier to read the html, but I could do it with the > > links under. > > > > > >> So in order not to add Bootstrap classes, but have their functionality, > we > >> 'cheated' by using LESS (mixins and extends). For example > >> > >> > https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/src/main/resources/flamingo/less/layout.less#L4 > >> and > >> > >> > https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/src/main/resources/flamingo/less/layout.less#L8 > >> With LESS and Boostrap mixins we made contentcontainer a .row without > >> explicitly writing it in the structure. You can take a look at > layout.less > >> (and actually more less files in less/ folder). I assume some things > might > >> not be perfect since Flamingo was done in a hurry. > >> > > > > Indeed these links help a lot, now it all makes more sense. Though it's > > still a bit confusing to have to go through all the containers that are > not > > styled, but they need to be there for legacy purposes so it's fine (I > just > > need to learn to ignore stuff like #mainContentArea or > > #xwikimaincontainerinner ). > > > > Now about working with rows (and only with rows) in the content of a > page: > > I made an experiment from firebug, and put the #xwikicontent inside a div > > with class .row, and also made #xwikicontent a 12 size column. > > Why I did this? because it sort of felt logical to me that, if its > sibling > > .document-header is a row, then xwiki content would also be just a huge > > column in a row. This way the row that I put in the document content, in > > the example "Doesn't fit properly" becomes a row in a column, as the > > http://getbootstrap.com/css/#grid-nesting explains. > > > > And this fits properly, I forgot to mention. > > > > This sort of matches my intuition that the content of the document would > > be a big column by default and if we want to divide it we can divide it, > if > > we don't we just put content in there. > > I also tried this example with a huge table (as you said for XWIKI-10791) > > and xwikicontent scrolled properly. > > Also, using this setup, my red column text started at the same position > > (on the left) as the title of the page, as opposed to the previous "Fits > > properly" example, which was fitting properly but the text of the red > > column was starting 15px to the right, so if I would remove the border of > > the column it would look bad. > > > > Now, I have no idea if my logic makes sense. In the current version of > the > > skin, .main is also a column, and so #xwikicontent would be the content > of > > this column. If I understood corectly from the bootstrap website, It > would > > be ok to have a row in it (.document-header) and then just content or > > another row if somebody puts another row in the the #xwikicontent. Also, > > putting a row with only just one column in it (the .row and #xwikicontent > > column that I mentioned above) should be the same as not putting a row at > > all. So this logic should also make sense, but the first one feels better > > to me because the direct parent of the content that I would control > > (document content) would be a dedicated column, so a clean "canvas" to > > decorate and layout however one feels. > > > > > > How do you feel about the idea above, with having the xwikicontent itself > > be a column? > > > > > > Thanks, > > Anca > > > > > > > >> > >> > >> > >> > 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 > >> > > >> > >> Theoretically you should work just with rows and columns, see > >> http://getbootstrap.com/css/#grid-nesting > >> Of course some things might work :) since it's HTML and CSS, and simple > >> text is not very complicated, depends if you add more complex structures > >> and than expect to have correct margins and responsive behavior. > >> > >> All your other questions might be already answered by the above > mentions. > >> Take some time to play with the grid and as I said, some things in > >> Flamingo > >> might need to be fixed. > >> > >> Thanks, > >> Caty > >> > >> > >> > 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 > >> > _______________________________________________ > >> > devs mailing list > >> > [email protected] > >> > http://lists.xwiki.org/mailman/listinfo/devs > >> > > >> _______________________________________________ > >> devs mailing list > >> [email protected] > >> http://lists.xwiki.org/mailman/listinfo/devs > >> > > > > > _______________________________________________ > devs mailing list > [email protected] > http://lists.xwiki.org/mailman/listinfo/devs > _______________________________________________ devs mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/devs
