I've built a dynamically sized grid layout that can adapt to reasonably in any sized resolution (phone, tablet, desktop) and handle resizing, all while being near pixel-perfect (sorry, I'm OCD -- and I say "near" because my math is broken right now and you can't fit two evenly sized elements inside of an odd sized container without padding being 1px off on one side).
Anyway, below is a link to what I've hacked together with JavaScript. It's an example of what I'm trying to pull off. Resize the width of the bottom pane a bit to see what I'm going for.
http://jsfiddle.net/langdonx/uFW2C/2/
It has some ugly manual JavaScript that's since been ported to Angular, but still the ugly JavaScript that calculates all the styles remains.
So my question... can I pull this off with strictly CSS? Or a lot more CSS and a lot less JavaScript? And by this I mean dynamically sized cells based on the width of the screen?
Here are the business rules:
Max cell width: 320px
Minimum # cells per row: 2
this might be impossible with CSS, so I'd be fine with settling on Min Cell Width: 178 for Chrome on my Galaxy Nexus(whose portait mode is 360px wide)
Cell border: 5px with a 2px outline
Visible margin between cells: 3px (margin is actually 5px, but outline bleeds out)
In this example, I'm redrawing the cells on resize every time, but in my Angular version, I believe that just the styles get updated. That said, I could probably get away with redrawing a table on resize, but I'd only have to calculate the cell width based on the document width, and well... I wouldn't be thrilled to use a table. =[
-end mad rant
Media queries
CSS media queries might get you pretty close to a CSS-only solution.
The key concept here is using different layout grids based on the width of the browser, to vary the number of columns.
Media queries are the natural CSS way to change the layout based on the browser width. And they require no JavaScript. If you use a set of media queries -- each one targetting a different range of browser widths -- to control which layout grid is used, then all each grid has to do is be responsive -- percentage widths for each column, and let the content stretch to fill the column width.
Responsive Design
The question then becomes: Is it possible to automatically stretch each piece of content to fill the column using CSS alone? That depends on the type of content, how it's expected to behave when it stretches, and if there's any room for compromise with the graphic design.
Typically, the graphic design for a responsive website has to be tailored to suit the limitations of Responsive Design (with the graphic designers having a rough idea of what's feasible and what isn't). But... whatever can't be done automatically, can be done using JavaScript.
Relevant search terms for attempting to stretch the content: Responsive Design, Adaptive Content, Fluid Grid
Note: "Columns" in this case may simply mean the percentage width used for the floated containers for each piece of content. It doesn't have to mean "physical" columns, in the traditional sense.
Related
I have this ui-grid containing a random number of rows, but sure thing, it contains a great number of columns.
That said, I have a someway responsive-related problem: I want the grid to fill the remaining space of the page, in both width and height.
Apart from look-and-feel reasoning, the logic behind this is, on large screen devices, to allow the user to look at as much columns as possible and to extend the ui-grid height to the bottom, even if there are few rows displayed (btw, the page has no footer).
So, using a media query, I set width: 100% to the grid and manage to do the first part of the trick, but I'm struggling for the second part: the height.
I can't really make the gridWrapper height to expand the grid to the bottom, even if his width behaves correctly, without using Bootstrap but... the css struggle is real.
So I managed to have something near to what I want, but:
it's a ridicoulusly complicated, weak and un-reusable solution;
the row selection icon layout (the one on the left side of the rows) messes up as the row number grows, and i can't get rid of the selection feature by now;
the height of the grid is greater than the height of the page. I could set it to 90% instead of 100% to make it work... close, but not responsive, still.
Even if this scenario is the subject of many issues on the GitHub of the project, I'm asking you:
Is there a way to obtain what I want in a responsive, maybe bootstrap-inclusive way before I delve in a swamp made of display: table;, display: flex; & Co.?
give grid height: auto either in css or once grid is ready i mean once you have assigned array to gridOptions.data after that
$(".ui-grid").css("height", "auto");
I am affraid that only way how to achieve this is use of JS and setting css height and width programatically.
You have to set it when:
grid is created
window size changes
What are good and recommended uses of percentage values for vertical CSS declarations?
In other words, under responsive design, are we overlooking something where % would be beneficial over em?
Because it seems that for most situations (except for cases where you want all sides equal; credit), em would be better served than %, consider:
Using percentages for the horizontal values of padding, margin or border of elements in CSS is fairly standard — especially in responsive web design. For example, take margin-left: 7.2% and padding: 0 5%. It also makes sense: the wider the screen, then the space will increase proportionally.
One can do the same for the vertical values:
margin-top: 5%;
padding: 10% 0;
border: 1% 0 2% 0;
As expected, an increasing viewport width will increase the corresponding vertical spaces.
However, in the cases I've come across, it can look a bit odd — unfitting to the design. It seems that em values may be better served.* But, on the other hand, where would it be beneficial to use percentages?
* Since these won't increase with the width of the screen, but will increase according to the font size of the page.
I don't think there's any right or wrong answers to this question. It really does depend on your design.
As you noted, % values, even on vertical-based properties on margin & padding, are still relative to the width of the document. So if your design requires even padding, then % values all round are great.
But, if the design is content oriented, and you're still using % values on the horizontal properties for responsive design, % might not be the best for the vertical properties. You may, for example, want the padding-top to be exactly the height of 1 line of text. So you'd use ems.
But I digress; it really does depend on your design and personal preference.
Yes, depending on the situation just like any other css practice.
Say you have a container div that uses 100% of the screen height and you have a header you want to appear at the top of your div. You could say margin-top: 15px on your header, which works, but then if I come and view it on my phone it will look very squished.
So instead you say margin-top: 10% then no matter what screen I come and view your site on your header is always 10% from the top of the div. which means the relative flow of your layout will always be the same.
The general rule is this: For any valid css you can write there is a use-case where it would be the best way to go about achieving your design goal. Forget anyone who says "Never use negative margins" or "always avoid absolute positioning" or any of the other crap they throw around.
I have been pondering this question as well recently and after reading around the internet the 'rule of thumb' I'm beginning to lean on is as follows. First, the reason why % is good responsive design for the horizontal axis is because as we all know the width of your browser can vary greatly depending whether the user is on a phone or computer. The vertical axis is different however because while it can also vary like the horizontal axis, many webpages are created for a vertical scroll and the user is expecting to scroll down. In such cases a little more vertical scrolling due to less responsive ems is fine.
To answer your question based on that assumption, a time in which you would use % for the vertical margin is when you have a design where you don't want to make the user scroll much to see a part of the page. Specific examples might be a single-page web app where you don't want any scrolling or a header or initial page content such as a picture that you would want the user to see in its entirety without having to scroll down.
Briefly:
How do I lay out N columns of random height portlets all in CSS so that if the browser is resized, the number of is columns reduced (using #media (min-width:)) and the portlets still sit nicely together on the page with no gaps.
This is similar to
Float multiple fixed-width / varible-height boxes into 2 columns
but more general.
Detail:
I've built a web application (PHP / Zend Framework) with a "dashboard" page made of a series of portlets. The portlets can be arranged in 1, 2, 3 or 4 equal width columns (user selectable) in a fluid layout. When the user resizes the browser window, the columns expand to fill the available width and the portlets also expand horizontally. The vertical height of each portlet is defined by its content. Some are only 1-2 lines, others can be 30-40+ lines of text / tables / image etc.
I want to turn this into a "responsive design" so that the user doesn't have to select the number of columns. On a small screen (eg iPhone) only one column will display. On a wide screen they might have 4 or 5 columns. If the browser window is resized, the number of columns will adjust up or down to allow portlets to stay approx 300-400 pixels wide.
I think I can do this with a bit of jQuery and some server side support (PHP), but would prefer to do it all in CSS if possible (no / minimal javascript).
Use a combination of media queries and text alignment to achieve this:
In its natural state, ‘text-align: justify’ will not work unless the contents of the line are long enough to cause a line-break. Otherwise, the text remains left aligned. We can solve this problem by giving 100% width to an invisible inline element at the end of the line.
Because ‘text-align: justify’ is designed to work on individual inline words, it works on any inline element—and more importantly any inline-block element.
To account for any and all possible numbers of elements on the last row, the number of “placeholder” elements you will need to add is equal to the maximum number of elements per row, minus 2. These elements should be inserted at the end of your grid (before the “break” element if you are not using a pseudo-element to break the row) and then left alone. Since they do not occupy any vertical space, the “placeholder” elements won’t affect the layout if the last row is full or if your site is responsive and the number of elements per row changes. As long as you have enough placeholders for the widest view, you’ll be fine.
Obviously, this has some semantic implications—as there is no way to create any of these placeholders using pseudo-elements. On a grid where the last row will always have the maximum number of elements, we don’t need to use placeholders at all (just a break), but in most CMS situations they are necessary, and should be hard-coded into your HTML.
By simply applying ‘text-align: justify’ to the container, and giving the child elements ‘display: inline-block’ and a percentage width, you’ll never have to deal with horizontal margins ever again! (Oh and did I mention, when using this trick, you’ll also never need to use float on your elements ever again, so you can wave goodbye to those ignominious clearfixes and clear divs too!)
We should be aware that when using ‘display: inline-block’, our elements will be at the mercy of various typographic CSS properties, including font-size, line-height, vertical-align and word-spacing. These properties will have a visible affect on your layout’s whitespace, but can be easily adjusted or removed as needed. In 99% of cases, setting ‘font-size: 0.1px;’ to the container and ‘vertical-align: top’ to the child elements should do the trick.
References
Using text-align: justify for Layout
Swipe Me Responsive Slideshow
Text-align Justify and Responsive Web Design
Zoom for fixed and responsive sites | AlastairC
I'm starting off building a site which should be responsive to different screen sizes. I'm using the Fluid Baseline Grid template which uses percentages for columns and adjusts according to screen sizes using media queries. Now that I'm adding my own custom CSS, I am wondering whether I should be using pixels, percentages or ems for positioning my elements (within the fluid grid elements). For example, margins and padding between divs, widths of input fields etc. Font sizes and line heights are the only things set to use ems for measurement.
Can anyone provide any pointers on this? At the moment I'm leaning towards just using pixels within the percentage based layout that the grid template has preset.
Ideally, you should be using percentages whenever possible, at least on the horizontal plane, so the margins and padding can expand/contract proportionally with the rest of the content. A 10px margin might be great at small resolutions, but it could look much too tight at much larger ones.
I have this working fine: http://jsfiddle.net/uwcEw/ - a traditional border layout on css.
What I want to do is have another 5-region border layout within the "middle" of the border layout. Re-applying the same pattern from above I get this: http://jsfiddle.net/6bked/4/ (edited link), which does not work, clearly it is not relative to it's parent container, but i'm not sure how to fix this so i can apply this pattern as needed in a nested context.
Any help? Also if there's a better way to do this (Compass+Sass/blueprint/js layout) I'm open to suggestions.
UPDATE
I also wanted to make clear I only care about this working in modern browsers (Webkit, FF) mostly concerned with Webkit and I am not worried about users who don't have javascript enabled
I'm not exactly the biggest fan of fixed layouts, but if I understand correctly this should be what you're trying to do: http://jsfiddle.net/8Cq9A/.
The dimensions are relative to the browser window, even the nested set of div's. What you needed to do to fix your layout was adjust your inner dimensions taking that into account. For example if your outer left and right div's widths are set to 10% (meaning 10% of the width of the browser window) to split the center div into 2 equal halves, you'd set each of their widths to: (100% - 10% - 10%) / 2 = 40%.
Personally, I'd look into using floats: http://jsfiddle.net/Sf8Kp/. The issue you will run into here though, is if you're wanting equal height columns as seen in the link.
There are MANY articles floating around on how to tackle this though. A few good reads that have been around for a while: alistapart (1, 2), positioniseverything. Search around for faux columns and 3 column [liquid|elastic|equal height] layout.