This is very similar to Bootstrap 3 fluid grid layout issues? and Bootstrap responsiveness view but the options for masonry and isotope, while attractive, aren't an option as I must retain ordering for the elements.
From the linked questions, I've moved a fair bit of the way forward using the clearfix class application as can be seen at http://bootply.com/103688. The clearfix divs are left unindented so they stand out more.
I also found that undesirable results will occur if, as is my case, I am only using some of the column sizes (xs, md, lg). This necessitates that the clearfix also specify the visible-sm or, when the viewport reaches the "small" size, the clearfix is no longer visible, and problematic stacking recurs.
Applying them is simple enough, as this is a real-world fizzbuzz problem, but it seems anti-DRY. Is there a cleaner way for me to do this, with less repetition of the clearfix tags? Some means of having the browser (CSS) compute where the clearfix should be applied?
You can use an manual approach of creating rows according with the number of elements per breaking point. For example:
If you have a row with 2 elements only:
#media(max-width: #screen-tablet){
// create rows (clearfix)
.col-xs-6:nth-of-type(odd){ clear:left; }
}
or if your rows contains 4 elements
#media(min-width: #screen-tablet) and (max-width: #screen-desktop){
// create rows (clearfix)
.col-sm-4:nth-of-type(3n+1){ clear:left; }
}
etc..
Related
I've been struggling to find a way to build this layout. All elements have unknown heights except for the social elements. The related and latest elements are optional.
I'd like to do it without resorting to JS or duplicating elements but I'm actually not sure if it's even possible.
Mobile and tablet are very easily handled with flexbox and the "order" property. I thought I could handle the desktop layout by reverting to floats but since the element heights are unknown this isn't guaranteed ( i.e. the latest and/or related elements might float over to the left if the body copy is short ).
Any ideas? Or should I just suck it up and dynamically add a sidebar to the DOM with JS for the desktop breakpoint?
Edit: Note the order of the elements! If I place the desktop sidebar elements in a container I can no longer re-order them on mobile/tablet with flexbox. Also, I don't believe grid-layout applies since the desktop layout does not follow a grid pattern.
Two-dimensional page layout like this is what CSS Grid was designed for. Flexbox is more suitable to arrange items in one dimension (although a second dimension will easily follow when nesting or wrapping). As others have mentioned, this layout should be totally accomplishable with CSS only.
One approach using CSS Grid is having three template area definitions that change on each breakpoint, as demonstrated here.
Part of the HTML and SCSS for that:
<div class="grid">
<div class="area social"></div>
<div class="area body-social"></div>
<div class="area categories"></div>
<div class="area related-latest"></div>
</div>
.area {
&.social { grid-area: social; }
&.body-social { grid-area: body-social; }
&.categories { grid-area: categories; }
&.related-latest { grid-area: related-latest; }
}
#media (min-width: 64em) {
.grid {
grid-template-areas:
"body-social social"
"body-social categories"
"body-social related-latest";
}
}
I took the liberty of combining some of your sections into areas, as I’m unaware whether the visual design would disallow it. You might have to manage some additional gutters if it does. Also note that the right column in the wide layout is currently only sized to the length of the text inside, which will probably not hold with real content. There will be more use cases I haven’t addressed, but if anything my example can be a starting point for you to work from.
A slightly different approach would be to define grid-template-columns and grid-template-rows for each breakpoint, and configure the correct grid-columns and grid-rows for each area or section. This would imply some more explicit sizing, which has pros and cons in itself.
Furthermore, you would need to think about which layout you want to present to people using a browser without support for CSS Grid.
To learn more about modern layout techniques in CSS, I recommend checking out the articles and videos by Rachel Andrews and Jen Simmons.
Let me know if you have additional questions or remarks.
I'm having trouble working with Twitter bootstrap 3 to render a web page composed of different slices. The end-product would be a page composed of rows containing img-responsive slices that stay in their respective rows (i.e. They don't wrap)
But Bootstrap CSS does something funny with the images. They're nested in the predictable structure, container>row>col-xs-12>Images, but even when I set the image margin: 0;, there's still a small gap between adjacent images. Moreover, I can't get the rows with multiple slices to stay on the same row no matter what (because the page makes no sense if slices wrapped to a new line) and still be "responsive."
Alternatively, if someone could instruct me how to set up a responsive image map (or shoot me a solid link), I could try that route.
You need to put each image in its own col-xs-*, override col-xs padding, and add max-width:100% to the img. Also, don't get confused by .row's usage. It's not meant to restrict items to a visual row, and doesn't. Frankly, the name is misleading. Just use the single .row within the .container, and make sure your col-xs's add up to 12 and you'll avoid unwanted wrapping.
Here's an example: http://www.bootply.com/aYOdYaV4Gq
.col-xs-3{
padding-right:0px;
padding-left:0px;
}
.img{
max-width:100%;
}
In my bootply, I've actually added classes with these attributes rather than overwriting the bootstrap classes like above. Either works, but adding custom classes means it's easier to turn it on and off later.
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.
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.
I want what in the good old days would be a two-column table layout. It's for http://paulisageek.com/resume and is working perfectly with:
.dates {
float:right;
width:171px;
}
but I'm sure I'll break the sizes on updates (and different fonts, and browsers, and font-sizes, etc).
Is there a way to make the second column autosize without forcing a width (or using javascript)? Will CSS3 have a way?
Give your dates column a min-width and a max-width instead of a fixed width. This gives you flexibility but ensures your design won't break:
.dates {
float:right;
min-width:171px;
max-width:300px;
}
Note that min-width and max-width do not include padding, borders, or margins.
Another possibility is make the dates to align right and display inline:
.dates p{
text-align:right;
display:inline;
}
This way you won't need a separate div for the dates.
...Or, if you want to be super-cutting-edge and ensure that your layout breaks in IE, you can use the new CSS3 columns (not recommended here, but still worth reading)
What you've got here is something that works extraordinarily well and easily with tables. Not only that it's incredibly backwards compatible. In "pure" CSS it's hard. You can make one of the columns variable width but not both. If you really need that, stick with tables (irrespective of what the semantic HTML zealots might say).
Yup, it's possible. The keyword to search for is liquid columns. For example this deals with whole layouts but the points are the same.