Kirby with Foundation - Grids not working

Kirby 2 Solved ✅
1

Hey all,

Firstly let me say that I’m new to Kirby, so I apologise in advance if I ask some noob questions (it’s because I am!).

Before I go and buy my license I want to check I can get everything up and running first, so I’m testing out the Kirby starterkit, using Foundation 6 (vanilla) as my framework. I seem to be able to get all the dependencies loaded (css and js files), and if I load say an accordion or the orbit plugin, it seems to work fine - apart from the grid!

Here’s my header, I’m pretty sure I haven’t missed anything, and the console isn’t showing up any errors with loading any of these files, so I’m confident I’ve done everything right here:

<!--CSS-->
  <?= css('assets/css/foundation.min.css') ?>
  <?= css('assets/css/app.css') ?>  
<!--JS-->
  <?= js('assets/js/jquery.js') ?>  
  <?= js('assets/js/foundation.min.js') ?>
  <?= js('assets/js/app.js') ?>

Have I missed something? Or is there some further configuration inside Kirby to get it all fully working? FYI I’m using MAMP.

Any help would be greatly appreciated!

Thanks very much.

2

Well, first of all, this is nothing Kirby specific, you install a framework in Kirby in the same way as you would in any static website (apart from using the css/js helpers).

But what exactly do you mean with “the grid is not working”?

3

Thank you for your prompt reply.

Yeh I understand it’s not Kirby specific, I just assumed there might be some more configuration to do within Kirby to get it all working and linked correctly.

Basically, I first tested using an accordion and orbit to check that JS was loading correctly, and both worked with no issues, but as soon as I tried putting something in a row & columns, it doesn’t format the page at all, which makes me think the css file isn’t loading correctly (but all seems right in the console, no error messages).

 <div class="row">
      <div class="large-6 columns">hello</div>
      <div class="large-6 columns">world</div>
 </div>

So using something like this above doesn’t actually put it into a grid, it just formats itself like normal html with no styling what so ever (although it’s loading the basic Foundation starter font).

4

Well, are you just relying on what you actually see in the page or have you inspected the elements with dev tools?

And are you using the full version or some customized variant of Foundation?

5

Hi Jamie. We are currently using Foundation 6 & Kirby on all of our website projects with no problem at all.

It does not require any specific setup for it to work with Kirby. I would suggest making sure the css & js files are loading correctly.

Also make sure your app.js file contains the line

$(document).foundation()

6

Looks like this old grid is not included, but the new xy-grid:

http://foundation.zurb.com/sites/docs/xy-grid.html

7

Yeh I’ve had a look in the dev tools, everything seems fine in there, all is showing correctly in the markup, just inside the browser nothing seems to be working correctly.

Yeh full version, but I downloaded the vanilla version so I’ve linked the downloaded css and js files.

Really sorry for my lame query. I tried so many different things before coming to post on here, and scoured the Docs for an answer but couldn’t see anything relevant.

9

Tried this, but again the full page isn’t formatting correctly - no padding on either side

10

If you check the docs I linked to, you will see that you have to apply some classes to get the padding.

11

This is great to hear! Just wish I could get mine up and running so I can get coding. This is the first time I’ve tried implementing a css to my static sites, so I’ll admit, I feel a little bit out of my depth here.

Yeh I’ve included that in my app.js file from the beginning, but the full page still doesn’t format correctly.

Maybe it’s something to do with the starter kit? Or the version of foundation I’m using. Are you using CDN links or have you downloaded the js and css files?

12

We are currently using Foundation’s Flex Grid (includes Float Grid as well).
The files are hosted on each individual site.

As @texnixe mentioned above, foundation’s full version uses the new XY grid. In the XY grid there is no “row” afaik.

If you wish to use row I’d suggest getting a custom copy of either Flex or Float Grid.

13

And there you have it… ah I feel silly, very silly. In the version of foundation before the gutters were automatic (at least that’s as far as I can remember), so yes… I didn’t do enough homework.

Sorry! and thank you very very much for your time. I’ve only been doing this for a few months so quite honestly I get VERY confused sometimes.

Thanks again, really appreciated. Can’t wait to get Kirby up and running, hopefully with no more silly posts on here :sweat_smile:

14

Yeh this was the issue, I didn’t do my reading and missed that they’re not using the “row” tag any more.

Thank you, much appreciated.

One quick question; when you use Foundation in this way, are you able to continue using Sass? Before this I was using the Foundation CLI that was able to compile and compress all my files for me - am I right in assuming Ive gotta take a step back from that and get working with normal CSS? Would love to have Browse Sync back while working with Kirby.

15

If you use SASS, you can usually define somewhere, which parts of a framework you include or not, so no need to use the compiled CSS file.

1 Like