About page – 960 grid – HTML & CSS – SitePoint Forums

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 the WordPress underlining theme and I was wondering what would be the right 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 seems that the grid they use can be used for desktop and mobile designs and they use it for almost all their projects.

We design using the 12-column grid. Same as rule 960, but it expands the boundaries of the container. We have even columns, just like rule 960, and we use an even channel. We change this to the actual size of the screen 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 line-based placements, but I used it mostly for the sticky footer as mentioned here https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers


I don’t buy the 12-neck grid system as it seems too restrictive to me and end up with a site that looks like bootstrap or other similar frames. I understand that having a system in place allows for easy alignment, but I have rarely found a strict grid to match any of the designs I have been given to encode.: 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.

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



2 I like it

Thanks for the quick response Paul and the link. I agree. Makes sense. I guess how you declare the grid would differ for each project depending on what needs to be done. I will review this later and perhaps attempt a parallel project just to better understand the concept of 12 col.

Can you take a look at the page above URL? When you start resizing the page, there are 2 main issues (see screenshot): navigation (not sure where to place this ham icon on smaller screens), and alignment of the image and text with the vertical edges of the footer. I’m a little stuck because I’m not sure which is the best way to handle them for smaller screens. I’m fine with the design of the desktop.

I’ll check it out this afternoon as I’m out this morning : slight_smile:

Okay, I took a quick look and this is where it would start.

Add this code at the end of the css file test so that it can be easily changed, but once you’ve adjusted it, you can integrate it properly, as it contains new rules and replacements.

#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 and caused a massive scroll bar, so I changed the grid settings and then, on smaller screens, focused the menus. It looked like you were trying to match the edges of the footer with the columns at the top, but that would be useless unless you had them both in a grid. You really can’t match the dimensions of the wiring, as it’s a magic number trick that breaks easily. So I centered the footer and removed the edges and it looks a lot cleaner.

For your three columns, I adjusted the width of the columns to better match the large screen and then on the small screen I floated the image to the right and let the text adjust.

Of course, you should keep adjusting and maybe slightly reduce the size of the text for the smaller screen and uppercase, etc., but I’ll leave it to you to do so, as these are mostly adjustments.

I’ve only placed one media query to show the process, but you may need one more at smaller widths just to fit better, but don’t overdo it, as you should only be able to come up with a few queries. means.

As an exercise, I have left the header section alone, as it also needs to be reordered, but I hope you can sort it out for yourself now that you have a start. : slight_smile:

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

I hope it helps, but call me if you don’t understand.



Source link

Related post

Open House: What steps can be taken to check the rising cases of suicides among youths? : The Tribune India

Open House: What steps can be taken to check…

Education institution should set up helplines To begin with, it should be made clear that stress is a physical reaction to…
Here are the top 25 start-ups to work for in India

Here are the top 25 start-ups to work for…

It’s also great to see young professionals embracing India’s startup ecosystem, with 56% of all hires at the top 25 startups…
Micro:bit launches new Python Editor to help more children learn text-based coding languages

Micro:bit launches new Python Editor to help more children learn…

Micro:bit Educational Foundation, the educational nonprofit on a mission to improve children’s digital skills, today announced that it’s even easier for…

Leave a Reply

Your email address will not be published.