Zurb Foundation 5 Profiles

[Joss]

This is a thread for Foundation 5 profiles - sine I am not the only one putting one together, perhaps others want to post their's here too.

There are currently two versions

1. Joss's Demo Profile (explained Below)
2. Gebeer's Dropin Template = http://processwire.com/talk/topic/5293-zurb-foundation-5-profiles/#entry51707

-----------------------------------------------------------------------------------------------------

 

PLEASE NOTE: This is very out of date now.

 

If you want to install Foundation or any other framework, please use this tutorial:

 

http://processwire.com/docs/tutorials/installing-a-css-framework/

 

 

Joss's Demo Profile - v 0.4

(Updated to Foundation 5.2.2)

This demo profile includes the current Foundation 5.2.2 framework including the scss files and was created using the current PW 2.4.

Download: https://github.com/jsanglier/foundwire/

View: http://foundation5.stonywebsites.co.uk/

It demonstrates some of the basic Foundation 5 applied to ProcessWire including:

• Top Bar
• Content Dropdown
• Orbit Slideshow
• Tabs
• Clearing Lightbox

It also includes Font Awesome and a spell checker for TinyMCE

There is a readme included in the archive that gives more information and the files are commented. 

Use this as a starting point for your own project.

Changes for this version:

Updated to Foundation 5.2.2

Changed JQuery (Latest v2) and Fastclick to CDN

Some other slight changes

Foundation CSS is generated from the latest scss files, without adornment!

To install:

Download the PW Dev from Github https://github.com/ryancramerdesign/ProcessWire

In the site directory, replace the install, modules and templates directories with the one from the profile archive and add the tinyMCE directory at the same level.

Install as normal.

Just Using The Framework

If you don't want to actually use the profile, but just want to use the framework bit, just copy everything from the "templates" folder and use what you need.

Note about SASS

I am new to working with scss files, however, I downloaded Scout for windows which comes complete with Ruby and Compass and made it wonderfully easier!

http://mhs.github.io/scout-app/

I am mostly using PrePros now, though the full version is a paid version - http://alphapixels.com/prepros/

It has the advantage of covering sass, less and lots of other bits too. 

I did find one thing though - if like me you are developing on an external server that is linked through your own network, Scout will not find its way through the network folders on Windows Explorer - you need to map the folder to a drive and add the project that way.

The Foundation SCSS files are, unhelpfully, not in the Foundation 5 download. However, you can get them on github 

https://github.com/zurb/foundation

Or

https://github.com/zurb/bower-foundation (which has everything, I think)

All the photos are © Joss Sanglier (that is me) - other bits are stolen from ProcessWire and Foundation!

[Beluga]

Here's another easy Windows SASS tool (works also on Linux and OS X): http://sword.mu/ It is in active development, too.

[totoff]

I found the command line the easiest way to work with sass. Basically you need only one command: sass --watch. If you open the command line via windows file explorer from the directory where your .rb file lives you don't even have to navigate to the right directory. Btw. I don't know very much about Foundation, but doesn't it integrate Compass (http://compass-style.org/)? If so, Compass is a very convenient way of working with sass.

Here is a short summary on working with sass from the command line: http://www.hongkiat.com/blog/getting-started-saas/

[Joss]

Oh, I avoid command lines as much as possible - lousy memory. I like big bright things that say "press me!"

[totoff]

sass --what? ;-)

[Craig]

Whenever I see or hear sass --watch, I immediately think of Sasquatch - as in the alternative name for Bigfoot

I don't do much with preprocessors at the moment, but I use Koala for watching and processing if I do.

[Joss]

Hey, I wrote the music for Bigfootville - the (in)famous big foot documentary.  Small world

[Craig]

Hey, I wrote the music for Bigfootville - the (in)famous big foot documentary.  Small world

Awesome! You have your own IMDb entry as well... !

[Joss]

Yeah, somewhat incomplete, I notice. Only missing about 60 odd films and programmes, most as sound something. Trouble is, I can't remember my own credits to be able to update! (not that I care very much)

[daerias]

thank you very much for your nice work

[iNoize]

Thenks for this Profile. 

It was really helpful for me also to see how i can exclude functions in seperate  *.inc file for example. 

and the small gallery example was also really helpful.

At first i was confused of the old inc files and templates from the standart installation. 

I think it were better for PW newbies (like Me ) to clean out the profile and remove the unnecessary files. 

apart from that a very good job thank you

[Joss]

Well, that is what everyone does - the profiles are mostly just starting points and demos. Once you work out the way you like working - what framework if any and how you like to split up logic and layout - then you will just create your own profile starting point for your self.

That is the nice thing about PW - you can just do as suits you and the project best; no compromises! 

[daerias]

 think it were better for PW newbies (like Me ) to clean out the profile and remove the unnecessary files. 

apart from that a very good job thank you

take this profile to start with PW --> BlankProfile

[felix]

I found the command line the easiest way to work with sass. Basically you need only one command: sass --watch. If you open the command line via windows file explorer from the directory where your .rb file lives you don't even have to navigate to the right directory. Btw. I don't know very much about Foundation, but doesn't it integrate Compass (http://compass-style.org/)? If so, Compass is a very convenient way of working with sass.

Here is a short summary on working with sass from the command line: http://www.hongkiat.com/blog/getting-started-saas/

If you're already using the command line how about start using grunt?

[totoff]

@felix thanks for the hint. looks good. will check out.

[gebeer]

Hi all,

today I finally managed to get everything working together properly.

Now here is my Foundation 5 dropin template: https://github.com/gebeer/pwfoundation5.

It uses Foundation 5 SCSS files. There's a quite extensive readme file with instructions.

The template is based on Ryans FoundationSiteProfile.

My approach takes advantage of the SASS/SCSS/Compass technology. So the output of the final CSS is highly customizable and only one file (style.css) is put out. You have full control over which modules of the Foundation framework you want to include in your project. This results in smaller CSS files that can be minified upon compilation with Compass.

You can use the template as is. But if you want to modify the CSS, you need to have additional software (Ruby/Compass/Zurb Foundation gem) installed on your machine.

In the template's Readme.md you will find instructions on how to do this (for Mac and Linux machines - Windows: sorry I don't know).

If you are familiar working with SASS/Compass you will find your ways around easily.

I have setup a structure that allows for updating the Foundation framework independently and that separates the project specific css from the Foundation css.

This is a work in progress and I'm planning on using it for the relaunch of my own website.

If you find any bugs, please let me know here or on the github bug tracker. I will try to fix them.

Everyone is welcome to contribute or ask questions.

Cheers

gerhard

[gebeer]

@Joss

now I had the time checking out your template. Nice work!

Always good to see how other people approach things.

I see you are using font-awesome. Thats a good inspiration. Wanted to check it out for some time and haven't done it yet.

As far as I can see, there is no central scss file that handles all the @imports. So you are using the foundation scss stuff to compile foundation.css. And for the site.css there's no corresponding scss.

If you take a look at my template, I combined everything, so that there is only one resulting style.css that includes everything, foundation and site specific styles. This way you can define your own scss modules and add more logic to the scss structure.

Cheers

gerhard

[kongondo]

I see you are using font-awesome. Thats a good inspiration. Wanted to check it out for some time and haven't done it yet.

Unrelated FYI, the dev version of PW is now using font-awesome...

[gebeer]

@kogondo

Thanks, I didn't know that.

I cloned from https://github.com/ryancramerdesign/ProcessWire.git dev branch and there's no font-awesome in there. So this must be 2.4 then?

[kongondo]

Yes, it is there.....

Github dev branch:

https://github.com/ryancramerdesign/ProcessWire/tree/dev/wire/templates-admin/styles/font-awesome

New admin: see this long thread :

http://processwire.com/talk/topic/4650-new-processwire-admin-theme-on-dev-branch/

This will also be of interest; admin theme is now a module:

http://processwire.com/talk/topic/4650-new-processwire-admin-theme-on-dev-branch/?p=50881

Edited January 19, 2014 by kongondo

[Joss]

Hi Gebeer

The main scss is foundation.scss in the scss folder. That in turn imports all the various foundation.scss files.

This is then output to foundation.css using whichever method you want.

Other than that, there are four other css files:

• editor.css has some basic foundation typography styles that can be used by whichever RTE you wish
• foundation.min.css is just the normal foundation download and is not linked - it is just there for reference.
• normalize.css - this is the normalize script included with foundation
• site.css - this includes some PW styles and any oddments that you want to have at your fingertips - for instance I have used it for some header styles and row styles.

The reason I have laid it out like this is so that the foundation framework is distinct from anything else. If a dev then wants to combine elements, that is up to them, but their starting point is the same as if they had imported foundation straight from the zurb repository. They should be able to replace my foundation.css file with the original from Zurb and the site will still work, other than some colours. 

After that, they can bend it as they wished, but in this particular version, I did not want to add too many surprises for people who have used Foundation elsewhere

[gebeer]

Thanks for clarifying this, kogondo.

I went to https://github.com/r...ProcessWire.git, chose the dev branch and copied the clone URL. Ending up cloning the stable version.

You can see, I'm not that familiar with git yet.

I just read up on how to checkout a branch and now can see font-awesome stuff in my local branch.

[Joss]

Thought I should actually put the demo up on my site:

http://foundation5.stonywebsites.co.uk/

[kongondo]

@Joss

That looks very nice! 

[adrian]

Hey Joss,

I have actually been playing around with your profile - everything looks great, but I did notice that the collapsed (mobile) version of the menu has "MENU" in grey with a weird box below it. I don't think this is expected behaviour. Any ideas?