Community Forums › Forums › Archived Forums › Design Tips and Tricks › Example Fluid Responsive Grid Layout
- This topic has 5 replies, 3 voices, and was last updated 9 years, 4 months ago by kennypress.
-
AuthorPosts
-
December 1, 2014 at 11:34 pm #133398kennypressParticipant
Hi,
I am starting my first site using a Genesis child theme. I'm just wondering if there are any examples or tutorials showing a well thought-out fluid responsive grid for a Genesis child theme?The default Genesis behavior has hard breaks at specific sizes and sets columns to specific pixel widths. I'm looking for an example of something closer to Bootstrap fluid grid but utilizing the default markup of Genesis so I don't have to completely redo all layout & classes. So widths & margins/padding should all be in percentages, with a max-width to set the largest size.
We started using the Bootstrap 12-column grid in designing a while back to make the design/implementation process simpler for both designers and coders (had to pick something). So we have a master design file with all the grids & guides set as overlays. But now we're using Genesis, so hoping for an example of something similar so we can quickly match the coding to the design.
I do like the newer Bootstrap grid, as it uses padding instead of margins for column gaps. Makes it a bit easier to set sizes of everything.
Thanks!
December 3, 2014 at 2:09 pm #133525David ChuParticipantHi,
Every few months or so someone stops by and asks that good question. ๐Just for fun, I chose the Genesis parent theme for a minute, and confirmed that yes, it does use hard-coded widths by default. So there's no code-free way of getting around that. I will say that the freebie Genesis Sample theme does a pinch of Bootstrap-ness by using percentages for a slew of handly column classes. That's good enough for me, generally speaking. I just set a handful of widths, maybe about half-a-dozen things, and then use the column classes for other things, which flex nicely. But if you're looking for something purely without solid breakpoints, it may be a slight pain to use Genesis.
The Bootstrap sites I see usually have a mixture of hard-coded and flexible parts anyway. Frankly, I think with any massive framework like Bootstrap, you're in for some serious coding to incorporate it into whatever framework.
In my case, I'm not as inclined to use 100% flexible layouts, partly due to the designers I work with who are still hyper-focused on exact widths, although with the advance of responsiveness, that tendency is waning. Still, I have been examining CSS grids for years, and I'm still not convinced that I want to use them all the time. I agree with some who say that grids can handcuff designing. I also don't really want to add even more overhead than having 1 framework running.
Enough blah blah... some people are using Genesis with Bootstrap. There are a bunch of people on Github, but not much that's new. This one might be worth checking out, though, or this for non-Genesis.
Good luck in your hunting,
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
December 3, 2014 at 10:32 pm #133542coralseaitMemberReally good points Dave,
I've been using WordPress Twitter Bootstrap CSS Plugin https://wordpress.org/plugins/wordpress-bootstrap-css/ with great success recently; taking the best from BS and Genesis. The plugin works great with Genesis and allows me to pick and chose what I like.
December 4, 2014 at 8:18 am #133583David ChuParticipantCoral,
Thanks for the idea, I think I heard that, but totally forgot about it! Sounds like a pain-free way to check it out!Now that there are so many Bootstrap sites around, there are little giveaway hallmarks, funny little interface quirks, like their buttons and menu gizmos. It's kind of like the smell that emits from old Dreamweaver sites. ๐ But of course one can override any particular element, and in general it has a lot to offer.
If I were going to go the Bootstrap route, I think I would get radical and try running it with something like Underscores. In somewhat related news, there are people rigging up Genesis to work with Foundation, another popular Bootstrap-like framework. There's more recent activity on Github in that realm than with Bootstrap. I recently had a nice Twitter chat with Mary about her promising experiments in that realm.
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
December 4, 2014 at 5:59 pm #133641coralseaitMemberTypically I use it minimally, mostly for Font Awesome / Glyphicon stuff. That plugin + Better Font Awesome make it really simple (and easy) to admin.
December 4, 2014 at 6:49 pm #133643kennypressParticipantThanks for the replies!
I think the only thing I'm trying to take from Bootstrap is the 12-column, fluid grid. I don't need any of the other user-interface/styling things. Just want a quick layout option for going from a design based on this grid to working site.
And I know for it to work there has to be proper markup, including some sort of 'row' container around columns. For now, the site I'm working on is mostly single-column, so leaving as-is. But for a couple CPTs that I have to create templates for, I'm including a 'row' type container, and adding some Bootstrappy column classes. Does make it quick to get proper fluid column widths with proper set gutters.
Guess I was wondering if anyone had gone a little farther with tweaking and/or customizing the Genesis markup a bit to allow for a similar fluid grid to work.
And we've kind of committed to Genesis (at least for now), so don't want to abandon now and try to find another framework.
I guess as designers, we needed something to base designs on that wouldn't require crazy custom sizing & workarounds for each new site. So we settled in to using a 12-column grid (based on BS). This did give at least some 'framework' to design, and made implementing much simpler. And we do everything fluid-responsive, setting break points where the content deems necessary for good layout (not just some arbitrary 'typical' screen sizes). So the sites should look really good at just about any size.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.