Jump to content


Photo
- - - - -

What is the underlying grid system for Framework 2


  • Please log in to reply
5 replies to this topic

#1 jdbrasesco

jdbrasesco

    Advanced Member

  • Members

  • 63 posts
  • LocationSan Francisco, CA
  • Framework Version:DMS 2.0.4
  • Country: Country Flag

Posted 17 March 2012 - 05:36 AM

I've been reading around on the various grid systems - 960.gs, 978, 1080, 1140, etc...8 vs 12 vs 18 vs 24 columns...

Pagelines' Framework default layout is recommending 1100px global content width. Assuming 10px margins, and 12 columns, it looks like an 1140 grid. That said, all the numbers don't quit match up when I plug the numbers into a

Please Login or Register to see this Hidden Content

.

So do I have this right? I need to make some design decisions requiring specific graphic sizes and I want to make sure I'm not missing something.

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 March 2012 - 04:12 PM

I am not familiar with the Framework's grid system, but you may want to factor in any padding that is present in the layout.

#3 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3
  • Country: Country Flag

Posted 20 March 2012 - 06:57 PM

We developed a responsive grid system for you that is pimp! In fact, now that you remind me I'm going to forward this to the docs peeps.

If you want to try and use in your development, it works like this:

Please Login or Register to see this Hidden Content


that should make a three column, responsive/fluid layout for you.

Use pp2, pp4, pp5 for 2, 4, and 5 column setups respectively.

There is also a 'ppfull' mode e.g.

Please Login or Register to see this Hidden Content


that removes the margin for more options (using padding instead)

#4 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts
  • LocationSan Francisco, CA
  • Framework Version:2.3
  • Country: Country Flag

Posted 20 March 2012 - 06:59 PM

Also remember, this uses percentage widths.. so its more flexible than any pixel based grid out there. It also uses css3 transitions on resize FTW

#5 uwmltc

uwmltc

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 20 June 2012 - 03:54 PM

arpowers, Where do I put this customized code for a responsive grid system? I put it in the pagelines-customize/style.css but now I'm not sure where to go to manipulate the settings. Can you help? amangric

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 21 June 2012 - 07:49 AM

@uwmltc The above code goes in your post/page content editor not your style.css, the above code isn't even CSS. All you need to do is login to your Wordpress Admin Dashboard > Posts or Pages, either click on Add New or click on an existing post/page and then in the post/page editor add the above code. In the code, you can see the "content", add your content here and then save the post/page and when you refresh your post/page your content should be columns. **However, with the recent update you can now even more control over content in columns/rows, read the demo that can be seen here.

Please Login or Register to see this Hidden Content