Building Grids & Columns
132 views
Skip to first unread message
Jeff
Mar 7, 2011, 12:00:56 PM3/7/11
to Treesaver
Hi,
I'm working on a newspaper-like website and Treesaver was a perfect
fit for what we're hoping to achieve in the article page. The
dynamically created columns and resizing are great.
Where I have run into some trouble is creating multiple grids for the
page. Through reading the documentation I realize that the column
width needs to be static and based on pixels and the height needs to
be a multiple of the line height, including the padding/margins.
I was hoping for a bit more information on how Treesaver determines
which grid to use both in a normal browser and on mobile devices. What
sort of class names or naming do I need to use in order for Treesaver
to recognize the grids? If someone could expand a bit on how the grid
and column system works I would really appreciate it.
Thanks,
Jeff
I'm working on a newspaper-like website and Treesaver was a perfect
fit for what we're hoping to achieve in the article page. The
dynamically created columns and resizing are great.
Where I have run into some trouble is creating multiple grids for the
page. Through reading the documentation I realize that the column
width needs to be static and based on pixels and the height needs to
be a multiple of the line height, including the padding/margins.
I was hoping for a bit more information on how Treesaver determines
which grid to use both in a normal browser and on mobile devices. What
sort of class names or naming do I need to use in order for Treesaver
to recognize the grids? If someone could expand a bit on how the grid
and column system works I would really appreciate it.
Thanks,
Jeff
Filipe Fortes
Mar 8, 2011, 7:25:40 PM3/8/11
to trees...@googlegroups.com
Hi Jeff,
I'm working on making this a little easier to code (as well as fixing up the docs), but here's a quick overview of how things work right now. Let me know what needs clarifications / more detail.
When performing layout for an article, Treesaver first filters all the available grids in the resources file based on the following criteria:
- Viewport size: Any grids with a width or height that does not fit within the current viewport size is eliminated. maxWidth and maxHeight are honored as well (so you can say that a one col grid should never be used on a wide screen)
- Theme name: If you set the data-theme property on the <article> Treesaver will eliminate any grid that does not have that value as a className. For example:
<article data-theme="tech">
Will only use grids that have class=tech
So the system has now narrowed down the list of possible grids to a few choices. It will now go through and construct pages of content one by one.
For each page, it looks at the possible grids and chooses the "best" one. Factors here include:
- Page Flags: You can indicate that a grid should only be used on the first page, or on even pages, or never on the fourth page
- Container matching: Treesaver gives preference to grids that fit images provided in the content
- Amount of text that would fit in the grid
- etc
Once it's chosen a grid, it goes ahead and pours the content into the grid and constructs a page (note that things can go wrong here, an image can be bigger than Treesaver expected due to a caption, etc).
But then we're done, and Treesaver moves onto the next page.
As for your question:
I was hoping for a bit more information on how Treesaver determines
which grid to use both in a normal browser and on mobile devices. What
sort of class names or naming do I need to use in order for Treesaver
to recognize the grids? If someone could expand a bit on how the grid
and column system works I would really appreciate it.
We'll be making this easier, but what you can do for now is key off of one of the capability flags placed on the <html> element. I like to use one called 'smallscreen' -- this is for screens under 500 or 600px wide (i forget which). You can use this to change column width per device. For example:
.column {width: 400px;}.smallscreen .column {width: 250px;}
Does that help?
Jeff
Mar 9, 2011, 11:41:51 AM3/9/11
to Treesaver
Hi Filipe,
That does help some in clarifying how Treesaver decides which grid to
use.
I've used modernizr on a couple past projects, so I'm fairly familiar
with it's intended use and how Treesaver is similar in adding classes
to the html tag. I added the following to my css document:
.smallscreen .grid {
width: 300px;
}
.smallscreen .column {
width: 250px;
}
.mobile .grid {
width: 300px;
}
.mobile .column {
width: 250px;
}
I had the impression that this would allow me to test a smaller grid +
column combination for both iPad and iPhone, since the added
specificity of an additional class for the smallscreen and mobile
cases should override the default. However, when testing in browser at
small screen sizes and on an iPhone I'm still met with an error as
Treesaver does not find a suitable column/grid to fill the viewer.
Am I missing some html in my resources file? Do I also need to create
separate grid + column combinations with the smallscreen and mobile
classes?
Do you have any further insight on why this isn't working on small
screens?
Thanks,
Jeff
On Mar 8, 7:25 pm, Filipe Fortes <f...@fortes.com> wrote:
> Hi Jeff,
>
> I'm working on making this a little easier to code (as well as fixing up the
> docs), but here's a quick overview of how things work right now. Let me know
> what needs clarifications / more detail.
>
> When performing layout for an article, Treesaver first filters all the
> available grids in the resources file based on the following criteria:
>
> 1. *Viewport size*: Any grids with a width or height that does not fit
> provided in the content
> - Amount of text that would fit in the grid
> - etc
That does help some in clarifying how Treesaver decides which grid to
use.
I've used modernizr on a couple past projects, so I'm fairly familiar
with it's intended use and how Treesaver is similar in adding classes
to the html tag. I added the following to my css document:
.smallscreen .grid {
width: 300px;
}
.smallscreen .column {
width: 250px;
}
.mobile .grid {
width: 300px;
}
.mobile .column {
width: 250px;
}
I had the impression that this would allow me to test a smaller grid +
column combination for both iPad and iPhone, since the added
specificity of an additional class for the smallscreen and mobile
cases should override the default. However, when testing in browser at
small screen sizes and on an iPhone I'm still met with an error as
Treesaver does not find a suitable column/grid to fill the viewer.
Am I missing some html in my resources file? Do I also need to create
separate grid + column combinations with the smallscreen and mobile
classes?
Do you have any further insight on why this isn't working on small
screens?
Thanks,
Jeff
On Mar 8, 7:25 pm, Filipe Fortes <f...@fortes.com> wrote:
> Hi Jeff,
>
> I'm working on making this a little easier to code (as well as fixing up the
> docs), but here's a quick overview of how things work right now. Let me know
> what needs clarifications / more detail.
>
> When performing layout for an article, Treesaver first filters all the
> available grids in the resources file based on the following criteria:
>
> within the current viewport size is eliminated. maxWidth and maxHeight are
> honored as well (so you can say that a one col grid should never be used on
> a wide screen)
> 2. *Theme name*: If you set the data-theme property on the <article>
> honored as well (so you can say that a one col grid should never be used on
> a wide screen)
> Treesaver will eliminate any grid that does not have that value as a
> className. For example:
>
> <article data-theme="tech">
>
> Will only use grids that have class=tech
>
> So the system has now narrowed down the list of possible grids to a few
> choices. It will now go through and construct pages of content one by one.
>
> For each page, it looks at the possible grids and chooses the "best" one.
> Factors here include:
>
> - Page Flags: You can indicate that a grid should only be used on the
> className. For example:
>
> <article data-theme="tech">
>
> Will only use grids that have class=tech
>
> So the system has now narrowed down the list of possible grids to a few
> choices. It will now go through and construct pages of content one by one.
>
> For each page, it looks at the possible grids and chooses the "best" one.
> Factors here include:
>
> first page, or on even pages, or never on the fourth page
> - Container matching: Treesaver gives preference to grids that fit images
> provided in the content
> - Amount of text that would fit in the grid
> - etc
>
> Once it's chosen a grid, it goes ahead and pours the content into the grid
> and constructs a page (note that things can go wrong here, an image can be
> bigger than Treesaver expected due to a caption, etc).
>
> But then we're done, and Treesaver moves onto the next page.
>
> As for your question:
>
> > I was hoping for a bit more information on how Treesaver determines
> > which grid to use both in a normal browser and on mobile devices. What
> > sort of class names or naming do I need to use in order for Treesaver
> > to recognize the grids? If someone could expand a bit on how the grid
> > and column system works I would really appreciate it.
>
> We'll be making this easier, but what you can do for now is key off of one
> of the capability flags placed on the <html> element. I like to use one
> called 'smallscreen' -- this is for screens under 500 or 600px wide (i
> forget which). You can use this to change column width *per device*. For
> Once it's chosen a grid, it goes ahead and pours the content into the grid
> and constructs a page (note that things can go wrong here, an image can be
> bigger than Treesaver expected due to a caption, etc).
>
> But then we're done, and Treesaver moves onto the next page.
>
> As for your question:
>
> > I was hoping for a bit more information on how Treesaver determines
> > which grid to use both in a normal browser and on mobile devices. What
> > sort of class names or naming do I need to use in order for Treesaver
> > to recognize the grids? If someone could expand a bit on how the grid
> > and column system works I would really appreciate it.
>
> We'll be making this easier, but what you can do for now is key off of one
> of the capability flags placed on the <html> element. I like to use one
> called 'smallscreen' -- this is for screens under 500 or 600px wide (i
Filipe Fortes
Mar 10, 2011, 10:23:36 AM3/10/11
to trees...@googlegroups.com
Jeff -- what you have there should work for the iPhone, although it's impossible to tell without looking at the entire source.
Note, however, that it won't work for a browser at a small size since the .smallscreen class is based on the device screen width, not the window size.
To confirm, I just tested by adding the following CSS to the bottom of style.css in the walkthrough:
.smallscreen .column, .smallscreen .container {
width: 200px;
}Reply all
Reply to author
Forward
0 new messages