These are roughly analogous to columns from Foundation 5.įrames: A frame is a layout object that lives above all others, and is 100% of the width and height of the screen you're on. They aren't a layout object, but should contain other elements and components. They are roughly analogous to rows in the Foundation 5 grid.īlocks: Blocks are objects that contain content only. Groups: Groups are layout objects that contain either more groups, or blocks. For this, we've proposed some new structures for the grids syntax. Flexbox doesn't need to clear floats, so a row isn't really a necessary component any more either. Rows and columns don't fully make sense once we introduce a vertical axis to the grid. Lastly, a different syntax is required for a grid that does so much more. We're discovering new challenges working with Flexbox, and we're also finding very exciting thing to do with it.Įasily slice up the screen into vertical sections We've gotten a better picture of the technological aspect of this new Foundation - and we still think it's time for Flexbox to shine. Let's Tear Down the Columns and Expose a Truly Do Anything Grid ![]() For our Studios business, we've began to see the need for something more, and we're eager to do something about it. We've struggled with this at ZURB as well. ![]() Unfortunately, Dribbble is filled with beautiful designs, but also broken dreams of web apps that couldn't be. Just perusing Dribbble on any given day we see that designers are moving away from designing marketing sites with a large Hero and 3 supporting points to much more complex experiences. They want to go responsive and leverage large amounts of space when available, but be building with cross-device mobile in mind. People want to build full-screen immersive experiences in the browser that feel native. We're transitioning to a more app-centric web. Web Apps are the FutureĪs we said above, the web is changing. These things are all great, but they were still built for a different type of web experience. We've even harnessed the awesome power of Sass to have powerful Mixins that allow designers to build fully semantic markup with little-to-no presentational classes. We've built upon it, adding offsets, source ordering right-to-left options and block grids. We were the first framework to go responsive with the grid and also the first to take the grid mobile-first. Over the last three years, Foundation has taken this grid style and made huge improvements in functionality. ![]() And more powerful frameworks emerged offering UI libraries, predefined styles and JavaScript capabilities, yet the same grid style remained. The 960 Grid allowed for rapid prototyping on the web and lowered the learning curve for designers to wrangle code. A model that uses rows and columns, set to 12 or 16 numbered increments, to create nearly any layout. Nearly every grid system today is based on the same principals of the 960 Grid - a grid nearly a decade old - that has affected how nearly every site is coded today. A 960° Look at the Grids of Internet Past In other words, we're still swinging a hammer when we could be shooting a nail gun. Yet, we're using the wrong tool to build these web apps - hacking away at frameworks and grids meant for marketing sites. The shift from native apps to web apps has begun. We're racing away from an advertising web that discusses things to a web of doing and creating things. The web has changed over the past several years and will continue to rapidly change. ![]() Building things with the wrong tools is even harder. We're working on a ton of new features - all from the ground up and using Angular JS, some amazing Motion UI and a swank, new grid.īuilding things is hard. Recently, we announced a new Foundation - one just for web apps - and the start of a framework family.įoundation 5 is now "Foundation for Sites." Ink is becoming "Foundation for Emails." And Foundation for Apps will be the newest of our family. We've talked a lot about the Foundation's future over the last month or so.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |