How can i integrate HTML Kickstarter with processwire?

[siulynot]

Hi, 

First of all, is there a way to enhance the html experience in the body of the pages? It seems that it doesnt render html code as it is supposed. 

Second, HTML Kickstarter is a nice way to get html snippets, but i dont know how to implement it in PW. If anyone knows let me know

[Pete]

I think there are several obstacles here, and none of this is intended to cause offense, so please don't take it as such:

1. It sounds like you are a bit confused as to the page's body field and template files themselves. Are you trying to put your HTML inside the body field on a page? Your actual site template files are in the /site/templates folder - head.inc and foot.inc contain header and footer HTML for the dfefault template, and the other files in there are for the various page templates and relate to the templates in the ProcessWire admin area itself. You don't have to use the head or foot files (they're for code that's on every page) but this tutorial will definitely help you out: http://wiki.processwire.com/index.php/Small_Project_Walkthrough
2. See above with regards to implementing elements of HTML Kickstarter into your templates - the tutorial will help you understand the layout of template files and how to output ProcessWire data in your templates.
3. You should have some knowledge of HTML, related tags and how it works and preferably a little of PHP before continuing - PHP knowledge is less essential in theory as things like the tutorials can help you get started there.

I think in short you need to step back from what you're trying to do and follow one of the tutorials to see how things work first. Once you know that, you'll see the endless possibilities, but I think you need to get a clearer picture of how it all fits together first.

Sorry, didn't mean to mention tutorials so much there - they aren't always the easiest to find as the following page doesn't show up in search results (oddly), but here's another page with some useful links: http://processwire.com/tutorials/

Hope that helps

[siulynot]

Thanks a lot! Im new here and eventhough i have a simple knowledge of html and php i still need to figure out how it is implemented in PW. I hope i dont annoy people in the forum, but im sure other people that come to PW will have similar doubts

[ryan]

To start, get a fresh copy of ProcessWire and install it (with the included basic profile). Then get a fresh copy of HTML Kickstart and unzip it. You'll want to take these dirs/files from HTML Kickstart (below), and move them to the root of your ProcessWire installation (where ProcessWire's /index.php file is located): 

• /css/
• /js/
• /style.css

I've taken the example.html that comes with KickStart and converted it into starter ProcessWire templates for you:

html-kickstart-processwire.zip

Unzip the attached file to replace the files in your ProcessWire's /site/templates/ directory. This includes these files:

• head.inc
• foot.inc
• basic-page.php
• home.php

Now view your site. You should see HTML Kickstart's example.html file powering your ProcessWire site. Navigation should be using HTML Kickstart's horizontal menu and both bodycopy and sidebar should populate. I've left several static elements from the HTML Kickstart example.html as well, so you've got more to experiment with here. 

Let me know how it goes and if it makes sense. 

This thread is also related. 

[joshuag]

I wish that I had seen this earlier to respond. Awesome explanation and example Ryan! @siulynot - thanks for using HTML KickStart. Hope it saves you some time. 

[ryan]

Joshua, I'd actually like to do a full HTML Kickstart profile for ProcessWire, if that'd be alright with you. Maybe we could collaborate on it sometime?

[siulynot]

Thanks for the instructions! They are very complete! I hope you get to fit the HTML Kickstarter theme on PW, it would be nice! 

i got to play around with the code you gave me and it was great, eventhough i could not achieve what i wanted. Doesnt matter, im a newbe here though and im experimenting with the possibilities here in PW. 

i got to create this blog:http://ktspr.com/blog/ , its basically the default blog profile. But i love the feeling it has, i dont know if it makes sense. Here is where i wanted to add a featured articles tab or slideshow in the homepage... could not achieve this for now... :/

The other project i have is a small food delivery service which im working on the dummy. Here i would like to have orders taken from the website so that they can be delivered, here is the demo: http://ktspr.com/elsistemad/ 

here i will be asking for some tips on how to best organize and make possible a checkout and things like that...

thanks for the tips!!!! 

[joshuag]

Joshua, I'd actually like to do a full HTML Kickstart profile for ProcessWire, if that'd be alright with you. Maybe we could collaborate on it sometime?

Awesome idea... something I have been thinking about for a while now too. I'm in. I would love to hear your ideas. I don't think this would take that long. I do it every time I build a website.  

@siulynot - Keep up the good work! I am excited to see your projects evolve. 

[Joss]

Joshuag

You might want to look at what I have done (er, am doing) with a bootstrap profile

http://processwire.com/talk/topic/2411-bootwire-basic-twitter-bootstrap-profile/

Basically I am creating two - one that has bootstrap installed and then demonstration pages showing how some of the bootstrap elements work in this environment (which is actually straight out of the box, but it is nice to show it anyway)

Then the second is the same things with just about everything removed - almost no fields, only a couple of template files, no content, just ready to go and put together so that more up-to-date bootstrap versions can be just dropped in place. The only extras in there is the standard Bootstrap menu system wired into PW and basic demo carousel and accordion files to save people having to mess around with these.

So, that is the profile that is really useful to people - the first is just a reference.

Joss

[joshuag]

Hey Joss, this is great! Thank you.

[ryan]

Awesome idea... something I have been thinking about for a while now too. I'm in. I would love to hear your ideas. I don't think this would take that long. I do it every time I build a website.

I was originally thinking it would be something fairly simple where you could just swap out the files from the default profile with new files, and have it ready to go. And that would be plenty useful. But it would probably be better to go further and try to account for most of the elements. At least, I think this would be more useful to people that want to literally use it to build a site from. So it would be nice to have more than what's currently with the default profile... like a template that uses the slideshow (or ability for any template to use it), a contact form, ability to use the various list styles and menus/button bars, tables, captions with images, icons, etc. (we'll need Soma's expertise with configuring TinyMCE for some of this). All the while keeping the layout and look simple and generic enough that someone could also easily build from it as a base.

How about you handle the front end and I'll handle the back end? Let me know if that's of interest, or if you have other ideas? Perhaps some of this overlaps with your plans for HTML KickStart too? If we were to collaborate on this, it seems like it would be not just another profile but more likely one to replace the default profile included with ProcessWire (which is in need of replacement). Though I do think it's important that the next default profile be a little more mobile-friendly than the current one is. Anything that takes the default profile further also means we should include a second "blank" profile with PW (which we don't currently do, but I think we should).

I was also excited to hear about your plans for HTML KickStart. Thanks for the shoutout too.

[OllieMackJames]

Any news on this front? very much interested in testing it.

[pwired]

I don't know . . . isn't this html kickstart thing for script kiddies ?

[Joss]

If I get time next week, I will have a dig through it and see if I can get some starting point somewhere, A little like I am doing with Bootstrap and my Bootwire stuff.

Kickwire?

[OrganizedFellow]

Intrigued!

 

[Joss]

Okay, just knocking together the very beginnings of the Kickwire profile.

It will be very rough round the edges!

At the moment, I have bashed around the menu Soma did for me for Bootstrap, so that works (but will need cleaning up a bit more), and I have a gallery function working.

erm,,,

About it so far

Joss

[vitor]

Wow, that would be really awesome Joss, +1 for the Kickwire profile, can't wait to have it and try it

[Joss]

Well, its part done, but Joshua is currently working through some major updates with Kickstart, so I am waiting to see what he comes up with.

I have currently done a sort of proof of concept, but I have changed a couple of his JQuery utilities - changing fancybox1 for colorbox and bxslider for flexslider and his tabs script - so that it is compatible with JQuery 1.9.1 - But I think he is trying to address some of those issues anyway, so I dont want to get too far ahead of him.

The approach I am taking with this (and I am redoing my bootstrap in the same way) is a function file with some of the main components demo'd using basic fields.

That means to get them working you can just do <?php loadKickwireTabs(); ?> in your template file and you will have tabs, assuming you have done your fields the same way.

Most people will then edit it like crazy to put their own fields into play, but at least they have the basic markup done rather than have to start from scratch.

Obviously, that is only for a few things like carousel, the rest will be up to the user!

Joss

[joshuag]

New HTML KickStart Updates. Joss take a look. Slimmer. Using Font awesome now.

I want to change out the light box. Working on finding a great modal replacement that I can use for more than just light box. Getting close. Experimenting. Anyhow, take a look at the update. 

[Joss]

Will do

[vitor]

Great work Joshua,

I would love to see it using Flexslider instead of BXSlider, as Joss commented above, Is there any reason for not using it?

Thanks

[Joss]

On my testbed version I have got flexslider working in three modes - slide show, carousel strip on its own, gallery with fade-slideshow and carousel synced together. Just with different css classes.

Works quite sweetly.

[Pete]

New HTML KickStart Updates. Joss take a look. Slimmer. Using Font awesome now.

I want to change out the light box. Working on finding a great modal replacement that I can use for more than just light box. Getting close. Experimenting. Anyhow, take a look at the update. 

Your copyright notice at the bottom is a bit far into the future

[adrian]

Has anyone used Ryan's converted example.html (http://processwire.com/talk/topic/2731-how-can-i-integrate-html-kickstarter-with-processwire/?p=26612)? I thought I'd give kickstart a go for a new project, but none of the new responsive goodness works properly.

I'll have a play and sort it out, but thought if someone else might have already sorted this out

[Joss]

The best way is to just go and get Kickstart from the kickstart website

http://www.99lime.com/elements/

Then just add it to your templates folder as if you were doing a normal static site.

I think he has now updated it to run with JQuery 1.9.1 - though I am not too sure.

I was messing around with it and I changed a couple of things for myself - I replaced bxslider with flexslider and use Jack Moore's colorbox and a couple of other things. But I need to spend some time to see what Joshua has been up to really.

It is on my growing todo list!