About Page – 960 Grid – HTML & CSS – SitePoint Forums

I just started working on a website for my friend https://test.prygara.com/ which is based on WordPress Underscores theme and was wondering what would be the correct way to declare the 960 12 col grid in CSS as mentioned here https://www.wearewibble.com/grid-systems-what-are-they-a-quick-guide/ ?
According to the article, it looks like the grid they use can be used for both desktop and mobile designs and they use it for almost all of their projects.

We design using the 12 column grid. Just like Rule 960, but expand the container boundaries. We have even columns, just like the 960 rule, and use an even gutter. We modify this for the actual screen size we are designing for.

I currently have the grid declared as follows:

.site {
    display: grid;
    min-height: 100vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
}

and i did some row based placements but mainly used it for the sticky footer as mentioned here https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers


I don’t buy into the 12 column grid system because it seems too restrictive to me and you end up with a site that looks like bootstrap or other similar frameworks. I understand that having a system in place allows for easy alignment, but rarely have I found that a strict grid matched any of the designs I was given to code.:slight_smile:

However, others swear by them, so I guess it all depends on your approach.

I would take a look at something like this as you can get the code and demos for a 12 color grid and adjust them accordingly.

In essence, the css grid is already a grid, so all you need to know is the css grid. :slight_smile:



2 likes

Thanks for the quick response Paul and the link. I am okay. It makes sense. I guess how you declare the grid differs for each project depending on what needs to be done. I’ll come back to this later and maybe try a side project just to better understand the concept of 12 cols.

Can you take a look at the about page at the above URL? When you start resizing the page there are 2 major issues (see screenshot): navigation (not sure where to put that ham icon on smaller screens) and image alignment and text with the footer’s vertical borders. I’m kind of stuck that I don’t know what the best way to handle these is for smaller screens. I’m pretty much ok with the layout of the office.

I’ll take a look this afternoon as I’m going out this morning :slight_smile:

Ok, I took a quick look and that’s where I would start.

Add this code at the end of testing the css file so that it can be edited easily, but once you edit it, you can integrate it properly because it contains new rules and overrides.

#colophon {
grid-template-columns:1fr 1fr 1fr;
}
#colophon > *{
display:flex;
justify-self:center;
border-left:none;
}
.wp-block-page-list,
.wp-block-categories-list,
.wp-block-social-links {
  width: auto;
}
.wp-block-image img.wp-image-62 {
  width: 100%;
  max-width: none;
}
.home .entry-content figure,
.home .entry-content div:nth-child(2),
.home .entry-content div:nth-child(3) {
  flex: 1 0 0;
}

.home .entry-content figure {
  max-width: 500px;
  min-width: 200px;
}
@media screen and (max-width: 880px) {
  .home .entry-content {
    display: block;
  }
  .home .entry-content figure {
    max-width: none;
    min-width: 0;
    float: right;
    width: 180px;
    margin: 20px;
  }
  #colophon {
    display: flex;
    flex-direction: column;
  }
  #colophon > * {
    border-left: none;
  }
}

Your footer was too wide causing a massive scroll bar. So I changed the grid settings, then on smaller screens I centered the menus. You seemed to be trying to match the footer borders to the columns above, but that would be futile unless you had them both contained in a grid. You can’t really match things up by wiring dimensions because it’s a magic number trick that breaks easily. Therefore, I centered the footer and removed the borders and it looks much cleaner in my mind.

For your three columns I adjusted the column widths to better match the large screen, then on the small screen I floated the image to the right and let the text wrap .

You should of course continue to tweak and perhaps reduce the text size a bit for the small screen and your drop caps etc, but I’ll leave that up to you as it’s mostly tweaking.

I’ve only set up one media query to show the process, but you might need another one at smaller widths just to tweak better, but don’t overdo it because you should be able to get away with just a few media queries.

As an exercise, I left the header section alone as it also needs to be rearranged, but hopefully you can figure this out on your own now that you have a start. :slight_smile:

With my code in place, you should see a display like the following live screenshots.

Hope this helps but yell if you don’t understand anything.

Source link

About Irene S. Stroupe

Check Also

COD Adds Web Development Degree

GLEN ELLYN — The College of DuPage said Monday that it now offers an associate’s …