yui / gridbuilder Goto Github PK

The two branches have a lot of code duplicated across branches which makes things hard to manage.

The grid builder sometimes fails to reduce fractions when generating unit css. For example, it will create the rule pure-u-10-15 even though it's the same width as pure-u-2-3.

Add unit tests for the models/views in the app. The most important part of the tests is to make sure the GridModel.js model ATTRS get converted into proper CSS.

I'm familiar with foundation. Recently found Purecss, thought of try out a layout. I am trying to create a 12 grid layout.
Case 1:

Logo div "pure-u-2-12" and Navigation div "pure-u-10-12" (2/12 + 10/12)
This push the Navigation div to the bottom of logo div. I was expecting Logo would take 2/12 and Navigation would take rest ie 10/12. Is my understanding wrong?

Case 2:
Now I have Logo div "pure-u-1-12" and Navigation div "pure-u-11-12" (1/11 + 11/12)
screenshot

This looks like desired result, logo have taken 1/12 cols and rest 11/12 for Navigation

Case 3:
Another screenshot for Logo div "pure-u-5-12" and Navigation div "pure-u-7-12" (1/11 + 11/12)

Got desired result, logo have taken 5/12 cols and rest 7/12 for Navigation

however, I don't get why it get stacked for when the div are arranged,
div 1 as pure-u-2-12 and div 2 as pure-u-10-12
div 1 as pure-u-3-12 and div 2 as pure-u-9-12
div 1 as pure-u-4-12 and div 2 as pure-u-8-12

Please point me to the right direction if I missed any vital understanding.

Thanks.

Hi,

great job!

I try to change position of my boxes, when you change size of your browser, all boxes going down, how I can change that they going to the top?

thank you!

Platform: x64 Windows 7
Browser: Firefox 19.02 Release & Google Chrome Version 25.0.1364.172 m

Steps:
1- Go to http://yui.github.com/gridbuilder/
2- When responsive grid is selected, resize the browser window and observe that columns collapse to the full width on lower screen widths
3- Switch to unresponsive grid
4- Repeat step 2

Expected:
Since unresponsive grid is selected, divs shouldn't collapse. Whatever the screen width is, number of columns should remain the same.

Observed:
Divs collapse just like responsive grids even though it is disabled. Parent div of the demonstrated visual divs,"div class="yui3-g-r" does not change. If I change its class manually, I can obtain the expected behaviour.

I see an exception in javascript console from rainbow-min.js

The gridbuilder can generate offsets but this switch hasn't been exposed in the UI yet. The handlebars template for the offsets have to be cleaned up as well.

The grid builder is currently generating .pure-offset* classes that seem to be deprecated.

.pure-offset-1-2 {
            margin-left: 50%;
        }

As far as I can tell, the 0.3.0 grids file here doesn't include the offsets.

The Tutorial and Example link on the footer of the builder goes to a 404.

Hi team,

The Grid builder has an Edit Defaults button that shows a modal window with two buttons :

Your method using negative letter-spacing seems to be in cause.

Thank you ;)
G.

Allow prefix yui3-, and unitClassname u to be changed.

If you look at Voxel Creator: http://voxel-creator.jit.su/ it has a very clever idea of reading/writing to github gists as its data format. This would be perfect for gridbuilder and skinner. Notice also how the URL lines up with the gist number for "auto loading" kinda like jsfiddle.

The grid builder generates CSS with word-spacing for pure-g-r and the opera-only hack in the generated CSS, AFAIK it's been removed from the default grid elements now since it isn't needed and causes issues with chrome

related to: pure-css/pure#153 (comment)

Text within yui3-g-responsive gets negative "letter-spacing" and "word-spacing" which will cause text to overlap unless its within a "yui3-u-*" container. However, in some cases like below, it's an extra class that I hope to avoid. I can see a lot of extra classes being added to the dom to remove the overlap.

<div class="yui3-g-responsive">
    <h1>Page Title</h1>
    <div class="yui3-u-3-4">...</div>
    <div class="yui3-u-1-4">...</div>
</div>

NOTE: I should also mention that I added a max-width to ".yui3-g-responsive". I want a fluid grid but not to expand too far on larger monitors.

I could just add an extra container around the units and put the class there. However, I want the outer container which encapsulates the h1 to be responsive and hit the max-width I set (based on my design).

So my question is, is there a way around this text overlap issue (perhaps I am doing it wrong)?

If I include "grid-min.css" or if I use the CSS produced by gridbuilder I obtain different results. In the second case, using a 2 columns grid with modified breakpoints, the 2 columns are slightly overlapped.
Adding the rules below to .pure-g-r fixes the problem.

    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;

With generated CSS:

With modified CSS:

The text is messed up when the number of columns is set to 1.

How do I get a 1280px width layout ? The grid builder seems disabled at 960 ?
Rgds

yui/yui3#469