pwired Posted August 19, 2014 Share Posted August 19, 2014 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 More sharing options...
kongondo Posted August 19, 2014 Share Posted August 19, 2014 (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 August 19, 2014 by kongondo 2 Link to comment Share on other sites More sharing options...
pwired Posted August 19, 2014 Author Share Posted August 19, 2014 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. Link to comment Share on other sites More sharing options...
Manfred62 Posted August 19, 2014 Share Posted August 19, 2014 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. 3 Link to comment Share on other sites More sharing options...
kongondo Posted August 19, 2014 Share Posted August 19, 2014 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 himself uses it in his blog 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 ) 2 Link to comment Share on other sites More sharing options...
pwired Posted August 19, 2014 Author Share Posted August 19, 2014 @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 More sharing options...
kongondo Posted August 19, 2014 Share Posted August 19, 2014 @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 2 Link to comment Share on other sites More sharing options...
reems Posted August 19, 2014 Share Posted August 19, 2014 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. 1 Link to comment Share on other sites More sharing options...
horst Posted August 20, 2014 Share Posted August 20, 2014 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 More sharing options...
reems Posted August 20, 2014 Share Posted August 20, 2014 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. 1 Link to comment Share on other sites More sharing options...
Manfred62 Posted August 20, 2014 Share Posted August 20, 2014 <!-- 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 1 Link to comment Share on other sites More sharing options...
pwired Posted August 20, 2014 Author Share Posted August 20, 2014 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 More sharing options...
reems Posted August 20, 2014 Share Posted August 20, 2014 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. 1 Link to comment Share on other sites More sharing options...
Manfred62 Posted August 20, 2014 Share Posted August 20, 2014 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts