Best way to use simplegrid with pw ?

[pwired]

Hi,

This must be something obvious for most of you, but I am still puzzled with the question:

what is the best way to insert simplegrid css framework in processwire ?

Simplegrid css framework has: 2 folders [css] and [images] and 1 file index.html

A standard pw installation has inside the folder templates: home.php - head.inc - foot.inc

Would I make the contents of head.inc and foot.inc part of the simplegrid file index.html

and then change home.php into something like this: ?

include("./index.html");
echo $page->body;
 

I know that this is not the way to do it, that's why how would you pro's make simplegrid css work with

processwire and where would you bring in simplegrid's folders [css] - [images] and it's file index.html ?

Thanks.

[diogo]

That index.html file is just for reference, not to use in your website. Build your PW site as you would normally and use these examples when you need them. The css and images folders, you can either have them in the templates folder, or put their contents in the /styles/ and /styles/images/ (although you won't need those images for sure), or whatever you do usually. 

[pwired]

That index.html file is just for reference, not to use in your website. Build your PW site as you would normally and use these examples when you need them.

Thanks for the reply diogo. I don't need the index.html from simplegrid css ? Inside index.html I see things like this:

<div class="example-grids">

        <h2>Basic 6-Column Grid Slots</h2>

        <p>Slots 0-5 represent the 6-column grid. These slots can be combined to create a 3-column grid too.</p>

        <div class="row">

            <div class="slot-0">

                <p>

                    .slot-0

                </p>

            </div>

    

            <div class="slot-1">

                <p>

                    .slot-1

                </p>

            </div>

            <div class="slot-2">

                <p>

                    .slot-2

                </p>

            </div>

    

etc. etc. etc.

Where would I place these div's inside processwire to make it look the same as how index.html looks in my browser ? Would it be inside head.inc and foot.inc ?

The calls for the simplegrid css needs to be done somewhere in processwire too:

<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">

<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">

<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

I guess this will be done then also in head.inc ??

For starters I would like to make my processwire website look exactly the same as how the index.html file of simplegrid looks in a browser. That would help somebody like me who never used a css framework,

to understand how to use simplegrid in processwire.

Thanks.

[fmgujju]

Your head.inc file will have everything above <div class="example-grids">.

Your template file will have everything inside <div class="example-grids"> including div

Your foot.inc will have everything below closing div of <div class="example-grids"> or this <div class="row footer">

[diogo]

Sorry pwired, I didn't get it that you wanted to replicate the demo website. As fmgujju said, but put the content of the css folder inside the /templates/styles/ and the content of the images folder inside /templates/styles/, then make the links to them dynamic, just like in the default home.php

[pwired]

I knew it must have been something obvious but since It's my first timer with a css framework I didn't see it at first. Was expecting something complicated at it.

Thanks guys, I can see now how beautifully pw already is prepared to take everything in with head.inc - home.php and foot.inc - as with so many things - working on it.

[Martijn Geerts]

A way of using columns what I like is:

if you allow HorizontalRulers in your WYSIWYG you can spit the text with <hr>

Every splitted text becomes a column with the code below:

$body = str_replace('<hr />', '<hr>', $page->body);
$columns = explode('<hr>', $body);
$column_count = count($columns);

if(count($columns)) {
	echo "<div class='grid grid-pad'>";
	foreach($columns as $column) {
		
		$last = ($key + 1 == $column_count) && $column_count > 1 ? ' last' : null;

		echo "<div class='col-1-{$column_count}{$last}'>";
		echo "<div class='content'>";
		echo $column;
		echo "</div>";
		echo "</div>";
	}
	echo "</div>";
} 

[pwired]

Nice example of html building with php/api. I don't have that coding level yet. I have to visualize the end html structure first and then break it apart with php/api like you are doing so easily. But already can see the possibilities.

[Marty Walker]

Simplegrid is great. I've used it on a few websites now and wouldn't use anything else.

[Martijn Geerts]

Never seen Simple grid before, but I like the classnames as they are easily created with PHP. 

I prefer to stay in PHP, not close and open it every time.

[Manfred62]

I'm always building a static site at first, means only html and css etc. For example creating a start-page, a profile page and so on (depends on what the project needs).

After that I'm stripping down the html and bake them all into PW.

BTW: there are 2 simple grids..?

http://simplegrid.info/

http://thisisdallas.github.io/Simple-Grid/