Menu icon Foundation

Developer

My Posts


My Comments

Brett HOlcomb commented on Brett HOlcomb's post 9 months

 Yes, please feel free to do so as I'd be glad to help.  As soon as I can get some breathing room I'll try and document my environments and.

Brett HOlcomb commented on Brett HOlcomb's post 9 months

Rafi, I'm not sure what you mean with the question about me not using any package managers.  I use npm to install gulp items.  My projects are setup on a development server with a dev directory and each project gets it's own directory or subdirectory under a main directory.  For web development I really don't package anything.  I use PHPStorm for local editing and remote access to my servers, and have repositories on GitLab.  Within PHPStorm I make my edits which my tools (Gulp) see and compile and autoprefix scss to css.  I then upload to the remote and in some projects when PHPStorm sees a change it uploads the file automatically.
Joomla's packages are basically zip files so if I need to do a package install in Joomla I'd zip my distribution files and use that.
 

Brett HOlcomb commented on Brett HOlcomb's post 9 months

Kevin:
I'm not really looking for a my environment setup as I don't expect Foundation to explain every environment as there are so many but yes, it would be good if there were coherent guidelines for some of the major ones and then users could contribute other environments or enlarge the docs with what they did.  To me the documentation was like a shotgun and fired a bunch of information for various environments with no coherent pattern.  Given that if you knew about all these things before hand they made some sense (they make a little more sense to me now).  This is my best attempt at explaining what my introduction to Foundation SASS was and I'd be glad to contribute what I can to help make the docs better.
I came into this not having used Gulp or node-js but I'm familiar with programming (I've done various dialects of assembler, C, C++, C#, scripting (AIX, Linux, and others) and quite a few others with different environments a(cli and IDE) and most of my IT life has been spent troubleshooting and digging through existing systems and code that has little documentation..  What I did not have was any use of Gulp, npm, lib-sass, or Ruby. I did know what SCSS/SASS were as well as LESS. Let me list what I found that hindered me or was confusing and maybe that will help. 
The first question is what level of expertise do you want to document for.  I understand the docs can't teach programming but they definitely assumed you already knew what to do. I think somewhere in middle is better.  Don't assume everyone knows all this.  Many of us are coming from other areas of expertise and for many reasons are now doing Web things so anything that makes life easier means Foundation will be chosen instead of other frameworks.
Here's my thoughts as I first encountered Foundation.  I first downloaded the complete package and used that to get started as it gave me css and js for Foundation so I could get started on my websites using Foundation.  However, I knew that I wanted to use SCSS on my projects so naturally I checked out the Install with SASS.  I read through the docs and started checking finding out what Gulp, Grunt, Compass, etc were all about.  No specific references that helped but just a lot of checking out all the sites that came up in searches and throwing out the ones that spend 99.99% of the article on how to install Compass, npm, ruby, Bower, etc. and gleaning what I could from the remaining ones that were left.  Basically this let me get to the decision I did not want Ruby but wanted lib-sass and that led to npm and node-sass.  For a task runner I chose Gulp since it's got a lot of advantages over Grunt.  Now to install Foundation from SASS.
1.  The title Install Foundation from SASS implied to me that I could install Foundation and have the SCSS files already in my project.  What was not clear was that this was only needed if you wanted to modify Foundation's own css code and that there were a bunch of other stuff like tests, etc included in the package.  It's not really just the Foundation SASS source.  This needs to be made crystal clear that this isn't really an install Foundation method but is for modifying Foundation's css itself and is only needed for advanced work and comes with a bunch of other baggage.
Assuming I want to modify and compile Foundation here's what I found confusing.
1.  I started simple first and just ran the foundation-sites npm install in my new project folder. This gave me a directory with tons of files and it looked like I had gotten someone's development setup.  I may not be seeing the whole picture but just give me the source files I need to modify foundation.  I would include the github link Rafi mentioned.  In fact it is easier to follow and having read it now I'd use it and the package manager page for documentation.  If I'd had that it would have been a big help.  Why all the bowerrc files, customizer, lint files,etc. in the github project  I assume the lint are for the unit testing but why throw bower in there?  It doesn't seem to be used for this project.
Hindsight is always 20/20 <G> but I would look at using the Github Readme Rafi linked as a start for documentation.  It does a better job of explaining things. Then expand it with some of these points.  
* Emphasize if all you need is the css and js files to put in your site then get the latest CSS download.  This is there but needs to be in neon letters <G>.
* If you want templates go here and link to the templates.
* If you want to actually modify Foundation CSS then you have several options
A. Clone this git repo and explain it gives you some added features such as tests - but maybe git rid of unneeded files like bowerrc and explain what comes in the package  and why the directories exist like this link does http://foundation.zurb.com/sites/docs/installation.html#package-managers).  
B. Use this option if you only need the Foundation Source and not tests or other extra baggage so you can include it in your own project then go here which just gives you the base/source files for Foundation - http://foundation.zurb.com/sites/docs/installation.html#package-managers. But it doesn't really because if you npm install foundation-sites you still get all the other baggage with it. 
In hindsite the biggest confusion was caused because I had no idea of what the options were for.  The Installing from SASS didn't help at all as to what I was actually getting.   The github pages do a better job or explaining it.  In fact in light of looking at them I think the Installing page is even more confusing!  It references _settings, throws a bunch of files out for manual compile and throws in Grunt, etc. but never really ties them together.
I was looking for a package that just gives me the source css, js, assets that I can dump in a src folder in my project and run my workpath on in my project.  No tests, no bowerrc, nothing.  Just the bare css and js files so when I run my toolchain I get what I need in my distribution directory.
As for specific environments I'd be glad to try and document what I did for PHPStorm and if others could do that for their environments taht would be a big help.  
I hope this is not too confusing and is of some help.  Let me know what else I can do.  As I said I really like Foundation (after my encounter with Bootstrap it's a breath of fresh, well organized air) and for any project good docs help people get started using it.  There have been frameworks and apps where I've not gone any further then the docs and gave up on them.
 

Brett HOlcomb commented on Brett HOlcomb's post 9 months

Glad I'm not the only one!  I think I finally figured out some of this so I'll reply here in case it can help someone else and keep them from some frustrating time discovering how to make this work.
As I've worked with Foundation I've come to really like it.  I'm using Joomla as my framework and Foundation is so much cleaner then the Bootstrap that comes with Joomla.
I run Fedora 24 as the workstation and all my servers are Centos 7.  I have used Netbeans and Eclipse extensively for work on my sites with Foundation but went back to my PHPStorm.  I looked at Koala but it's Ruby based and the project looked dead although I see someone is working on it and did create a script for use with the node-sass compiler when I asked.  Given I have PHPStorm I went with it.
I do not use Ruby.  I have nothing against it but nothing I work with needs it so I do not want to add it just for Foundation so that means I go libsass via node-sass and use npm as my package manager.  I still haven't figured out what use Bower is.  Yes, it's a package manager for the front end but I already have npm which packages my stuff and my framework simply uses zip files that are uploaded and installed.
The easy part is when you just want to use Foundation's css and js files and do not need or want to modify Foundation itself.  Download the Foundation complete (if you want flex modify the download). Then put the css and js file wherever in you web site and add the stylesheet and script links to your code.  I am at this point so I can be my sites started and get familiar with Foundation.  If I need updated files I'll download them and when the need arises I'll go to Step 2.
Step 2 is actually only needed if you want or need to modify the Foundation css files instead of overriding them with your own css files. Unfortunately the documentation is horrible and tries to tell you how to do everything all at once such as doing if for all package manages and is not well organized.  It looks like they took their development environment and had us download that instead of stripping out the stuff like bower, npm, and just giving us the files we need and let us integrate them into our development environment.  Then they whipped up some documenation but they already knew how to set it up.  Really all we need is the scss files and the _settings file instead of their environment.  They really need to split the process out so that if  you are using Compass do this, if you are using lib-sass do this and not even bother with the grunt example.  They say they use Gulp then give a Grunt example.  Just tell us how they handle autoprefixing and let it go.
First you choose Ruby or lib-sass.  For reasons given above I went with lib-sass and node-js.  Once you make this choice you have to choose tools such as Compass for Ruby based or others depending on your company standards and situation. For me my tool chain is npm, gulp, PHPStorm.  I use npm to install the gulp modules needed and run the Gulp default script when PHPStorm starts up.  The script watches for changes in the scss and other files and then compiles them and puts the final result where it needs to go.  Autoprefixing is handled by gulp also.
I used npm to init the package.json file in my project directory and then installed the gulp modules I needed such as watch, prefixer, and some others. This created the package.json file and the node_modules directory in my project directory.  In my IDE I excluded the node_modules directory from searching or being used.
I created my gulpfile.js which has default task called watch.  This task was created in the file as well as others such as autoprefix which runs the autoprefixer, and scss which compiles the scss file into css.  When a change occurs in the scss or other files they are automatically compiled to css, autoprefixed, and then placed in the proper directory.
I set my IDE, PHPStorm, up so it starts Gulp with the default task when it starts up.  I use the dist and src directory structure where src is where I keep my uncompiled assets such as js, scss, and other files.  The dist directory gets named the same as the directory on the web server that my project is working with and it contains the final result of any scss compiles, my php, code, etc. all in a format that keeps Joomla happy.
At this point I think the docs and the process needs changing.  Just give us the _settings file and the js and scss files needed to build css and js files from the Foundation "source".  Get rid of the bower stuff, the dist directories, etc. and just give us the src directory.  Yes, given the current download you could build your css and js and have it in  the dist directory but why bother.  Most people have their own environment setup so we have to dissect what they give us and pull out the pieces.
I really do like Foundation and it' my framework of choice now.  It's neat, clean, and makes sense as well as supporting responsive really well and it has neat features like topbar.
 

Brett HOlcomb commented on Brett HOlcomb's post 11 months

Okay.  I've got it all working and as a plus my Netbeans environment uses node-sass and gulp to automate things.  If there is any interest I can write up a step by step explanation of what I did.
 

Brett HOlcomb commented on Brett HOlcomb's post 11 months

An update.  I've managed to piece together the last few days of information and got node-sass working on the command line and in Netbeans 8.2 to compile scss files and put them in my /css directory so that's all good.
I did install the foundation-sites using npm and despite the foundation webpage I figure out that all I really need is the  foundation.css or min.css files since I have no intention of changing Foundation files or compiling them.  If I need to modify something Foundation provides I'll copy the scss file and put it in my own scss build area so I don't mess with the original and it doesn't get overwritten.
If anyone is interested I can write up what I did.
I still agree with the posters (which seem to be legion) that Foundation's documentation for SASS/SCSS is a very weak point.  It assumes you know what your are doing and even then presents it in a helter skelter arrangement.
I'm still working on the  autoprefixer part trying to figure out what the docs are telling me.
Again, I'm more than happy with Foundation as a Framework and it's far above the others but fortunately I had to spend a lot of time to figure out how to make it work.  It shouldn't be this hard.
 

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Brett HOlcomb's post 9 months

 Yes, please feel free to do so as I'd be glad to help.  As soon as I can get some breathing room I'll try and document my environments and.

You commented on Brett HOlcomb's post 9 months

Rafi, I'm not sure what you mean with the question about me not using any package managers.  I use npm to install gulp items.  My projects are setup on a development server with a dev directory and each project gets it's own directory or subdirectory under a main directory.  For web development I really don't package anything.  I use PHPStorm for local editing and remote access to my servers, and have repositories on GitLab.  Within PHPStorm I make my edits which my tools (Gulp) see and compile and autoprefix scss to css.  I then upload to the remote and in some projects when PHPStorm sees a change it uploads the file automatically.
Joomla's packages are basically zip files so if I need to do a package install in Joomla I'd zip my distribution files and use that.
 

You commented on Brett HOlcomb's post 9 months

Kevin:
I'm not really looking for a my environment setup as I don't expect Foundation to explain every environment as there are so many but yes, it would be good if there were coherent guidelines for some of the major ones and then users could contribute other environments or enlarge the docs with what they did.  To me the documentation was like a shotgun and fired a bunch of information for various environments with no coherent pattern.  Given that if you knew about all these things before hand they made some sense (they make a little more sense to me now).  This is my best attempt at explaining what my introduction to Foundation SASS was and I'd be glad to contribute what I can to help make the docs better.
I came into this not having used Gulp or node-js but I'm familiar with programming (I've done various dialects of assembler, C, C++, C#, scripting (AIX, Linux, and others) and quite a few others with different environments a(cli and IDE) and most of my IT life has been spent troubleshooting and digging through existing systems and code that has little documentation..  What I did not have was any use of Gulp, npm, lib-sass, or Ruby. I did know what SCSS/SASS were as well as LESS. Let me list what I found that hindered me or was confusing and maybe that will help. 
The first question is what level of expertise do you want to document for.  I understand the docs can't teach programming but they definitely assumed you already knew what to do. I think somewhere in middle is better.  Don't assume everyone knows all this.  Many of us are coming from other areas of expertise and for many reasons are now doing Web things so anything that makes life easier means Foundation will be chosen instead of other frameworks.
Here's my thoughts as I first encountered Foundation.  I first downloaded the complete package and used that to get started as it gave me css and js for Foundation so I could get started on my websites using Foundation.  However, I knew that I wanted to use SCSS on my projects so naturally I checked out the Install with SASS.  I read through the docs and started checking finding out what Gulp, Grunt, Compass, etc were all about.  No specific references that helped but just a lot of checking out all the sites that came up in searches and throwing out the ones that spend 99.99% of the article on how to install Compass, npm, ruby, Bower, etc. and gleaning what I could from the remaining ones that were left.  Basically this let me get to the decision I did not want Ruby but wanted lib-sass and that led to npm and node-sass.  For a task runner I chose Gulp since it's got a lot of advantages over Grunt.  Now to install Foundation from SASS.
1.  The title Install Foundation from SASS implied to me that I could install Foundation and have the SCSS files already in my project.  What was not clear was that this was only needed if you wanted to modify Foundation's own css code and that there were a bunch of other stuff like tests, etc included in the package.  It's not really just the Foundation SASS source.  This needs to be made crystal clear that this isn't really an install Foundation method but is for modifying Foundation's css itself and is only needed for advanced work and comes with a bunch of other baggage.
Assuming I want to modify and compile Foundation here's what I found confusing.
1.  I started simple first and just ran the foundation-sites npm install in my new project folder. This gave me a directory with tons of files and it looked like I had gotten someone's development setup.  I may not be seeing the whole picture but just give me the source files I need to modify foundation.  I would include the github link Rafi mentioned.  In fact it is easier to follow and having read it now I'd use it and the package manager page for documentation.  If I'd had that it would have been a big help.  Why all the bowerrc files, customizer, lint files,etc. in the github project  I assume the lint are for the unit testing but why throw bower in there?  It doesn't seem to be used for this project.
Hindsight is always 20/20 <G> but I would look at using the Github Readme Rafi linked as a start for documentation.  It does a better job of explaining things. Then expand it with some of these points.  
* Emphasize if all you need is the css and js files to put in your site then get the latest CSS download.  This is there but needs to be in neon letters <G>.
* If you want templates go here and link to the templates.
* If you want to actually modify Foundation CSS then you have several options
A. Clone this git repo and explain it gives you some added features such as tests - but maybe git rid of unneeded files like bowerrc and explain what comes in the package  and why the directories exist like this link does http://foundation.zurb.com/sites/docs/installation.html#package-managers).  
B. Use this option if you only need the Foundation Source and not tests or other extra baggage so you can include it in your own project then go here which just gives you the base/source files for Foundation - http://foundation.zurb.com/sites/docs/installation.html#package-managers. But it doesn't really because if you npm install foundation-sites you still get all the other baggage with it. 
In hindsite the biggest confusion was caused because I had no idea of what the options were for.  The Installing from SASS didn't help at all as to what I was actually getting.   The github pages do a better job or explaining it.  In fact in light of looking at them I think the Installing page is even more confusing!  It references _settings, throws a bunch of files out for manual compile and throws in Grunt, etc. but never really ties them together.
I was looking for a package that just gives me the source css, js, assets that I can dump in a src folder in my project and run my workpath on in my project.  No tests, no bowerrc, nothing.  Just the bare css and js files so when I run my toolchain I get what I need in my distribution directory.
As for specific environments I'd be glad to try and document what I did for PHPStorm and if others could do that for their environments taht would be a big help.  
I hope this is not too confusing and is of some help.  Let me know what else I can do.  As I said I really like Foundation (after my encounter with Bootstrap it's a breath of fresh, well organized air) and for any project good docs help people get started using it.  There have been frameworks and apps where I've not gone any further then the docs and gave up on them.
 

You commented on Brett HOlcomb's post 9 months

Glad I'm not the only one!  I think I finally figured out some of this so I'll reply here in case it can help someone else and keep them from some frustrating time discovering how to make this work.
As I've worked with Foundation I've come to really like it.  I'm using Joomla as my framework and Foundation is so much cleaner then the Bootstrap that comes with Joomla.
I run Fedora 24 as the workstation and all my servers are Centos 7.  I have used Netbeans and Eclipse extensively for work on my sites with Foundation but went back to my PHPStorm.  I looked at Koala but it's Ruby based and the project looked dead although I see someone is working on it and did create a script for use with the node-sass compiler when I asked.  Given I have PHPStorm I went with it.
I do not use Ruby.  I have nothing against it but nothing I work with needs it so I do not want to add it just for Foundation so that means I go libsass via node-sass and use npm as my package manager.  I still haven't figured out what use Bower is.  Yes, it's a package manager for the front end but I already have npm which packages my stuff and my framework simply uses zip files that are uploaded and installed.
The easy part is when you just want to use Foundation's css and js files and do not need or want to modify Foundation itself.  Download the Foundation complete (if you want flex modify the download). Then put the css and js file wherever in you web site and add the stylesheet and script links to your code.  I am at this point so I can be my sites started and get familiar with Foundation.  If I need updated files I'll download them and when the need arises I'll go to Step 2.
Step 2 is actually only needed if you want or need to modify the Foundation css files instead of overriding them with your own css files. Unfortunately the documentation is horrible and tries to tell you how to do everything all at once such as doing if for all package manages and is not well organized.  It looks like they took their development environment and had us download that instead of stripping out the stuff like bower, npm, and just giving us the files we need and let us integrate them into our development environment.  Then they whipped up some documenation but they already knew how to set it up.  Really all we need is the scss files and the _settings file instead of their environment.  They really need to split the process out so that if  you are using Compass do this, if you are using lib-sass do this and not even bother with the grunt example.  They say they use Gulp then give a Grunt example.  Just tell us how they handle autoprefixing and let it go.
First you choose Ruby or lib-sass.  For reasons given above I went with lib-sass and node-js.  Once you make this choice you have to choose tools such as Compass for Ruby based or others depending on your company standards and situation. For me my tool chain is npm, gulp, PHPStorm.  I use npm to install the gulp modules needed and run the Gulp default script when PHPStorm starts up.  The script watches for changes in the scss and other files and then compiles them and puts the final result where it needs to go.  Autoprefixing is handled by gulp also.
I used npm to init the package.json file in my project directory and then installed the gulp modules I needed such as watch, prefixer, and some others. This created the package.json file and the node_modules directory in my project directory.  In my IDE I excluded the node_modules directory from searching or being used.
I created my gulpfile.js which has default task called watch.  This task was created in the file as well as others such as autoprefix which runs the autoprefixer, and scss which compiles the scss file into css.  When a change occurs in the scss or other files they are automatically compiled to css, autoprefixed, and then placed in the proper directory.
I set my IDE, PHPStorm, up so it starts Gulp with the default task when it starts up.  I use the dist and src directory structure where src is where I keep my uncompiled assets such as js, scss, and other files.  The dist directory gets named the same as the directory on the web server that my project is working with and it contains the final result of any scss compiles, my php, code, etc. all in a format that keeps Joomla happy.
At this point I think the docs and the process needs changing.  Just give us the _settings file and the js and scss files needed to build css and js files from the Foundation "source".  Get rid of the bower stuff, the dist directories, etc. and just give us the src directory.  Yes, given the current download you could build your css and js and have it in  the dist directory but why bother.  Most people have their own environment setup so we have to dissect what they give us and pull out the pieces.
I really do like Foundation and it' my framework of choice now.  It's neat, clean, and makes sense as well as supporting responsive really well and it has neat features like topbar.
 

You commented on Brett HOlcomb's post 11 months

Okay.  I've got it all working and as a plus my Netbeans environment uses node-sass and gulp to automate things.  If there is any interest I can write up a step by step explanation of what I did.
 

You commented on Brett HOlcomb's post 11 months

An update.  I've managed to piece together the last few days of information and got node-sass working on the command line and in Netbeans 8.2 to compile scss files and put them in my /css directory so that's all good.
I did install the foundation-sites using npm and despite the foundation webpage I figure out that all I really need is the  foundation.css or min.css files since I have no intention of changing Foundation files or compiling them.  If I need to modify something Foundation provides I'll copy the scss file and put it in my own scss build area so I don't mess with the original and it doesn't get overwritten.
If anyone is interested I can write up what I did.
I still agree with the posters (which seem to be legion) that Foundation's documentation for SASS/SCSS is a very weak point.  It assumes you know what your are doing and even then presents it in a helter skelter arrangement.
I'm still working on the  autoprefixer part trying to figure out what the docs are telling me.
Again, I'm more than happy with Foundation as a Framework and it's far above the others but fortunately I had to spend a lot of time to figure out how to make it work.  It shouldn't be this hard.
 

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content