yui / gridbuilder Goto Github PK
View Code? Open in Web Editor NEWA little web app that generates responsive YUI Grids CSS
Home Page: http://yui.github.com/gridbuilder/
License: Other
A little web app that generates responsive YUI Grids CSS
Home Page: http://yui.github.com/gridbuilder/
License: Other
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.
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
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 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.
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 modified 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.
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.
How do I get a 1280px width layout ? The grid builder seems disabled at 960 ?
Rgds
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!
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.
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)?
Allow prefix yui3-
, and unitClassname u
to be changed.
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)
The Tutorial and Example link on the footer of the builder goes to a 404.
The two branches have a lot of code duplicated across branches which makes things hard to manage.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.