I looked at some css rsponsive grids. I'm currently trying Unsemantic.
I don't really understand how it can manage various resolutions like 400, 768, 1024, while we can only use two kind of classes : grid-XX and mobile-grid-XX.
Unsemantic CSS files contain media queries regarding all the resolutions I mentioned above, but I don't understand how I can use them.
For example, if I have two columns on my main page
I would like them to be 50% wide each on 1024px or more, 70% and 30% wide between 640 and 1024px, and 100% wide on 400px and less.
Is it possible?
Do you know any responsive grid system that could be easier to understand and use?
I'm not sure how to do this with Unsemantic. However, I have used Susy to do this exact thing before.
Try Cascade Framework.
Cascade Framework's grid system does exactly what you want. Out of the box, Cascade Framework's grid system supports 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and far more combinations. In fact, you can even use combinations like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your build includes the responsiveness module, the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
Note that the current version of Cascade Framework is written in pure CSS. That means there is no way (yet) to configure the breakpoints that distinguish between desktop, tablet and phone by just changing a single variable. You can, however, do a copy-replace of these breakpoints with your own custom breakpoints in the source code if you are dissatisfied with the default breakpoints.
See also http://jslegers.github.io/cascadeframework/grid.html and http://jslegers.github.io/responsiveness/ .
Related
A webform I am customizing has 9 elements in a composite. Since there are too many of them, the composite is exceeding the fieldset you will see below.
This is the picture of the composite
I would like to shrink the size of the composite and adjust the widths of some of the elements (like Amount since it shouldn't take that many space, and maybe make Type element wider).
I followed along this solution but the size would not change even when I added
wrapper_attributes:
width: 20%
Does anyone have experience with adjusting the widths of composite's elements ?
P.S. To be visual-friendly, here is where I added the code above
Other Idea: Change in CSS padding, margin or border-line.
I know that #media can be used to detect properties of the whole viewport, and then switch among CSS rule sets based on different types of media/widths, etc ..
But how does one switch between CSS rules based on the width of parent div, etc ?
This code preview shows the footer of my page, with some elements changed/removed:
Liveweave: http://liveweave.com/JtUxpF (Switch to Split V or View mode from the top menu)
On the right side of the footer, there is a small form (marked with the red arrow in the picture above). This form has a #media separation applied to it, like so:
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
#media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
Problem:
My idea was to actually apply CSS rules based on the width available to the form from the parent div. However the CSS rules are currently applied based on the width of the screen/viewport.
If you reduce your window's width to less than 270 pixels, you'll see the visual change in the form's look!
So how can I choose and apply between two different sets of CSS rules, based on the width available to the form, instead of the viewport width itself ?
Not possible in pure css. The equivalents of "if" statements in css is currently limited to media queries and selectors, neither of which get you what you need. You can use something like less or sass to do what you're trying to do, or you can generate rules dynamically using a server-side or javascript approach.
sass: http://sass-lang.com/
less: http://lesscss.org
There is some support for math in css (calc()), but no ability to use those as conditional clauses.
I'm using the 960 Smart Grid to design a website. It's a mobile first grid system, and I'm having a bit of trouble. In order for the grid system to work, the padding-left element cannot change or it breaks, except in the default layout when everything is a single column.
I needed to adjust the padding for an element in the mobile view, which screws up the element when it's larger than the single-column view width (so greater than 768 px). I need to change the padding back to what the original smart-grid style sheet says, but I'm not sure how to do that.
I'm fairly new to this, I don't have the site live at the moment but I can share any code needed. I'm adjusting the padding on a paragraph element, set inside of a div element.
<div id="intro" class="columns twelve" class="row">
<p id="tagline" class="columns eight offset-two">Sample Text.</p>
</div>
Essentially, I need to set a 6% padding for the paragraph element in the mobile view. Once it reaches a minimu width of 768 pixels, I need to eliminate the 6% padding because it breaks the offset-two portion of the tag. The offset is achieved in the smart grid style sheet using a padding-left value based upon the screen size. I'd like to switch back to the default padding from the smart grid style sheet for all of the media queries, if possible. You can check out the basic grid documentation on the site I linked to at the beginning of the question.
Thanks for the help.
I'm not sure if I understood your problem, but it looks like you just need to overwrite the padding for when the browser is less than 768 pixels.
To do this, you just need to add, at the end of your main css (or in a new one, but called after the other one):
#media screen and (max-width: 768px) {
.columns.eight.offset-two {
padding: 6%;
}
}
This means that this style will only be applied if the browser is smaller than 768px, and once it gets bigger, it will bring back the 'default' padding for your element. You don't need to specify the padding again for bigger resolutions,l because the second the browser gets past the number, it completely forgets about the media query (it's like it doesn't exist anymore). The only thing you need to keep in mind is, unless you set another smaller media query after this one, it will apply the 6% to all smaller sizes.
It's important that you keep your media queries at the end, because css is read from top to bottom, and the last style read will be the last applied.
every time I start to code a new responsive page I come up with this question so I thought I ask you guys about it: "is it normal to break readability when adding responsiveness to pages?"
I think you'll better understand with an example: I have 2 big columns in a 12 columns grid system so I set 2 divs with class .grid-6 and in the css .grid-6 {width:50%}. In the tablet layout the graphic designer has placed three columns so i change the width of those columns to 33% but now I have a div with class grid-6 (which suggests 50% width) and an actual column width of 33%.
So when I start working on responsiveness it all just feels like "hacks".. I though about adding different classes for tablets and phones or other devices (<div class="grid-6 tablet-grid-4 phone-grid-3">) but that just doesn't feel right.
the problem appears when you receive a graphic design that has different amount of columns for each breakpoint..I mean, you can't change the column count in the html, amirite?
Consider using Cascade Framework.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your build includes the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
However, this still may lead to stuff like <div class='col width-1of4 tablet-1of3 phone-1of2'> </div> in some cases. In those cases, going semantic is a better approach. More concretely, do something like <div class='col custom_class'> </div> or <section class='custom_class'> </section> and then set the width for each breakpoint yourself in your custom CSS.
I'm a little lost but I believe your talking about mobile browsers correct? If so #media is your solution.
html,body{
min-height:100%;
}
.grid-6 {
width:33%;
min-height:100%;
margin:0px;
display:inline-block;
}
The above will create a column grid similar to the one you have explained. I think? lol
Converting these to one column for mobile browsers is easy. Think of #media as a condition. Basically I've written 'if device width <= 480px' which is relative to an iPhone 4gs and below screen.
#media only screen and (device-width:480px){
.grid-6{
width:100%;
display:block;
}
}
All other styles that are not declared within the #media condition are inherited from the class' above. hope this helped
First of all it is better to name a class after its function rather than its physical appearance... for example navigationContainer is a better name than leftContainer, as navigationContainer can exist anywhere on the page.
As far as adapting for different layouts, screen sizes and orientations etc. you will want to make use of the media attribute (or the #media declaration) which will allow you to apply class definitions only to devices and screens meeting certain criteria. Herein lies the benefit of naming classes after function. If you name a class after it's function (like mainContentGrid, then you can redefine the class as many times as you like in all your different media stylesheets. Because in principle only one sheet will be applied depending on the viewing context, your styles will always be appropriate for the viewing context. This eliminates the multiple class problem that you have and cleans up your code.
If you want a more precise opinion, please post some code and I'd be happy to give you my thoughts.
The number of columns should stay consistent across all browser sizes; only their width and padding should change. It is however common to reset all columns to 100% width when in mobile, but otherwise they should only shrink, not be dropped entirely. I'd suggest going back to the designer or rejigging your grid to have a multiple that all responses adhere to.
Flexbox is your solution, but it's not time yet.
If you don't care that much about semantics, it's a perfect solution you describe using tablet-grid-4. Grids in definition using sizing in their class names aren't semantic. You can also name it like desktop-main desktop-aside tablet-main tablet-aside and so on. But I always fall short my self in practice. What do you name three even cols in tablet. It's not main, it's not aside. They are cols each of one third :) It's very hard not to speak of layout in html when the whole containers are their for layout.
Regards
Try the Dead Simple Grid. Rather than hard-coding the grid layout classes like
<div class="grid-6 tablet-grid-4 phone-grid-3"></div>
you assign an abstract classes like
<div class="col left"></div>
<div class="col right"></div>
and then assign the width to these classes for the different screen sizes
.left, .right { width: 100%; }
#media only screen and (min-width: 54em) {
.left, .right { width: 50%; }
}
This example targets small screens by default (e.g. smartphones) having left and right fill the entire width of their container (which can be another column since nesting is supported!) and displaying the two elements underneath each other. When the screen is large enough though, the two columns will be displayed next to each other.
Dead Simple Grid is very simple (the entire css code is 250 bytes!) but surprisingly powerful.
I'm working on a google map page for a jquerymobile site. I've got the map behaving as I'd like, and it displays beautifully, but the map element is too big - I can't figure out how to scale it to fill all the available space between the header and footer.
So I have:
header (let's say it's 30px tall)
footer (let's say it's 20px tall)
Since there are so many different screen sizes for mobile devices right now, I want the map_canvas to be device-height minus 50px tall. Can I do this in css, or do I need to use javascript? (Not averse to that, but it would be great to use pure css...)
You can use height: calc(100% - 50px) in modern browsers.
Due to general viewport wonkyness, auto-height is a slippery issue and not implemented reliably.
I've needed to implement something similar before on my mobile sites, and I found this article on Quirksmode to be infinitely useful - http://www.quirksmode.org/mobile/viewports.html
In your case, you'd want the height to be
document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())
or if you want to hardcode, document.documentElement.offsetHeight - 50. Of course hard-coding the value is a less maintainable way to go.
You could use javascript, or you could use relative heights. For example, set your header's height to say, 10%, the footer to 20%, and then you could set your map's height to 70%.