Jump to content
Sign in to follow this  
WebWerx

PageLines Framework 2.2 Grid System

Recommended Posts

beardedavenger

Hey there! That page really has everything you need to know, including how to use it, where, and examples. D you have any specific questions we can help with? Nick


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
WebWerx

Hey Nick (@beardedavenger): Yes I do. The examples all make sense to me. But I'd like to go deeper and understand how I would implement things in multiple areas of a site. For example with this:

[/code]

Can I assume that I can name "

" anything at all (like any div)? How does one go about styling the content within the div class? I'd like to see some more in-depth examples. Maybe I am over-analyzing? Show me some great CSS examples and I will learn.

Share this post


Link to post
Share on other sites
beardedavenger

Most of the demo pages, like the tools page, it's content is built with the grid. So,

sets the stage. It sets a horizontal row, ready for your columns, or "spans" as the classes say. So, for example, you could do something like this:
200x200
Some text here
[/code] Or you can go way advanced and start nesting them. if you nest them, just open up a new row, or div. Example:
[code]
200x200
Some text here
I'm nested
I'm nested too.

Really, the rest is up to your imagination. The columns will be responsive out of the box. NIck


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
WebWerx

Thanks @beardedavenger (Nick): This much I get. I need to go deeper. Can you give me an example of how I would apply CSS to either example above? I know I am missing something basic here.

Share this post


Link to post
Share on other sites
Rob

Write a CSS snippet specific to the class. Add it to custom CSS or style.css.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
beardedavenger

The CSS is already baked into the framework. All you need to do is write the markup. You can extend it further by adding a class like Rob says. For example, div class="row webwerx" then in your custom css,

.row.webwerx {background:@black;color:@white;} 


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
WebWerx

Okay --- that what I was getting at @beardedavenger -- Nick. I wanted to get a clearer view as I will certainly leverage this great add-on to the FrameWork. What does it mean for the columns in BadAss SC? So the key is actually the 'row'. I do have a followup question. As I understand it, one determines column width by the span# IE "span4" is wider then "span2". My next question is can one actually determine an actual pixel width for a particular span? What is the best way to manage this? I am cooking with gas -- just like @rangelone and one of his scrumptious souffl?©'s!

Share this post


Link to post
Share on other sites
beardedavenger

Bad Ass SC will continue to work as normal. NO issues there. The spans, as on the tools page, total 12. It fits into the rest of the responsive columns, so specifying whatever span is really easiest. Span1, all the way up to span12, which is just full width. Check out the source code of the tools page. Nick


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
WebWerx

Okay great -- Thanks again Nick. You are a very talented Developer. You are to coding what @rangelone is to cooking! Beware, I will now start experimenting!

Share this post


Link to post
Share on other sites
patrickacraig

Hey, quick question about the grid - say we wanted to work off of a 24 span grid - is there a way to double the current span count? Thanks!

Share this post


Link to post
Share on other sites
kate1000

div.span4
{
height: auto;
Font: 2em;
background-color: #CCCCCC;
}

 

<div class="row">
 <div class="span4">
content
</div> 
<div class="span4">
content</div>
<div class="span4">
content
</div>  
</div>

I want a row  with 3 4span divs   the center 4span div being a differnet color - so  how do I name the divs  for css? - it seems that if I replace row - or span4- it will break the grid right?

Share this post


Link to post
Share on other sites
James B

Hi Kate

 

You can apply a class to the code like in Nicks example, in the below statement .webwerx is the custom class for the css.

 

.row.webwerx {background:@black;color:@white;}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
kate1000

How then would Nicks the html look?

 

because lets say its  class="span4"

if I break that and name it    

 

class="row webworks"

I break the code for the span and it wont know what span I want it to have... right?

 

 

Gave the id class a try and it wont work

id="name"

This example below didit work.

( css) #span4.name{} with ( htm    class="span4" id="name" )

Share this post


Link to post
Share on other sites
Rob

@patrickacraig

I'm not sure if a 24 span grid would work, but it sure would be incredibly tight. Given padding and so on, there'd be no room for the content in the individual spans.

 

What kind of content are you trying to place there? Perhaps there's a better way to organize it.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×