I volunteered to build a Wordpress site for my company. We’re a small creative agency and normally go to freelancers when we need to build websites for clients.
I work on the business side (excel mainly), and I volunteered because I would LOVE to transition and become the main developer here.
Originally I built it with inline-block and giving each content percentage widths – but then realize you can’t stack elements with inline-block.
Then I was told to look into grid, and that’s how it’s currently built – but it’s not showing up on Safari! or at least my work computer’s Safari. So I’m worried about browser compatibility.
I dove into masonry js and isotope, but the content gets rearranged everytime I resize the browser. When using these libraries, I used percentage widths again – so for instance, the first content on top has 56% width, and the 2nd content gets 44%.
But basically, I’m just seeking advice on how to best approach this layout, as close as possible. Should I just stick with grid, or keep trying with masonry/isotope?
Thanks in advance! and I would appreciate any feedback I can get
EDIT: I just learned about @supports for CSS. I guess I’ll use it for the grid, and use inline block as fallback for older browsers. Just for the time being. I can always go back and made changes any time.
Hi - nice job on the website and layout! It’s just my personal preference, but I would stick with CSS Grid (I think that’s what you said its in already?). I have played around with masonry.js and I don’t like it. It was more frustrating for me than it was working…but maybe that’s just me. I’ll check my iPhone on the layout issue as I don’t have Safari on my PC (i have a windows pc), but this website says grid is supported in Safari 10.1 and iOS Safari as of March 2017.
Hope this helps And I hope you do get to be the main developer!! That would be so great…
Yeah it’s already in grid, but if you were doing this, would you use grid yourself?
Is there anything that you would improve on by chance? I mean it could use some tweaks on the design (font-size etc). but on a larger scale, anything you would do differently for the layout?
Yes, I would use grid myself. In fact, I’ve been using Bootstrap for a lot of projects but I feel I don’t have the flexibility with Bootstrap to do these kind of layouts. Grid gives us more flexibility for sure. That’s how I started out with masonry.js. I’ve was working on a personal project (a simple note app with Node.js and MongoDB ) and I wanted a similar layout to what you have here just to make it real fun. But I was frustrated with masonry.js and bootstrap too.
I don’t think it really needs improvement, but if I had to think about what I’d do… the only thing would be maybe at the bottom where you have the blue award box where it says 'We took the gold home in February", maybe just fill out your grid with some more small boxes like that or more text right there…if you know what I mean? Just something to fill out the bottom of your grid so it looks even at the bottom. Otherwise, I really think there is not anything to improve on.
If you want to address the text size, have you looked at the responsive typography challenge here on FCC? You can use viewport units to adjust font-sizes. For example:
//70% of the viewports smallest dimension
font-size: 70 vmin;
//50% of the viewports bigger dimension
font-size: 50 vmax;
There’s more to it in the lesson, so I’ll give you the link here if you haven’t seen it:
It’s a good choice though using Flex through Bootstrap is perhaps easier.
Have you themed wordpress before? When doing a custom them I like to use Boilerplate (you can download in Wordpress) as it is specifically for custom themes. I child theme it then apply my customization.
Wow thank you so much! I truly appreciate your feedback. I guess I can move on to tweaking the small details now and spend less time worrying about the layout (though I will keep trying to improve it)
Will look into the typography course as well. I did have some frustration with finding the middle ground for font sizes in between media queries.
Thanks for the input. I haven’t spent much time with Boostrap, nor Flexbox (or any major libraries for that matter).
I particularly tried to avoid Bootstrap because I wanted to get better at the foundations first. But now that I’m going through my first real project, I’m realizing how much libraries can save so much time, and how it’s important to know what tools are available out there so you’ll know what your options are. It was the reason why I tried masonry and isotope in the first place. So I will definitely get more practice with Bootstrap.
And this is my first wordpress theme I also took a course regarding PHP for Wordpress, but never learned the foundations of PHP. I just took a look at Boilerplates, and I assume the converts HTML/CSS specifically for Wordpress? Which one do you particularly use?
Boilerplate only gives you the elements you need so that wordpress works…you apply your styles to it to make it look good. Use it as a child theme so your code does not get over written during an update but you still get the updates. Wordpress does not convert html or CSS. Php is only for back end.
I tried to implement fallback using @supports not (display: grid) – but my browser isn’t picking it up. The version is Yosemite 10.10, which is apparently from 2014…
I wanted to put inline-block and assign percentage widths to each content on the page. Would you have any insight on how I can properly implement fallback?
I’m apologize @giantqtipz - I was not well yesterday, so I took a break from coding and I had not seen this until just now! Let me look up a couple things and then I’ll get back to you with what I come up with!
Here is a Codepen on using CSS Grid layouts with @supports - it’s pretty cool, I like the layout here too.
And here’s a link to Mozilla Developer Network regarding @supports
In regard to using Yosimite 10.10, it looks like you can no longer update that browser (according to this website). I don’t know if we will be able to solve the compatibility issue with that particular browser. I know there are certain things you can do in CSS/JS to help with Firefox, Chrome, Internet Explorer, and Safari compatibility though. More research to do on that.
And I hope you do get to be the main developer!! That would be so great…
I also took a course regarding PHP for Wordpress, but never learned the foundations of PHP. I just took a look at Boilerplates, and I assume the converts HTML/CSS specifically for Wordpress? Which one do you particularly use?
