Okay, I'm trying to make a responsive grid, but it is a bit more complicated than that. It has to be able to:
Resize, be responsive
The grid should have as many elements in a row as it can fit, and
There have to to be at least two elements in a row
The minimum page size is 320px
A element should maintain aspect ratio
Here's a starter: http://codepen.io/loredonut/pen/KJDAE
A CSS-only solution would be great. Thanks for your help!
There is a lot of grids you can use.
Since it looks like you are going for mobile screens, too, have a look at
960 Grid
1140 Grid
Most of the grids will give you x number of responsive columns, which on smaller screen sizes collapse to 100% width.
Now if you really want to get fancy have a look at CSS-column-count and CSS-colum-gap - found here CSS tricks, (caniuse). Although you need some fallback for IE6-9, this should allow you to make colums with different row height - as in this fiddle.
I now used <img>s and made them responsive, here's a demo: http://codepen.io/loredonut/pen/FGneA
There are many grid frameworks that may fit your purpose:
Foundation
Semantic Grid
Golden Grid System
There are also:
CSS Grid (not fluid)
320 and Up (not fluid)
Columnal (not fluid)
Skeleton (not fluid)
SimpleGrid (not fluid)
Less Framework (not fluid)
Bootstrap (non-semantic classes)
Breakpoints.js (only breakpoints, too similar to media queries)
Adaptive images> (only images)
FitText (only text)
HTML5 Boilerplate (old)
See this related question.
My personal favorite is Foundation by the way. It is very actively developed and is based on Compass/Sass.
Try using twitter bootstrap.. http://twitter.github.io/bootstrap/
and u can also combine it with isotope http://isotope.metafizzy.co/ and get MAGIC effect :)
this also could save u hours in integrating isotope with bootstrap: http://mpezzi.github.io/bootstrap_isotope/
Related
I made the download of several free responsive layout (you can find them simply through google if you're curious) and I see that the layout has at least one or two javascript files.
The question is: javascript is essential to create a responsive layout?
Then, in the reply to this question is "no" and you have also the possibility to link a free responsive layout made only with html and css, well, you will receive a wonderfull BIG thank you.
The whole point of responsive layouts is that it can (and should) be done with CSS3 media queries only.
However, this can often require some clever HTML design, especially if you want to have a slide-in menu (hint: :active can be very powerful when combined with tabindex to make an otherwise "inert" element respond to click events like a link) and many developers just can't be bothered with that, especially when jQuery is so readily available.
So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to make things easier, but in general if you think you need it, you probably just need to rethink how you're doing things.
Unfortunately, I have no links to JavaScript-less responsive layouts for you, that's because I'm very DIM - Doin' It Meself!
Edit back While I appreciate Martijn's demonstration of a use of JavaScript in making images essentially have variable resolution depending on screen size, images can be made responsive simply by using SVG if possible. If this is not an option, consider using a container with a background-image - only the image that matches the media query will be loaded :)
Sometimes yes, sometimes no.
First understand what is response layout: Responsive Layout is the one that dynamically changes itself. Depending on the Browser's screen size. So that it fits perfectly on every screen type, size, resolution etc. So that the website's layout doesn't break.
You can just use CSS3 media query to change the layout, or else you can use jQuery or some other JavaScript to make this happen.
But remember, JavaScript is not required to make the document Responsive.
Sometimes Yes!
Sometimes the developer is better in writing the code using JavaScript, such as jQuery API. So he would find it easy to write the code in jQuery to dynamically handle all the events in the Browser window to make a website Responsive.
I myself would find it pretty easy to write the code in jQuery as compared to CSS. So for that purpose, I would have to add the jQuery source file to the document to render it that way. Otherwise I won't be able to create the responsiveness in the Website or would have to stick to the pure JavaScript
Example would be:
if($(window).width() > '1300') {
$('body').css({
'height': '100%' /* etc */
});
}
Sometimes No!
Some developers are good at CSS (CSS3, and its media Queries too). So they try using CSS3 to render the document and make it responsive.
CSS3 is really much easy than jQuery and it would be helpfull to use it. It would also won't require any of the Script file to be included. You can easily write the code, in the default CSS file. And the changes would be made accordingly.
#media only screen and (max-width: 1300px) {
body {
height: 100%;
}
}
But Remember
If you use plain CSS and then use CSS3 Media Queries to change the layout of the website, you will be able to just detect the screen size and other elements. You won't be able to check for the Browser's properties or the content on the screen etc.
Both answers are acceptable.
No, if you pretend to work with something like a flash site, which I hardly discourage it.
Yes, because javascript is essential to do that, CSS3/HTML5 are solutions to your case, but, they come with some javascript included functions, that you will not see, so, there is javascript.
Responsive by Default
No, you do not need JavaScript for Responsive Webdesign. It is necessary for those cool fly outs and sliding effects.
If you do a website in pure CSS, you might need to take some compromises like a different menu layout or always visible sidebar content. Sliders are a problem.
But consider this:
If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers.
Andy Hume in "Responsive by Default",
http://blog.andyhume.net/responsive-by-default/
Media queries allows you, to do responsive pages with css only. But you should remember about jquery function '.resize()' when user change horizontal layout to vertical on phone or tablet.
I am just starting with both media queries and viewport statements. Is this what is used to create websites like the following ?
http://html5up.net/escape-velocity/
http://www.sitediscount.ru/parallaxer3bs/index.htm
What I am trying to achieve is a full page / viewport on all screen sizes. Then on scroll to the next section below is also filled with the viewing area. This is a new popular type web desin and I am trying to figure out how to replicate it. Either html5 or bootstrap solutions would be great. Thanks in advance.
Short answer: Yes, media-queries is the main way to go in order to create fluid layouts.
If you're just starting out, I would recommend you to learn writing these from scratch in order to get an understanding. There is a good article available at http://css-tricks.com/css-media-queries/
However, if you do not wish to code the media-queries yourself; that kind of pages with a fluid responsive layout can easily be made with bootstrap.
To download bootstrap, go to http://getbootstrap.com and start working from there.
I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site
You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.
But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone
I'd like to know what is a good pre-coded jquery slider, but specifically for a 960px site. Also its purpose would be just to auto slide, not worried about buttons so much
I plan to use it with the 960 grid system and have it span across 12 columns
Cheers ^_^
I would recommend http://nivo.dev7studios.com/ as a good slider. It can accomodate images of any size, so it will work regardless of being a 960px site.
I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.