Lost in hyperspace - beginner has orientation problems

Hello,

i’m a php programmer and i have to develop a web frontend for the first time. It seemed like a good idea to use Foundation 6 for this.

After three days of unsuccessful trying out, I’m no longer so sure. The problem is that nothing on the Zurb website matches and is constantly changing.

For example, I have now downloaded CSS version 6.6.3. The css and js files are integrated in the source code of the index.html file via web link. The local files in the Assets folder differ from those linked from the Internet.

There’s really nothing right at all. In a three minute tutorial video, five things that used to work but no longer work.

I need a very simple page - header graphic, menu that switches to hamburger menu on small screens, content area and footer. Is there a single example on the Zurb Website where everything fits together and that fits together with the Foundation 6 documentation?

thank you and greetings from Dortmund, germany

Frank

Nick,

I am also a PHP developer using Foundation and it works great! I wrote a PHP wrapper library so you don’t have to mess with Foundation directly (but it helps to read the docs to know what to do).

Anyway, it is all documented on my example site of http://www.phpfui.com Check out the examples pages. The whole site is written in PHP with no HTML.

Hope this helps.

You maybe also know how to install foundation with the newest node.js on a windows machine, please?

I am on Windows and I don’t use node. I have only ever run sass (Sass: Install Sass)

Then I install the source from foundation into my public directory. But I also don’t write HTML, way to low level.

I would recommend if you have PHP on your server, just clone GitHub - phpfui/PHPFUIWebsite: PHPFUI documentation into your public directory. This is a fully functional Foundation site all installed. You can look at the examples and view the page source in your browser. Will not be extremely pretty, but will work and you should be able to reformat it in an editor if you are into beautiful HTML.

Installing and getting Foundation to run are two of the things PHPFUI does. You should install composer as well and then do a “composer install” (Composer) to get all the libraries installed, but only if you will be doing PHP development. The above repo is all that is needed for a valid Foundation install. In fact, I use git to update the site, so everything has to be checked into git to get onto the website. So everything has to be included or it will not work at all. You will probably have to copy .htaccess.local to .htaccess as well. And I would recommend WAMP Server (WampServer, la plate-forme de développement Web sous Windows - Apache, MySQL, PHP) to get your server all setup for Windows. You don’t want to run IIS ever.

Hope this helps.

@anjacom I struggled for awhile as well trying to get the SASS build process working. The big issue I found is making sure to use an NodeJS version of 10 or less. The big problem I ran into is this version of the Foundation build requires an older version of Yarn (must use something lower than version 2). However, this version of Yarn has a bug which nests Babel dependencies and its node-modules creating a deep nested structure which will not work if you already have your Foundation project in your own nested folder structure due to file path length limitations. Best to install it close to the root of your drive. Once that was out of the way things work well.

I’m not using Foundation to build my pages with their Panini templating tool but do use it for playing around with different layouts before going into my .NET 5 dev stack in Visual Studio.

I also dislike Node and the inordinate number of files it creates with each project installation. I’ve worked around this by installing Foundation once and then modifying the config.yml and gulpfile.babel.js files with my custom locations.

I’ve also noticed that standard SASS modules don’t seem to work with this version of SASS. I’m trying to do string operations like string.index and string.slice but they fail. So I’m interested to know how you were able to get Foundation to work with sass:install as you pointed out. I’m not ready to endure more pain trying to resolve issues this may cause, especially if it breaks my process I’ve finally got working.

@phpfui What version of SASS does your method install on a Windows machine, libsass or DartSass? And then can I mix in normal sass modules with the Foundation source? Then to use the gulp build process with Babel, etc. I would still have to have NodeJS running, correct?

My sass --version reports:

1.20.1 compiled with dart2js 2.2.0

It is probably out of date

I run it with:

sass --watch scss\style.scss www\css\styles.css

Hope this helps.

Thanks, if you’ve had no issues building Foundation with it then I’ll give it a try.

And to be clear, it has no dependencies on NodeJS?

I don’t believe it uses NodeJS. I just use sass it to build my own style.css file.

These are the first lines in my style.scss file:

@import ‘settings’;
@import ‘…/vendor/zurb/foundation/scss/foundation’;
@include foundation-everything;

my _settings.scss came from the zurb project, and I modify it to my needs.

Thanks @phpfui Bruce, I’ll give that a shot. If I can then delete the mass of files in the node-modules folders and uninstall node completely I’ll be a very happy camper.

Yeah, I just use all JS modules to keep it simple and sass to make my style.css file, and everything seems to work.