I'm about to create a responsive web design this few weeks. I've read a lot about responsive web design, and one of the method is about grid system. There are 978 grid system, or 12 column grid system, etc. I'm just not so sure what it is use for, and how to implement with the files which is already provided from the website. Example for the website: http://960.gs/
And could you please explain to me what is the different between 24 column grid, 12 column grid, 16 column grid, and many more?
Thanks for the advice.
I'm a front end web developer and while I've designed some layouts, I don't claim to be an "expert designer" by any means. But I do have lots of experience actually building responsive designs in HTML, CSS3 and Javascript so that's where my experience/comments below stem from:
I've briefly read the grid systems too and while they can be useful, I don't really use them - the basic idea behind responsive design is to just build layouts that don't require a fixed size and then combine that with media queries ("snap states"). For a web page I typically have 3 layouts: a mobile/small version, medium, and large. Each one can scale about 250px in width (content can dynamically expand within its container, images scale up, etc.) and then when you get too big you "snap" to the next bigger layout. For example:
small layout: 250px to 450px (1 column)
medium layout: 450px to 800px (2 columns)
large layout: 800px to 1300px (3 columns)
That way no column ever is less than about 250px and never is bigger than 450px so each column has to be able to stretch about 200px.
Personally I'd just start with something simple like that and then after you've played around with it some, then read some more and maybe try incorporating the grid system.
And if you're trying to actually build the front end in HTML/CSS3, I'd just start by using CSS3 flexbox layouts (you can also use "float" with percentages if you want to support IE and older browsers but it's a little more difficult):
http://www.html5rocks.com/en/tutorials/flexbox/quick/
Through grid system you make website responsive by dividing your website into different columns for different mobile device. Below are few example that may explain you it better
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
for 24 and 16 grid you can divide accordingly.
I hope so that it may help you understand better.
Related
I built an iOS app with React Native. I used Expo to build it. In dev mode, I have an image that I manipulate and it works as expected. In production mode the image is zoomed in and cut off. Here is the code:
<Image
source={require("../assets/Logo.png")}
resizeMode={"center"}
style={{
resizeMode: "center",
transform: [{ scale: 0.8 }],
width: 250,
height: 75,
}}
/>
The reason I have both the resizeMode prop and the style is because it wasn't working earlier so I just added both in hopes that one of them would work. Please let me know if you know what the problem might be. Thanks.
There is the issue with center resize mode in iOS, see the issue for details.
Use contain instead, which is probably the right approach anyway in this case.
contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
See all options for resize mode.
I have made a responsive design on Wordpress and have adjusted everything. The whole layout and slideshows and plugins adjust to the window width, but I can't make the fonts responsive. I have tried many different options with percentages and also now with Vw and Vh. It does work but viewport width and height units have too big intervals and unfortunately when the window resizes the changes are very dramatic. I need some smooth way of reducing font size with the window size with little changes and also preferably minimum width to be set to some fixed unit. Please help me, is it possible with just CSS?
Sounds like you want to have pretty fine control over the font sizing.
There's a great article over on CSS-Tricks that outlines some of your options. Chris recommends using vmin to control the font-size. After experimenting I'd recommend using vmax because it will select the max of vw and vh, which kinda serves as the minimum font-size you mentioned.
Something like:
p {
font-size: 2vmax;
}
Also note: there's a bug in Chrome 20+/Safara 6+ that prevents the font from resizing itself according to the new viewport size.
If this isn't fine-grained enough unfortunately I think you're going to have to use js. I'd recommend going with one of these fine plugins:
SlabText
FitText
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks
I've been researching responsive design recently and had the thought why not use a flow layout instead of something like a 960 grid? From my research, 960 was chosen to fit the most popular monitor size. But on larger or wide screen monitors, there is still a lot of empty space.
The thought I had is shouldn't the largest size for media query be 100% page width? Instead of 960 px?
Can anyone explain why this isn't the norm, or why people default to a fixed width for responsive design?
If you want to use widths wider than 960px, then the Bootstrap grid is one option, so you don't need to reinvent the wheel.
Bootstrap 3 is in the process of being released and while the grid classes have changed you can still get responsive full page layouts or responsive layouts with a max width of 1200px
An example of a full page grid
An example of a max 1200px grid
Foudation used to have max grid options around 1100px though as far as I can tell, out of the box with Foundation 4 the max is now around 1000px. It should be easy enough to change this though by using a custom setting for the width of the .row class
As for your question
The thought I had is shouldn't the largest size for media query be 100% page width? Instead of 960 px?
as #cale_b noted, readability could be an issue with full width layouts unless you are carefull with typography and font sizes. I think it is certainly doable if you are careful with the design though.
It will depend on the site design.
Good luck!
I'm building a responsive site using WordPress, and images are automatically set to height:100%; width:auto; and the div resizes according to window size. But this often means some images have their height set to higher than their actual height causing pixelation. What i need is something like height: 100%; width:auto; max-height:"image height here". How, if this is possible, is this possible?
The page where this is an issue is here: http://wheretoimmigrate.com/onthemouse/?portfolio=atomic-clothings-2012-campaign
I resolved it by simply making the images larger by adding a transparent background of larger size and different proportions. Tricked the system into treating it like a larger image. Worked perfectly.