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
