A lot of the websites these days is built using grids, pre-made or custom ones. What I noticed is that most of these grids are based on rows, and usually work with the width of the columns, not taking the height of the elements (modules) into account.
I was wondering what the best way (or what the possibilities are) of building a modular grid is? By modular grid I understand such grid where the individual modules could be set in both width and height and be fluid in dependence on the screen. A grid where you'd know you have let's say 12 columns and 9 rows (the width / height of each would be given), and you'd be able to fill it with modules like a mosaic (that makes it sound almost too simple).
Here's an example picture of what I have in mind (picture borrowed from here):
I came upon a couple of examples, but most of them weren't responsive or were built using Flash. I believe there is a way to do it, just not sure myself how.
I know there might not be ONE correct way, but I'm curious about the possible techniques to go about it. Thank you!
This layout technique is commonly known as masonry, here are a couple of responsive masonry links to get you started:
http://masonry.desandro.com
http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout
good luck!
I would have to say your best option would be to build it using Bootstrap or Foundation, since they are set up to handle this kind of thing.They have classes that, assuming you use a 12 column grid to start, let you pick how many columns they can take up.
links:
http://getbootstrap.com/
http://foundation.zurb.com/
Related
... I'm trying to figure out whether the following is possible switching from desktop to mobile:
Mobile to desktop- different table design
Basically on the desktop I'm planning on the item description appearing in the info box on mouseover, but on mobile I'd like the info to simply display in a table. My question is: is this possible using only CSS or is there some server-side shenanigans I'd need to employ when rendering the page in terms of different HTML includes?
The only thing I can think off the top of my head is some sort of complicated showing / hiding of elements using #media queries plus some fiddly placement, but I feel like there must be a straightforward way to achieve this?
If anyone can point me in the right direction I'd be greatly...er..grateful!
Thanks!
Stu
Is there a standardized way to create a multiline toolbar? I'm dinamically loading the items and they are usually more than enough to make the toolbar overflow. But I don't want the overflow functionality, I just want the items to span several lines. As the items are loaded dinamically, I can not create several stacked toolbars beforehand. An observation: I switched the layout from the implicit default 'hbox' to 'auto' and the items do span several lines, but then, features like separators have undesired collateral efects, like having only one item or separator on each line, and also different looks in different browsers.
I could dinamically calculate the suposed total width of the items and divide by the max desired width of a toolbar to obtain the number of toolbars I need, but I don't know exactly at what point the items get a valid useful width.
This is an old question posted by someone else sometime ago. I'm re-asking because perhaps with the latests releases of Ext JS, they shiped 'undocumentedly' the sooo needed layout solution for this issue.
Thanks!
I don't think there is an out of box component that can do all of the things you want.
The default toolbar layout of HBox just places everything horizontally spaced.
If you know that you need more space you can always put in a container with whatever layout you want for it's items. You can get creative and nest all kinds of layouts.
Personally I think this would end up looking ugly. Perhaps there is a better solution with an alternative approach to your design needs.
ExtJS has a very useful layout mechanism called flex. It works by summing all the things on a row or in a column. Then the space is parceled out using the flex value divided by the sum of all the flex values. This results in a layout like below:
The Red box is an hbox layout, the blocks E and F have the given flex values that sum up to 3, so E gets 1/3 the width of the screen, and F gets 2/3rds.
The Blue box is another hbox layout, where all 4 pieces (A-D) have the same flex so each one gets 25% of the space.
What isn't shown is the surrounding vbox layout where the blue box has a flex of 22 and the red box has a flex of 78.
Is there anything like this kind of layout in Angular? If there isn't, how would you put this together in Angular?
Additional information based on some of the answers below:
I want to be able to replace extjs with Angular. To do that I need some functionality that I have in extjs that I don't know exists in Angular. I've found ways to watch for screen size, change to adjust the overall display size, but I haven't seen a good example yet of a directive that essentially introspects its constituent directives for this flex value and sets their size based on a size change event of the container. Flex doesn't work from inside the divs, it works inside the container of the divs, because it has to go across all the divs in the container to divide the space correctly. I haven't seen an angular directive that does this yet.
I have no actual development experience with Angular yet (I've watched many of the videos from http://egghead.io, I've read documentation and tutorials, listened to this podcast: JSJ-Angular) and so I don't know if this is something that is easy to solve, or hard to solve, or if someone has already solved it. This flex layout is wickedly cool and easy to use, in fact for full page apps, I'm not sure there is an easier way to lay them out so that they stay full screen and are malleable to screen size changes. Grid systems are great for some things, but they don't address what the flex system addresses.
I'm trying to see if there is a way to leap from extjs to Angular without really making my life difficult.
Additional discovered information:
Looks like flex is becoming a display type now in the form of the CSS display: flex or display: inline-flex (with prefixes at the moment)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Interesting to see the illustration calls it the Holy Grail Layout example. Of course IE won't implement it right, or in a timely fashion, but my customers don't mind using Chrome if it gets the job done.
Turns out someone has create one and it does MOST of what I was looking for.
http://ngmodules.org/modules/flexy-layout
You missing the point. Angular is only JS library that helps you with:
modularization your code
allow you load content asynchronously
change content using "magic" (two-way bindings)
etc.
It doesn't describe style of your site. You have to do it by yourself or use one of popular fluid/responsive CSS frameworks, i.e.:
Bootstrap by Twitter
Zurb Foundation
Inuit.css
Pure
Gumby
Metro UI
etc.
Just choose yourself and then apply to your site. Using that also make your design independent from JS (which is very bad) and JS framework (which is 9th circle of hell).
i want to display a table (like a footbal table) in silverlight in a windows phone 7 app. i was reading a bunch of articles on the www, but couldn't really understood what's the best way to approch this issue.
i am new to silverlight, so some code would be really awsome. I keep the data i have to display in some Lists (List), but i could change this...
any advices? thank you in advance!
naic
Due to the form factor [of almost all mobile devices] lists are much easier to read.
You will see this in the default templates for WP7.
There are various ways you can create a "table" in Silverlight. (I assume you are refering to a league table.) The easiest would probably be a grid or a templated list.
If you really must do this I would suggest having 2 different ways of displaying the data depending on screen orientation.
In the portrait orientation I would show a list with minimal statistics.
In the landscape orientation I would show a table layout which could include multiple statistics as there is more horizontal space.
I'm currently designing a web application which may be viewed by people in all kinds of resolutions 1024..1920 or even larger resolutions.
I've opted for a fixed-width design (as many other popular websites are, e.g. StackOverflow, CNN, Mint, WSJ, BofA etc.) with the lowest common denominator fitting in, meaning 1024.
Now a problem is that on some pages in my application I have to display grid-based data. I think I'm really going to anger people with large screens if I restrict them to 1024 width compacted grid data while keeping most of their screen empty.
I thought about making different style sheets and so forth for different resolutions but that will increase much of the maintenance work, graphics work etc. above of what I can manage.
Do you have any ideas how to solve this is a graceful manner (I'm just thinking maybe I have a 'creative block' here right now :) ) without having to go fully to a fluid design, which brings a bunch of problems in itself?
1) Multiple hard-coded views of the same data: Brief, Detailed, Verbose
Quick links, or tabs to allow the user to view different numbers of columns. If they need more details, they can choose the view that has more detail. They want to know, and will not be annoyed by having to scroll vertically.
2) User-Controlled columns
Allow the users to control what they see, and what columns are included in their view. You can even store and remember the views they select. The default should be the view you think most people would want to see.
3) Combination of the previous two
Allow them to choose a default, and then customize columns on a one-by-one basis. This is how MS Project works with its views, and it's very nice to work with.
Size the columns so that a reasonable number fit onto 1024, and use a horizontal scrollbar for the rest. Since your app doesn't use the extra real estate on other pages, you might decide to just stop there.
Otherwise, let the elements resize to fill the full width of the page if there is extra room (either use a table, or use min-width on the divs and 100% on the parent.