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
17 Oct
17 Oct
3:03 p.m.
New subject: [xwiki-devs] About using bootstrap/flamingo for customizations in XWiki
On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca <lucaa(a)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=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.
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/xwi…
and
https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwi…
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 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
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
4:55 p.m.
New subject: [xwiki-devs] About using bootstrap/flamingo for customizations in XWiki
Hi Cati,
On Fri, Oct 17, 2014 at 3:03 PM, Ecaterina Moraru (Valica) <
valicac(a)gmail.com> wrote:
On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca
<lucaa(a)xwiki.com> wrote:
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.
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.
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/xwi…
and
https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwi…
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. 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
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
4:57 p.m.
New subject: [xwiki-devs] About using bootstrap/flamingo for customizations in XWiki
On Fri, Oct 17, 2014 at 4:55 PM, Anca Luca <lucaa(a)xwiki.com> wrote:
Hi Cati,
On Fri, Oct 17, 2014 at 3:03 PM, Ecaterina Moraru (Valica) <
valicac(a)gmail.com> wrote:
And this fits properly, I forgot to mention.
On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca
<lucaa(a)xwiki.com> wrote:
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.
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.
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/xwi…
and
https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwi…
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.
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
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
6:54 p.m.
New subject: [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 <lucaa(a)xwiki.com> wrote:
On Fri, Oct 17, 2014 at 4:55 PM, Anca Luca
<lucaa(a)xwiki.com> wrote:
we
not
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
Hi Cati,
On Fri, Oct 17, 2014 at 3:03 PM, Ecaterina Moraru (Valica) <
valicac(a)gmail.com> wrote:
> On Fri, Oct 17, 2014 at 1:45 PM, Anca Luca <lucaa(a)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=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.
> >
>
> 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
.
> 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, > 'cheated' by using LESS (mixins and
extends). For example
>
>
https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwi…
> and
>
>
https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwi…
> 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 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
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
_______________________________________________
devs mailing list
devs(a)xwiki.org
http://lists.xwiki.org/mailman/listinfo/devs
3719
days inactive
3719
days old
4 comments
2 participants
participants (2)
-
Anca Luca -
Ecaterina Moraru (Valica)