Jump to content

Question about pocketgrid.css

pwired

By pwired
in Dev Talk

 Share

Recommended Posts

pwired Hero Member

pwired

Posted
Posted

Hi,

I just started with Pocketgrid and on the example page it shows:

<div class="block-group"> <!-- First row -->
<div class="b1 block">b1</div>
<div class="b2 block">b2</div>
</div>
<div class="block-group"> <!-- Second row -->
<div class="b3 block">b3</div>
<div class="b4 block">b4</div>
<div class="b5 block">b5</div>
</div>

with css

/* First row */
.b1, .b2 { width: 50%; }

/* Second row */
.b3 { width: 50%; }
.b4, .b5 { width: 25%; }

- - - - - - - - - - - - - - - - - - - -

My question is, is it only possible to use the format b1, b2, b3, . . . . , bn ?

Or can you also replace them like this where r stands for row and c stands for column:

replace b1 with r1c1

replace b2 with r1c2

replace b3 with r2c1

replace b4 with r2c2

replace b5 with r2c3

So if I replace upper html and css in that way, is the following allowed ?

<div class="block-group"> <!-- First row -->
<div class="r1c1 block">row1 column1</div>
<div class="r1c2 block">row1 column2</div>
</div>
<div class="block-group"> <!-- Second row -->
<div class="r2c1 block">row2 column1</div>
<div class="r2c2 block">row2 column2</div>
<div class="r2c3 block">row2 column3</div>
</div>

with css accordingly:

/* First row */
.r1c1, .r1c2 { width: 50%; }

/* Second row */
.r2c1 { width: 50%; }
.r2c2, .r2c3 { width: 25%; }

kongondo Hero Member

kongondo

Posted
Posted (edited)

Absolutely! You can change those. PocketGrid has only two classes; 'block-group' [which creates a row] and 'block' [which creates a column] :-). Have a look at the css file - it's only 43 lines long unminified :-)...

The b1, etc you see on the demo site are custom classes to make it clearer what's going on.

Edit: 

As you can see, it is very versatile and can be as semantic as you want (if you care about such things  ;)). Btw, block and block-group can be applied to any element, not just <div>

Edited by kongondo
  • Like 2
pwired Hero Member

pwired

Posted
  • Author
Posted

Thanks kongondo, I wasn´t sure about it but that makes pocketgrid very flexible.

I really fall in like with this css grid. Can´t imagine using another grid anymore.

Manfred62 Sr. Member

Manfred62

Posted
Posted

you can use whatever classes you want.. See the FAQ. But the main advantage of PocketGrid is, that you can use own semantic html/classes.

I don't use such col-b1-b2-whatever classes. Better use head, sidebar, navigation, subnavi etc. classes like here. Makes more sense for me.

  • Like 3
kongondo Hero Member

kongondo

Posted
Posted

Thanks kongondo, I wasn´t sure about it but that makes pocketgrid very flexible.

I really fall in like with this css grid. Can´t imagine using another grid anymore.

You won't regret it :-)....The Master :P himself uses it in his blog  :lol:

you can use whatever classes you want.. See the FAQ. But the main advantage of PocketGrid is, that you can use own semantic html/classes.

I don't use such col-b1-b2-whatever classes. Better use head, sidebar, navigation, subnavi etc. classes like here. Makes more sense for me.

Same here. No more 'three columns small' stuff for me (no offence to other Grids out there :P  ;) )

  • Like 2
pwired Hero Member

pwired

Posted
  • Author
Posted

@Manfred62 - aahh yes that is even better, thanks. Going through the example pages.

<body class="block-group">
<div class="header block">Header</div>
<div class="nav block">Nav</div>
<div class="main block">Main</div>
<div class="links block">Links</div>
<div class="footer block">Footer</div>
</body>

kongondo Hero Member

kongondo

Posted
Posted

@Manfred62 - aahh yes that is even better, thanks. Going through the example pages.

<body class="block-group">

<div class="header block">Header</div>

<div class="nav block">Nav</div>

<div class="main block">Main</div>

<div class="links block">Links</div>

<div class="footer block">Footer</div>

</body>

Yeah, but remember this will only create one row, if that's what you want...Of course, that will be OK if you want to utilise the "automatic rows" feature

  • Like 2
reems Full Member

reems

Posted
Posted
 

I like Pocketgrid as well. Simple and flexible.

To position contentblocks exactly where I want them I use by example  the following

<div class="block-group">
<div class="beforemyblock block"></div>
<div class="myblock block"><div class="mycontentblock">Content</div>
<div class="aftermyblock block"></div>
</div> 

In my css with mediaqueries I can, depending on screensize, move my contentblocks around by changing the width property for the "beforemyblock" classes in every block-group, keeping the total width in every block-group on 100%.

I let my "before" and "after "classnames correspond with the sort of content, by example logo, menu, top10, etc.

  • Like 1
horst Hero Member

horst

Posted
Posted

Hi,

in the examples of pocketgrid it is to read that this should support n-th child for IE 6 - 8, but like I understand the code it only selects IE7 ??

        <!-- For nth-child support in IE6-8 -->        <!--[if (gte IE 6)&(lte IE 8)]>

I thought gte = "is greater then" and lte = "is lesser then". I'm wrong or right?

reems Full Member

reems

Posted
Posted

Hi Horst,

No, gte ="is greater then or equal"

"greater then" is just gt.

Same for lte.

So it's selects then IE 6.7 and 8.

  • Like 1
Manfred62 Sr. Member

Manfred62

Posted
Posted 
        <!-- For nth-child support in IE6-8 -->        <!--[if (gte IE 6)&(lte IE 8)]>

you can write it shorter. The specific selection from 6 - 8 isn't imho important.

<!--[if lt IE 9]>

means all IE lower than 9

<!--[if lte IE 8]>

means all IE including 8 downwards

  • Like 1
pwired Hero Member

pwired

Posted
  • Author
Posted

Right now I have no space between the different rows and they are stacked

on top of each other without any space between them. That doesn´t look nice.

What if I want some empty white space between two block-groups ?

If you look at this example: http://arnaudleray.github.io/pocketgrid/examples/simple-stack.html

If I set a margin-bottom on the Nav class for the space I want, the problem is that

my Nav background color gets dragged down with it and so I end with no white space

between my Nav and Main.

What would be the best way to create some empty white space ( with pixels ?)

between for example the Nav and Main ?

reems Full Member

reems

Posted
Posted

I myself began with the Gutters explanation from the Pocketgrid documentation (allmost at the end), but I didn't get what I (and you) wanted.

But this works fine for me:

.block-group { margin: 0 0 0 -4px; }
.block { padding: 0 0 0 4px; margin-top:20px;}

Maybe there is an easier way but it helped me.

Hope this helps you also.

  • Like 1
Manfred62 Sr. Member

Manfred62

Posted
Posted

hmm, just wondering..? From the example above simply give the .nav margin-bottom. You can also give all elements padding to get some space.

Or use semantic tags inside the outer tags.

Example: a <section> includes some <hx>, <p>, <figure> and so on. Here you can also use margin or padding.

  • Like 1
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...