Basics: Grids, Frameworks

Kirby 2 Solved ✅
1

Hi!

I’m still a newbie to web design and Kirby (and this forum!) is great tool to learn. Thanks for that!
At the moment I’m trying to build a website from scratch using Kirby plainkit. I’m also trying to keep things as clean and fast as possible. (planing to use a CDN and custom version of jQuery)

My question(s): Do I need Bootstrap or Foundation for creating a responsive design? And is Bootstrap already build into Kirbys core? (there is a bootstrap.php in plainkit?) I just need a simple gridsystem for my templates. So is there an advantage using bootstrap? Couldn’t I use just this CSS from the columns plugin?

.columns {
  margin-right: -2rem;
}
.column {
  display: inline-block;
  vertical-align: top;
  padding-right: 2rem;
}
.columns-1 .column {
  width: 100%;
}
.columns-2 .column {
  width: 50%;
}
.columns-3 .column {
  width: 33.33%;
}
.columns-4 .column {
  width: 25%;
}
.columns-5 .column {
  width: 20%;
}

Many thanks!
J

2

You don’t need any frameworks nor jquery to make a responsive website :wink:
The bootstrap.php file is here to literally boot strap things in Kirby. Open it and you’ll see for yourself!
I recommend trying to build your own grid for your project, as you’ll learn a lot more! Don’t hesitate to come here for help at any point!

3 Likes
3

Hi @RDR,

the plainkit does not contain any CSS, it’s indeed intended to start from scratch.

The bootstrap.php file has nothing to do with the Bootstrap CSS framework.

And no, you don’t need either Bootstrap or Foundation, nor in fact any other grid system to build a simple grid. The CSS of the columns plugin or the starterkit can indeed serve as a starting point. You may also want to look into using flexbox.

Edit: Bootstrap and similar CSS frameworks - while sometimes good for quick prototyping - just bring a lot of bloat to your website, so I would no recommend them.

3 Likes
4

And if you want a kick-start, consider the use of a light-weight boilerplate, like Skeleton.

A nice project would be to convert the static Skeleton Landingspage into a Kirby-powered one.

5

Many, many thanks! @Thiousi: The jQuery is for a filter function @texnixe helped me to build : )
I didn’t know flexbox or skeleton and they both look great. What exactly is the difference between an UI Framework (like Bootstrap) and a grid (like Skeleton)? @texnixe: why is is called prototyping? Aren’t there many themes that use Bootstrap/Foundation in their final builds?

6

Yes, of course these frameworks are used in production. All I meant to say was that I think they are good for prototyping if you want fast results (i.e. to have something to show to quickly), but I would not use them for my projects if I can avoid it.

Edit: Flexbox is not a grid system like skeleton, it’s a CSS feature that is now widely supported by many browsers.

7

You can also build filter functions without jQuery :wink:
I understand that sometimes it’s just easier to use jQuery and a lot of websites do it. That’s perfectly fine :wink:

A UI framework is to CSS what wordpress is to CMS. It tries to do everything and cater to every needs. Which means it will always include stuff you don’t need, and if you want something lean, you’re better off without them!
A grid on the other hand, is simply that. It helps you place your elements on the page without forcing you to use any style whatsoever!

8

When you’re in a hurry (prototyping) or your client doesn’t have lot’s of budget - you can also consider Simple Grid.

A responsive grid-system, which is only 3kb in size (uncompressed).

- edit - Or do it yourself :stuck_out_tongue:

9

If you want to learn it well, skip frameworks. I don’t even use jquery anymore on the fronend.

Bytes costs money

Faster sites mean more users stay and come back, you get higher in the search engines and you probably save some server power as well.

Flexbox is great so the time to learn it is well spent.

10

These were questions I’ve had for quite some time. Thanks for clearing things up!

I worked with Wordpress-themes and they all come with Bootstrap and other bloatware. So I thought it was the go-to solution for responsive designs. After much frustration with mega-themes (you know them) I went on a quest for a flexible and fast CMS. So here I am : )

As I said: My main goal is to keep things tidy and fast. I’ll give Flexbox a try. Sound like a solid an native solution.

Unfortunately I don’t know how. Actually @texnixe did all the heavy lifting for me so I’ll stick with my jQuery filter for now.

11

It’s great! Here’s a good free resource to learn it:

12

Cool! I’ll watch the videos right now : )

13

I included an example of how to filter with PHP/Kirby in the docs a while ago. The example could - of course - be extended with AJAX, so as to prevent reloading of the page (but then you are back to javascript again :slight_smile:). There is nothing wrong with using javascript or jQuery for filtering, though, although it won’t work, if someone has javascript disabled. If you heavily rely on javascript for your application (as many applications do today) anyway, then that’s the way it is.

Having said that, it doesn’t really make sense to include a library like jquery just to toggle a menu …:slight_smile:

14

Yeah, the problem with Bootstrap or such themes is that they are trying to include everything for everyone. So you end up with a heavily bloated website with a lot of stuff that you will never ever need. Just keep it simple instead.

15

I totally agree – that’s one of biggest disadvantages of the filter function.

Again I agree. I learned a lot from the filter you’ve helped put together a while ago. I built another version of my filter function some time ago and ended up using jQuery to avoid page reloads. I’ll send you a copy, I think its pretty neat : )

1 Like
16

One of the biggest problems - in my situation - is the lack of support of the flexbox property.

Take Android 4.x for an example; almost 25% of the devices out there do not support flexbox.

http://caniuse.com/#feat=flexbox

http://www.statista.com/statistics/271774/share-of-android-platforms-on-mobile-devices-with-android-os/

When you focus primarily on mobile internet (what’s my work field) you really have a problem, when you uses the flexbox property.

25% of Android is not supporting it, IE 9 / 11 are buggy at least (and all Window devices before WM10 uses the same core engine - so they fail as well).

It’s not a big issue when you can life with it, but always good to keep it in mind; the web must work on 100% of the devices (or well…at least 97.5% :slight_smile: ).

17

You are 100% right - a developer must know what the project needs, and what the download means.

But of course you can customize Bootstrap 100%

That way, you can download only the grid-system for less than 10kb.

I don’t want to promote Bootstrap here, but sometimes it can come in handy (hell, even my own corporate site it Bootstrap based - 100% Kirby - and loads in less than 1 second).

- edit -

Bootstrap, grid-system only - http://getbootstrap.com/customize/?id=9633aee46f470eb22670886dcbaf9595

18

If you switch to the “Usage relative” mode at Can I use, you see that all relevant browsers do support Flexbox (however some need vendor prefixes). I think there’s no reason not to use Flexbox.

2 Likes
19

I know, but when I switch to Google Analytics / Piwik stats of my project(s) and check the marketshare of “not supporting” devices, I see about 25% of not supporting it.

Like I said; it really depends on your target audience (mine, in this case) is 100% mobile traffic - heavily targeted on a third world audience (Africa, South-America).

So it really depends; I just mentioned it to give others some more insights :slight_smile:

- edit -

I create apps in Cordova, powered (in the back-end) by Kirby - so they are not native apps, but html (4/5) apps.

1 Like
20

I was going to say that. And all relevant css prefixers will include those prefixes.
The day we won’t need prefixes anymore :rolling_eyes: