I'm trying to follow the Zurb Foundation "manually installation".
According to the instructions:
First you will need to clone or download the master zip of the
Foundation Compass Template from Github. This will be the root of
your project.
Then you will create a directory called bower_components.
The next step is to clone or download the master zip of the
bower-foundation repo in that directory.
Then rename this directory to "foundation".
And then it says that the filelist should be like this after following all the instructions:
bower_components (folder)
js (folder)
app.js
scss (folder)
_settings.scss
app.scss
stylesheets (folder)
app.css
bower.json
config.rb
humans.txt
index.html
robots.txt
Now, I'm probably missing something really silly here, but there's no way that following those instructions I get that file structure.
For a starter, there's no .rb file, and bower-foundation has a foundation and vendor folders inside the js folder! And how about the spec folder that's inside the foundation-master zip file? And you get more than one scss folder.
So, maybe I'm somewhat burnout and don't quite understand the instructions properly?
Just in case anyone out there happens to bump into the same issue, I've solved it following their video instructions to do it with the CLI (using the command line).
After doing it (it's pretty fast and straightforward), I can confirm that their "manual instructions" are NOT correct, so please, up until they update them you should NOT use those instructions.
Related
I'm working on a WordPress theme (more specifically: a wordpress theme boilerplate) which makes use of SASS (and lots of other technologies). My SASS files are within assets/sass. My problem is: how/whereto compile them?
Compiling them into the root directory doesn't feel right, since it gets bloat up - and it is already pretty big (with Grunt, Bower, etc.). But the asset path problem (see below) would disappear.
Compiling them into a directory (like temp or whatever) wouldn't bloat up my directories but lead to the asset path problem.
The asset path problem:
elem { background-image: url('images/foobar.png'); }
The path would be correct if the compiled sass file in assets, nowhere else. assets/images/foobar.png would just work in the root directory.
An important note: it's possible to create a distributable version of the theme with Grunt, where, amongst other things, all styles are concatenated with the style.css file in the root directory. The generated dist directory then contains only files which should be uploaded to a server or used for distribution (no build files, no sass, no coffee, etc. - just compiled and "finished" files).
Any ideas? Thanks.
I would like to add my own css file into a Jhipster project.
I put those files in src\main\webapp\assets\styles\
The gruntfile.js should be able to add those files into the depencies am I right ?
But they added ... any idea why ?
Thanks
Yes if you put a file into this directory, it will belong to your project (that's kind of obvious, as it's the CSS folder of your project).
I guess that what you want to do is use this file inside your index.html file. The normal grunt wiredep command works only if you use Bower, which is our JavaScript/CSS dependency package manager. In your case, you are just adding the file manually, so you are not using Bower: just add your file inside the index.html file, as would do in a normal project, outside of the Bower tags, and you will be able to use it.
Can I compile scss from project folder created with foundation new project with sass?
Why js folder had only app.js file, should I move files from bower_components/foundation/jsto (root)/js or link to their folder?
Should user css settings includes in app.css or custom file that includes app.css?
In bootstrap sass files collected in one folder, why in foundation scss folder had only app.scss and other files in bower components.
When you install Foundation this way, you use the SCSS folder created that contains the _settings.scss & app.scss. The app.scss is what you tend to use as your base SCSS file to compile from so you'd include all your other SCSS files to this one. You can move this file to elsewhere if you please but move the config.rb with it and make sure the add_import_path works from where you move it to.
You don't need to move the files, everything in bower_components should never be touched or moved, they are there so they can be upgraded when necessary, you shouldn't have to touch base Foundation files.
I said before you should use that, but you could include the app.scss into a custom scss file but it's better to have control of the Foundation imports in 1 file, in my opinion.
For the same reason i mentioned in 2, so you don't touch them and Bower can easily update them if you require.
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder
I decided to use the Sass version of Foundation4 as the CSS one is virtually impossible to edit efficiently now.
I followed the instructions here: http://foundation.zurb.com/docs/sass.html
These advised me to install the gem (no problem) then install compass then create a project, which I did in wwwroot.
All good so far. It then goes on to advise me to "download the files from Github (grab the scss/ and js/ directories) and put them into your project directory"
Now why in the name of a fish on a bicycle would the instructions advise me to do this when the previous step on the command line (compass create -r zurb-foundation --using foundation) creates a folder already in the root directory for my project - albeit named differently - that contain similar if not identical files? There's already a "javascripts" folder with "foundation" and "vendor" subfolders that contain largely the same files - although some are different sizes.
Am I missing something? The included "index.html" file reference the "javascripts" folder so why am I meant to be including "js" from the github? This is very confusing when you're new to the technology!
After following the installation instructions I now have "foundation.scss" and "app.scss" files which seem to be largely the same apart from one (app.scss) has lots commented out. Which one am I meant to use?
It seems to me that the instructions are basically out of date. It appears that I don't need "js" from github but I do need "scss". The contents of this scss folder look like they need to go into the "sass" folder created when the project is made and the "foundation.scss" file can be deleted as "app.scss" is a copy of it.
I have no idea where the base "app.scss" file is hoping to "#import foundation" from as there is no "foundation" folder created on installation/creation of project. Maybe I'm missing something but it's all very confusing. Could someone please clarify what I need to start with and what I can delete/ignore?
When you install the gem, all the proper Foundation files are installed for you in the gem cache. Compass will pull all the F4 SCSS files into your project via the #import directive from foundation.scss.
The project docs in the Github repo show the latest Compass instructions for building your F4 project.
https://github.com/zurb/foundation/blob/master/docs/sass.html.erb
It sounds like you are mixing the Standalone instructions into the Compass ones.
If you have run this:
[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation
You don't need Github or the Standalone instructions.
The steps below outline the manual steps of building an F4 project. I think you're stuck on STEP 4, so focus on that part.
STEP 1:
Download for easy access these two archives:
Foundation Vanilla:
http://foundation.zurb.com/files/foundation-4.1.6.zip
Foundation Master:
https://github.com/zurb/foundation/archive/master.zip
CD into your www root directory:
STEP 2:
Create this file:
/config.rb
require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true
Switch output_style = :compact or :compressed and line_comments = false for Production (when going live).
STEP 3:
Copy/Move index.html from Foundation Vanilla into your root www directory.
Edit line 11 and change foundation.css to app.css in the style tag.
STEP 4:
Create this directory and file:
/scss/
Create app.scss - This is your site/app stylesheet and we'll import Normalize and F4 in it.
Copy this into it:
// Global Foundation Settings
// #import "settings";
// Comment out this import if you don't want to use normalize
#import "normalize";
// Comment out this import if you are customizing you imports below
#import "foundation";
// Your own SCSS here...
If you want to override some F4 SaSS variables you will need the _settings.scss file. For now I would skip this step and leave it commented out until you are more familiar with F4.
STEP 5:
Create this directory (files automatically written here):
/css/
app.css - will be written here from /scss/app.scss by Compass. Normalize and all the F4 CSS will be inside it, plus any of your own CSS you've added.
This happens automatically, you don't need to do anything except have the required gems installed and your Compass config file from STEP 2.
STEP 6:
Create this directory and copy/move these files into it:
/js/
Copy/Move /js/foundation.min.js from the Foundation Vanilla download here.
If you need your own app.js create/place it here and link to it last in your footer.
/js/vendor/
Copy/Move /js/vendor/custom.modernizr.js from the Foundation Vanilla download into here.
Copy/Move /js/vendor/zepto.js and /js/vendor/jquery.js from the Foundation Vanilla download here.
Later, when you feel more comfortable, you can cherry pick individual Foundation JS files from Foundation Master and concatenate them into a smaller lib here as foundation.min.js.
That should do it.
Check out this file in my www repo, as it shows a working F4 setup:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html
You can also poke around there for how to integrate Grunt.js for automated build of the SCSS and JS with concatenation and minification:
https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js
Without being as adept as #jhauraw, I did notice something else.
I installed FOundation through the Compass app. Being a novice with Compass, I too was looking for the "foundation" folder that would contain all the various Foundation SCSS files. And when I looked at the _settings.scss file that was present, it appeared that everything was commented out. What I know understand (still as a novice towards Compass) is that the "foundation" file lives within a resource library within Compass. When needed, these files are imported when generating the CSS file. The _settings.scss file with all the commented out fields is an override file. So if you remove the comments for a particular variable or mixin, it will override the originals hidden in the Compass library. The compiled CSS seems to contain everything that's needed.