Jump to content

Question about pocketgrid.css


pwired
 Share

Recommended Posts

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%; }

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

@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
>

Link to comment
Share on other sites

@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
Link to comment
Share on other sites

 

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
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

        <!-- 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
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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