Re: [xwiki-devs] About using bootstrap/flamingo for customizations in XWiki
On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca lu...@xwiki.com 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. 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. 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
Re: [xwiki-devs] About using bootstrap/flamingo for customizations in XWiki
Hi Cati, On Fri, Oct 17, 2014 at 3:03 PM, Ecaterina Moraru (Valica) vali...@gmail.com wrote: On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca lu...@xwiki.com 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.
Re: [xwiki-devs] About using bootstrap/flamingo for customizations in XWiki
On Fri, Oct 17, 2014 at 4:55 PM, Anca Luca lu...@xwiki.com wrote: Hi Cati, On Fri, Oct 17, 2014 at 3:03 PM, Ecaterina Moraru (Valica) vali...@gmail.com wrote: On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca lu...@xwiki.com 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
Re: [xwiki-devs] About using bootstrap/flamingo for customizations in XWiki
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 lu...@xwiki.com wrote: On Fri, Oct 17, 2014 at 4:55 PM, Anca Luca lu...@xwiki.com wrote: Hi Cati, On Fri, Oct 17, 2014 at 3:03 PM, Ecaterina Moraru (Valica) vali...@gmail.com wrote: On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca lu...@xwiki.com 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
