Help choosing CSS framework

spacewalk · 2013-03-21 17:31:53

michaelkpate wrote:

I’ve been playing around with some of the designs from HTML5 Up that are based around 5grid.

Those are pretty nice designs at HTML5 Up. Thanks for mentioning them. Any examples of TXP integration you’d like to share?

phiw13 · 2013-03-23 02:48:37

philwareham wrote:

Anyway, I use griddle for my grid system which doesn’t have that problem. We use griddle in Textpattern 4.6 too.

As you found out recently, Griddle is quite a bit sensitive to font-metrics. I’ve been using a variant on it for quite a while that hasn’t given me problems so far on any platform (although Windows 8 tablets are still in doubt for the simple reason we don’t know anybody who has such a tablet). Here is a demo. See the source for details.

michaelkpate · 2013-03-23 15:16:06

spacewalk wrote:

Those are pretty nice designs at HTML5 Up. Thanks for mentioning them. Any examples of TXP integration you’d like to share?

Not just yet but I want to use the first one for my personal website so it isn’t too far off. I just need a little bit of free time. :)

phiw13 · 2013-04-27 01:41:13

This flexbox based framework sounds interesting, with –at first sight– good fallback up to IE 8. I haven’t fully tested yet, assessment is based on reading the docs.

(via Bruce Lawson’s reading list)

philwareham · 2013-04-27 07:18:09

So flexbox is finally useable huh? Going to check it out now, thanks.

RedFox · 2013-04-27 08:36:45

I’m using The Goldilocks Approach for two years now, because it’s flexible and still very basic; the same (more or less) qualities Textpattern has … :)
But the devs are very busy (Typecast) so there hasn’t been an update for a long time. This thread gives some fuel to decide which system will be next. Bootstrap and Foundation have far to much code to make simple sites the easy way. So I’m happy with all suggested recommendations, because I didn’t know them.

RedFox · 2013-08-04 09:32:49

“Scalability with REMs and unit-less line heights” > Cardinal looks promising too! Now I need a new client to investigate one of the remaining three: Cardinal, ptb/flexgrid or skelJS … ;-)

[Edit]
I’ve a new client … :) … but there are so many (new) grids (see next post) … maybe I’ll stick to my old one.

Last edited by RedFox (2013-09-07 08:46:08)

RedFox · 2013-09-07 08:41:05

New kid on the block (successor to 960.gs) > Unsemantic … from Nathan Smith … all %%

colak · 2013-09-07 09:12:34

hey 960 was my favourite framework. I’ll definitely look into this. Thanks Joop.

RedFox · 2013-09-16 12:29:49

I’m looking into Foundation now, because 1) Joshua Vaage has setup a repo at GitHub called: > txp.foundation and I think that’s a good thing … and 2) all other (small) frameworks mostly have only one dev working at it. I presume Foundation will be updated frequently the years to come and version 4 is more than interesting. The grid is very easy to work with.

If there are more Txp men/women going into Foundation then that would give txp.foundation a real boost. This is an invitation … :)

I have setup a static site (only Foundation (raw); no Txp) to play with the grid and layout > Foundation-3C-1200-2/ … and of course I’ve a question:

The default nav of Foundation is rather complicated (for me that is) and I found and like a ‘better’ nav: Responsive Nav … but the #nav is displayed as an overlay on top of the header … instead I want #nav ‘above’ the header. I’ve tried everything possible that I know of (I’m not a dev) but I can’t manage this … :(

Is this possible and how can it be achieved?

[edit]
Same question on StackOverflow

Last edited by RedFox (2013-09-16 12:35:34)

phiw13 · 2013-09-16 12:59:16

RedFox wrote:

The default nav of Foundation is rather complicated (for me that is) and I found and like a ‘better’ nav: Responsive Nav … but the #nav is displayed as an overlay on top of the header … instead I want #nav ‘above’ the header. I’ve tried everything possible that I know of (I’m not a dev) but I can’t manage this … :(

Wait, I’m confused… Looking at that ‘Responsive Nav’ demo, on smaller screens (aka phones), the full navigation slides down from the top, and pushes the header and the rest of the page down the screen. Is that not what you want? An overlay would be the menu covering/hiding the header of the page, or IOW position on top of the header as new layer.

(Tested both desktop Safari and iOS6 Safari).

RedFox · 2013-09-16 14:47:25

Hi Phil … sorry, that my post is confusing you … maybe my English isn’t good enough … so, I’ve taken a screendump (laptop) >

All the green is the header and as I see it the #nav (orange li’s) is on top of it. I think it has something to do with the HTML because indeed the homepage of Responsive Nav is doing just fine.

[edit]
After reading the demo (code) of Responsive Nav in detail, it’s clear to me (and to Phil) that it can’t be the header although the background-color:green is ‘floating’ around the right side of the nav. Giving #nav ul a unique background-color makes it clear … :)

Last edited by RedFox (2013-09-16 22:38:38)

tye · 2013-09-16 22:04:34

To keep the in the grid you need to Put your ul#nav back into the grid flow…. there are many different ways to do this in Foundation – here is a quick fix which uses the grid classes:

<div lass="collapse row you_custom_class">
<div class="columns large-12">
<ul aria-hidden="false" style="transition: max-height 400ms ease 0s; position: relative;" class="closed" id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
 .your_custom_class {padding:0;}

Then remove your max-width from your .row and .one and create a custom class with max-width and wrap the on page elements you require with these.

And add a background color to your ul to match the li’s…. if that is what you are wanting

RedFox · 2013-09-17 06:09:37

Thanks Tye … a lot of div’s and classes but the template ‘looks’ alright.
Now I can ‘play’ with all kinds backgrounds … yes, colors … but soon images, patterns, video, animated gifs … :)

Last edited by RedFox (2013-09-17 16:03:33)

kvnmcwebn · 2014-06-22 19:15:02

I’ve been looking at skeleton here, but isn’t the 4.5 install kind of a minimal framework all ready.

Textpattern CMS

Textpattern CMS support forum

#16 2013-03-21 17:31:53

Re: Help choosing CSS framework

#17 2013-03-23 02:48:37

Re: Help choosing CSS framework

#18 2013-03-23 15:16:06

Re: Help choosing CSS framework

#19 2013-04-27 01:41:13

Re: Help choosing CSS framework

#20 2013-04-27 07:18:09

Re: Help choosing CSS framework

#21 2013-04-27 08:36:45

Re: Help choosing CSS framework

#22 2013-08-04 09:32:49

Re: Help choosing CSS framework

#23 2013-09-07 08:41:05

Re: Help choosing CSS framework

#24 2013-09-07 09:12:34

Re: Help choosing CSS framework

#25 2013-09-16 12:29:49

Re: Help choosing CSS framework

#26 2013-09-16 12:59:16

Re: Help choosing CSS framework

#27 2013-09-16 14:47:25

Re: Help choosing CSS framework

#28 2013-09-16 22:04:34

Re: Help choosing CSS framework

#29 2013-09-17 06:09:37

Re: Help choosing CSS framework

#30 2014-06-22 19:15:02

Re: Help choosing CSS framework

Board footer