I have a project that I would like to use foundation 5 with. I have been through the steps of creating a new foundation project using the CLI but I don't like it. There is too many files and the structure does not match what I want. So...
I am intending to add only the required files to my project and use compass to compile all the css.
I have noticed in the project created on the CLI a few things that confuse me and would like some help in clearing them up.
In the project created on the CLI there are two _settings.scss files one under the foundation directory in bower_components and one in MY_PROJECT\scss. I'm assuming that because of this add_import_path "bower_components/foundation/scss" line in the config.rb, which of those files has preference?
Why does MY_PROJECT/stylesheets not have normalize.css (or foundation.css) in it? And how are they not there? (in my custom setup they are being generated, albeit in subdirectories of stylesheets, also the foundation.css that is being generated for me has no settings changes applied so I guess it shouldn't be being generated)
If you take a look inside \bower_components\foundation\scss you'll see the file foundation.scss. That file imports all the stylesheets for all the additional components that come in the Foundation 5 "package." In your root scss directory, the app.scss is what compiles the SASS into \stylesheets\app.css. So rather than this:
#import "foundation";
Uncomment the individual components you'll be using. Something like this:
#import
//"foundation/components/accordion",
//"foundation/components/alert-boxes",
"foundation/components/block-grid",
//"foundation/components/breadcrumbs",
//"foundation/components/button-groups",
//"foundation/components/buttons",
"foundation/components/clearing",
"foundation/components/dropdown",
//"foundation/components/dropdown-buttons",
//"foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
//"foundation/components/inline-lists",
//"foundation/components/joyride",
//"foundation/components/keystrokes",
//"foundation/components/labels",
//"foundation/components/magellan",
//"foundation/components/orbit",
//"foundation/components/pagination",
//"foundation/components/panels",
//"foundation/components/pricing-tables",
//"foundation/components/progress-bars",
"foundation/components/reveal",
"foundation/components/side-nav",
//"foundation/components/split-buttons",
"foundation/components/sub-nav",
//"foundation/components/switches",
"foundation/components/tables",
//"foundation/components/tabs",
//"foundation/components/thumbs",
//"foundation/components/tooltips",
"foundation/components/top-bar",
"foundation/components/type",
"foundation/components/offcanvas",
"foundation/components/visibility";
If you'd like to streamline your file structure, I would suggest you remove any scss files from the \bower_components\foundation\scss\foundation\components directory that you will not use. Same with the js directory. You don't actually need to modify anything in the bower_components directory to get everything to work. Not entirely sure why it's all contained within bower_components, but I imagine it's got something to do with being able to update the core components later with future releases.
Someone else could probably give a more educated answer.
p.s. - make sure to compass watch in your CLI to see any of those changes made to your SASS files.
Related
I'm using Xcode (with C++) and my project layout (in the file system, not in Xcode) looks like this:
SubfolderA
-file_A_1, file_A_2
SubfolderB
-file_B_1, file_B_2
Right now I've set up this structure in Xcode via groups. And so, when I want to include file_A_2 in file_B_1, I write #include "file_A_2" in file_B_1.
Is there some way to make an inclusion look like #include "/SubfolderA/file_A_2", so that I can easily see to what directory/subfolder an included file belongs?
One way to see what's going on is to look at the Build Log and expand the line for compiling sourcefile.m. Look at the -I options being passed to the compiler.
If it's not to your liking you can add the source tree in the Build Settings > Header Search Paths to include $(ProjectDir)/srcroot and make it recursive, which saves you from adding each sub-folder individually.
In my experience this has never been necessary, however, as far as I can remember.
As far as the Xcode folders are concerned, if the top-level source folder is added then all sub-folders are automatically added when you add them to the filesystem, saving the hassle of keeping them in sync. You might need to add the top-level folder under the Source Files group for this to work, however.
Surprisingly, in Xcode's Build Settings I've added to User Header Search Paths non-recursive path to my project. This solved my problem.
I ended up here when I was having an issue with XCode while trying to include a header in a group by doing
#include "MyGroup/MyHeader.h"
Turns out the project structure and the file system weren't in sync, so I just had to remove my group from the project, put it in the correct place in Finder, then drag and drop it back into the project in the correct place and it worked for me.
I'm not sure if this is necessary or not, but I also have already set up my app's working directory because I am doing some game programming and need to be able to load in .png and make textures.
I have an ember app, and a folder with a file playGame/game.js. This file includes game logic, and I want to import it for asset compilation.
If this file is under app/playGame/game.js and my Brocfile is like this:
app.import('app/playGame/game.js')
this gives the error, path or pattern app/playGame/game.js didn't match any files..
but if I put the file under bower_components/playGame/game.js and my Brocfile:
app.import('bower_components/playGame/game.js'), this compiles successfully.
What is the problem and solution here?
There are two parts to this:
Where should I put my file to import it as an asset?
Why isn't putting it in my app-folder working?
The way to do what you want is to create a folder called vendor in your root, put the file somewhere in there, and then import it in your Brocfile.js like so:
app.import('vendor/playGame/game.js');
This is documented on ember-cli.com, although somewhat hidden.
You could also put it in bower_components, but that folder is for things installed with bower, and could theoretically be deleted (in fact, this is a common recommendation to various issues). Things in bower_components is also not checked in to version control by default, which you probably want to do in this case.
This should solve your issue.
Now, why doesn't it work to put it in /app?
app is a special folder. From the documentation:
Contains your Ember application’s code. Javascript files in this
folder are compiled through the ES6 module transpiler and concatenated
into a file called app.js.
This is what makes it possible for you to import stuff from within your app. The folders in app is available directly under your <appname> namespace, along with some other files and folders like config/environment.
Example:
import myWidget from 'my-app/widgets/my-widget';`
The referenced file is /app/widgets/my-widget.js.
The ember-cli website has some more resources for how to use modules. Read those if this doesn't make any sense.
To sum up:
You could put your file in app, but that would make it part of your transpiled package, and you'd have to use it that way internally with an export and everything else that comes with it. It would end up as part of <appname>.js
You could put your file in vendor and import it in your Brocfile.js as explained above. It would be part of vendor.js and load before your app code.
I'm using ember-cli's pod structure to group JS and templates by resource, which is a huge improvement. The last vestige of resource-related logic is the CSS (SCSS) files, which are already broken down along pod-like lines, but still stuck over in app/styles.
My idea is to move the CSS files into each pod, under the name style.css. My question is how to instruct SASS (via #import) directives, and/or Broccoli, to look for the SCSS files within the pods (could be several levels deep) and compile them into appname.css.
Erik Bryn actually just announced his ember-cli addon at EmberConf that does exactly that. Unfortunately it doesn't support CSS preprocessors yet, so until his addon is further along you'll have to make do with the non-pod way of organizing styles...
We create a nice addon ember-cli-sass-pods that uses ember-cli-sass (will install automatically) and lets you to generate and put your style scss files into your pods directories.
for example:
app/login
app/login/route.js
app/login/template.hbs
app/login/style.scss
or a component:
app/components/login-box
app/components/login-box/component.js
app/components/login-box/template.hbs
app/components/login-box/style.scss
Just run
ember g style [path] -p
Enjoy!
I have multiple i18n qm files and translation works like a charm right now.
The problem I'm facing is, that I have the following folder structure:
project
-build
--debug
--release
-src
-i18n
Now my colleagues have different build folder structures, hence:
translator.load("../../i18n/{translationfile}");
won't work for them.
One solution might be to settle on a specific build-folder structure, but this is not what I want. I'd prefer to export all the translations to the application itself so it may be shipped without any special folder structure. Just give the customer the binary and go, like it should be.
Anyway, I have no idea how to do this in qmake (nor in cmake for that matter, but qmake is what I need to use here.)
I had a look at: How to Integrate Qt4 qm files into binary using cmake and QRC? but still not sure.
Any help appreciated.
Looks like I fixed it.
Instead of
translator.load("../../i18n/{translationfile}");
I use
QDir dir(":/i18n");
translator.load(dir.absoluteFilePath({translationFile}));
I also added a i18n.qrc file to my pro file:
RESOURCES += images.qrc \
i18n.qrc
It works if I move the binary/executable to another folder and execute it from there, so I guess that's all that is needed to compile translation files into a QApplication.
The problem
Foundation 5 was released last week, that's great, but the new version requires to use bower for using F5 with SASS and the official documentation seems to be a bit incomplete and immature.
I'm trying to create a project using the steps proposed by the docs:
[sudo] npm install -g bower
and then
gem install foundation
No problems here. The problem is when creating a Compass project:
foundation new MY_PROJECT
cd MY_PROJECT
compass compile
After Compass compilation, I get the following error:
directory stylesheets/
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
/home/cartucho/MY_PROJECT/scss
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
/home/cartucho/MY_PROJECT/bower_components/foundation/scss
Compass::SpriteImporter)
create stylesheets/app.css
Compass config file (config.rb):
# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
The SASS file (app.sass):
#import "settings";
#import "foundation";
...
The problem seems to be in config.rb:
add_import_path "bower_components/foundation/scss"
because Compass fail trying to import the files settings and foundation but I don't know how to fix it. Any help will be highly appreciated.
Thanks.
You need to change the line foundation new MY_PROJECT by replacing MY_PROJECT with the folder you want to install the project on. After that, confirm that these folders exist on the directory you specified above - "bower_components/foundation/scss"
When starting a project run compass init and then compass watch (in Terminal) to watch for changes on the .sass files.
Personally, I don't go that route and use http://koala-app.com/ to convert or "compile" my Sass. It's FREE and awesome.
This is SASS were talking about. Please correct me if i'm wrong but you don't need the underscore when importing an "include" file. I create separate sass files for my variables and my mix-ins. They are prefixed with and underscore which signifies an "include" file. SASS recognizes #import "variables"; as #import "_variables.scss". So to be clear when it is an include file just the name of the sass file is need not the _ or the scss extension.
I have never put an underscore before any include file that I have named _filename.scss.
There is probably another issue going on. Possibly with the install and the paths for bower. For those who did add the underscore in the past and it worked...well you just bypass what could become a deeper issue down the road. You need to check your install.
In your app.sass file change the following line
#import "settings";
To
#import "_settings";
Explaination
When you run compass watch you got the error
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
This just means it can't find the settings file being imported. By adding the underscore to the settings file you have specified the correct file path. If you receive any other errors like this, make sure the file path is correct.
I think I had the same error; finally I found in the _settings.scss
You need to underscore before the importing the functions
Before:
// Uncomment to use rem-calc() in your settings
#import "foundation/functions";
After:
// Uncomment to use rem-calc() in your settings
#import "foundation/_functions";
Also you would need to import the settings same way.
In my example I made style.scss and import all the SCSS inside :
#import "foundation/_settings", "_normalize", "_foundation";
I encountered this same issue, but for me the solution was to change the import of settings in app.scss from:
#import "settings";
To:
#import "foundation/_settings";
Once you've done that, run compass watch again.
You can install Grunt into your project which uses compass's watch function and then some other clever stuff to compile your sass and livereload it in the browser! Here's a great tutorial on how to get it up and running! (it's as simple as creating two new files in the root of your project and then running a few commands from your command line! I seriously advise it!)
http://moduscreate.com/get-up-and-running-with-grunt-js/
I had the same problem.
For Ubuntu 14.04 users make sure nodejs and Bower are working properly.
You can follow these instructions here http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283