I have a question on converting an existing (non-responsive) site to a semi-responsive one.
Facts:
We have a separate site for mobiles, so no issues here.
Our desktop site is 978px width, and this won't change for those screens of 978px and above.
Tablets however, starting from 768px to 977px - will need some customisations on the layout.
Therefore, our site needs to become "semi-responsive" to cater for the 768px breakpoint, 800px breakpoint etc. for common tablets.
Our site uses pixel widths almost everywhere. We're doing research to:
a) Convert our container to a grid-based version where we use 12 columns. This will still be our own coded approach rather than relying on a framework like Foundation or Bootstrap. However the concept will be to use similar percentages as Foundation (e.g. a large-6 on a 12 column grid would be width: 50%) and then we will customise the paddings etc. from there.
b) OR we use a 10 column grid, which makes more sense to use because the numbers are a lot simpler, e.g. large-1 has a width 10%, large-2 (two out of ten blocks) has a 20% width, and so on.
I'm wondering if there is any specific reason to go for a 12 or 10 column grid? We don't have a specific 12 or 10 column design as we are altering the existing website with some element of re-design for the headers/footers. I know that a 12 column grid is standard, and I've never heard of a 10 column grid, but I am curious if you would choose a) over b) above, or not? Is there any compelling reason for me to choose the 12 column grid if a 10 column makes more sense and has less hassle for margins/paddings and getting columns to fit within a 100% width exactly?
We are also considering http://www.responsivegridsystem.com/ which is a different simpler approach, but I think that this is quite different to the above so we'll experiment with this separately.
Any advice would be much appreciated.
Many thanks
Grid systems are normally based on a 12-column grid due to the fact that 12 is divisible by 2, 3, 4, and 6 evenly. If you used a 10-column grid system, you would be able to easily set up a 2 column layout, but three would be much more difficult. The 12-column system makes 2-column, 3-column, 4-column, and 6-column layouts very easy to figure out the math.
Since this is a more custom application, I would suggest not treating this as a responsive grid choice, but rather what responsive methodology will work best for your set of constraints.
I personally recommend Bootstrap's grid system as it is very easy to use and get started with quickly.
Related
When learning CSS and making responsive column layouts, I was taught the flexbox method (but also the fact that you should avoid using it too much). Recently, I watched a newer video from teamtreehouse that uses columns, column-counts and so on, to make a responsive column design. Which one is better to use, or is there a third option that is the best?
Edit: Sorry, apparently it's an older video. The reason I'm asking is because it wasn't on my web design track so I wasn't sure whether it was relevant anymore.
Most modern page layouts are moving away from floated columns and migrating to flexboxes. You'll find that even bootstrap 4 are going to be basing their layouts on flexbox.
The main advantage of using flexbox I find is vertical alignment, which is revolutionary. Because before that was one of the biggest pains developers had to face. You can also re-order dom elements which is pretty cool. There's also flex basis, which allows you to have a div with a fixed dimension, and allow other divs to occupy the remainder of the width/height. The possibilities are endless!
TL;DR Flexbox makes your life hella easier. Only if supporting older browsers isn't an issue.
I came across the column-count in our codebase, and was surprised by it, after 6 years of being a frontend dev, I hadn't heard of it. So I dove into it a little bit and also found this thread. To answer the original question above:
When to use column-count
When you are using a lot of text or for instance checkboxes, and you want to order them into columns, column-count is a good option. It basically creates the columned layout of a news paper article for you. So you give the number of columns and the browser will calculate the height. The drawback here is that you often times don't want multiple columns on smaller devices, so you would have to put it within a media query. If you want to know more about it, read this article: https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
When better not to use column-count
If you want to have more control over your columns and rows, for instance where certain content should go within the column, use flexbox or grid. Also when you don't want columns to have the same width, you are better of with flexbox or grid.
Note that CSS grid is not the same as the old floated columns. It sounds like teamtreehouse used CSS grids.
The CSS grid is a 2d system (rows and columns) while flexbox is 1d (either rows or columns). So they can be used in conjunction, css grids for the page layout and flexbox for the internal detail layout. See :
https://tutorialzine.com/2017/03/css-grid-vs-flexbox
You might want to take a look at Boostrap if you are already comfortable with CSS and want a responsive design. It's easy to pickup. I find it saves me alot of time and effort rather than coding your own CSS for every project.
When working with css you need to constantly think what browsers you want to support, and then choose which features to use. For that there's a handy website http://caniuse.com/
For example in your case you can see that ie8 doesn't support columns http://caniuse.com/#search=columns and neither it supports flexbox http://caniuse.com/#search=flexbox so if you want to support ie 8 I suggest you would use the tipical floated column approach. There's many grid systems out there but I'd go with as suggested above. http://getbootstrap.com/
I have a table that has 10 columns and for an advanced user, there would be 20 columns. So the column width would change based on the user. I was using 'px' to specify the size of each column. Is 'px' best way of doing it? The programmer before me used '%' for another grid (unlike mine, it had fixed number of columns).
This application would run on IE8/ IE9.
Intent of question: Is 'px' best way to specify width in situations where the column numbers might change frequently.
To be honest you are overcomplicating matters for yourself. Its true that vanilla frameworks are bloated but you can cut out what you don't need and use the rest.
Por ejemplo:
Foundation 4 Grid Framework
http://foundation.zurb.com/develop/download-f4.html
Patch for IE8+
https://gist.github.com/hatefulcrawdad/5068210
To answer you original question however, there is no right answer. You can have a column framework using pixel widths using the older methods of floating and clearing
You could also have a percentage based framework which uses a pixel based container to simulate pixel widths.
In Short
I recommend you study the CSS on grid systems such as Bootstrap, 960Grid and Foundation (my personal recommendation) and how they work for you.
Then develop your own based off the system you prefer. You'll also gain a better understanding of Grid System development.
Please forgive me, but can somebody please explain to me the purpose of the Fluid Grid, as featured on cssgrid, for example. By grid, I refer to those columns, some are 9, others 12, others 24 columns...
1). Is the grid used as a background, or stencil, for the correct sizing and positioning of DIVS?
2). Is it essential that a fluid grid (9, 12, 24 columns) is used in designing for a Responsive website, or can I just use CSS3 and media queries to define break points?
3). What's the difference between the number of columns, and why would I use 9, instead of 24 columns, for example. Is a higher column count better for more content?
4). Why are there so many Fluid Grid generators available? Is it because each one is better or different in some way?
Thank you
1). Is the grid used as a background, or stencil, for the correct sizing and positioning of DIVS?
Yes, that's more or less it. You could picture the grid as an invisible stencil to help with the sizing and positioning of the divs. Since you are talking responsive design, the widths of the grid columns will vary, depending on the width of the veiwer's browser window.
2). Is it essential that a fluid grid (9, 12, 24 columns) is used in designing for a Responsive website, or can I just use CSS3 and media queries to define break points?
Grids are intended to simplify your life, but there's nothing to stop you rolling your own solution, or mixing custom CSS styles with an off-the-shelf fluid grid framework
3). What's the difference between the number of columns, and why would I use 9, instead of 24 columns, for example. Is a higher column count better for more content?
You can picture that for a given window width, more columns = narrower columns. You might find that more columns gives you better control for a given page layout, just depends on the specific of your project. In practice, more columns will actually give you less space for content because of the gutter or spacing between each grid column. If you are thinking resoponsive design including mobile, then at some point most grid frameworks start displaying the columns as a vertical stack, ie:
1-2-3
becomes
1
2
3
Dividing a hand-held screen into 9 vertical columns isn't going to be very usable
4). Why are there so many Fluid Grid generators available? Is it because each one is better or different in some way?
Partly personal preference, you may like one option over another, and partly different features. Some frameworks like Foundation or Bootstrap come with a lot of extra CSS styling as well as additional javascript resources that you may wish to use.
Have fun ... it's an interesting time for web design!
Know it deeply with ETHAN MARCOTTE - Alist Apart on RWD.
I know probably most of you know all of these stuff but still maybe out there are people like me who are just starting to learn these stuff about grids in css. and maybe these questions will help them too.
What are grid systems ?
how to calculate a grid system in pixels and percentages ?
What are offsets? How to calculate offsets ?
Is it better to use a grid system ?
As you have probably already encountered there are so many different grids and css frameworks it can be a little confusing, so I will try my best to help.
Grids are nothing more than an area of screen broken down into segments. Most grids are typically split into groups of 12 (or multiples of twelve). So with a container 960px wide and having 12 groups (which I will now call columns) each column is 80px wide.
Calculating grids can be complex and when combined with adding gutters, offsets, margins, nesting, containers, etc. your css can get rather messy pretty quickly.
There are a number of grid based css frameworks out there with the two most popular being Bootstrap by Twitter and the Foundation by Zurb. I believe that these two have grown in popularity over Blueprint CSS and 960 grid + others as they offer a wide range of plugins as well as layers of scaffolding to help building really nice looking responsive websites.
Hope this helps.
I'm having a tough time fully understanding how to use Frameless Grid. I mean, I completely understand the concept. It sounds great.
I guess my beef is just that it doesn't offer anything in the way of positioning your elements. It just sets their width, and that's that. So even if you apply the column widths to your elements, everything just stacks unless you start floating or positioning absolutely.
In this regard, I guess I'm looking for some advice on whether there's some universal positioning styles I can use to keep these elements from stacking.
Or is this just too broad? Should I just be positioning my elements on a case by case basis?
(Also just an FYI I am utilizing SASS, in case that helps at all)
Thanks!
UPD: Frameless Grid has come up with actual code (SASS, LESS and JS), so the answer below is outdated.
Frameless is more of an approach than a grid framework.
It doesn't do anything by itself, other than a single function for grid calculation (even without proper documentation on how to actually use this function).
Let's have a look:
1. Make a regular fixed-width grid.
Pick a column width, a gutter width… you know, the usual stuff. Don’t worry about the amount of columns just yet, but otherwise use whatever criteria it is that you usually use to create fixed-width grids. I recommend using a relatively small column width for added flexibility.
We have to assemble a grid on our own. Use any stuff to acheive that, Frameless doesn't provide any. Column width should be fixed width.
2. Make it repeat infinitely.
Now, give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you’re looking at an infinitely wide honeycomb filled with columns instead of hexagons.
By "infinite number" they seem to mean "any number necessary". Frameless homepage works with fascinating 26 columns (you require display width of 1920px to view that), but frameless.scss only provides variables only for 16 columns.
By "give your grid a number of columns" means "come up with a design that leverages certain amount of columns at maximum".
3. Center it in the viewport.
Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.
That's very basic, but it requires us to do another line of CSS code manually.
4. That’s it, really.
Start using the grid. Use media queries to adapt your design as more columns become available. Since you’ll be adapting column by column instead of pixel by pixel, you can choose exactly when your layout should and shouldn’t adapt. This site, for example, only adapts around 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.
No, that's not "it". That's where the work actually starts.
You have to manually code your grid to adapt to various viewports, and Frameless does not provide any tools for that.
So if you're looking for tools that you can use to assemble a grid, i recommend Susy. It's a great and elegant piece of SASS.
Susy is very versatile. It has different grid types (demo). It also has different approaches: you can go content first by declaring single column width and letting Susy adjust the number of columns to match window width. Or you can declare what numbers of columns correspond to what window widths and let Susy adjust column widths accordingly.
Susy lets you achieve what Frameless suggests, but it also provides all the tools necessary. Being different technically, Susy shares the same idea: start with a small grid for mobile phones and make it larges as the screen gets larger. This demo illustrates two such steps: it starts with 7 columns but turns to 12 columns if screen width suggests.
Here i've created a website that uses Susy to stretch in five steps: http://am-teh.ru You can see the code behind this site's layout (and also its concept's evolution) in this StackOverflow post. Susy's developer has commented on it positively.