Correct Way to customize zurb foundation 6 with bower - zurb-foundation

Using zurb foundation 6 with bower, what is the normal workflow to customize it using the _settings.scss file, so that the file doesn't stay in the bower_components folder.
This answer says that we could copy the settings file and then import it in our app.scss.
In my custom scss folder, I have made a settings.scss file using the _settings file as template, but in that case I also have to copy the entire utils folder as the settings file imports that.(or change the import path of the utils folder to the one in bower_components).
Is there a better way to do this ??
Edit
I am using gulp to compile the sass files.
gulp.task('sass', () => {
gulp.src('./app/sass/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest('./app'))
})
And this is what app.scss looks like right now (foundation.scss is a file which imports the scss files from inside the bower_components, while settings is a clone of the _settings file with some changes)
#import 'settings';
#import 'foundation';
#include foundation-global-styles;
// #include foundation-grid;
#include foundation-flex-grid;
// #include foundation-typography;

You definitely want to copy the settings file out of the bower_components directory. Then you should add bower_components/foundation-sites/scss to your import paths where you compile the SCSS and that will take care of the utils issue. The import path needs to be in the options object inside of the gulp-sass pipe like so:
gulp.task('sass', () => {
gulp.src('./app/sass/app.scss')
.pipe(sass({
includePaths: ['bower_components/foundation-sites/scss']
}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest('./app'))
})
When you use the includePaths option, imports will check for files relative to the current directory, followed by files relative to the directories in the includePaths array. #import util/util works after adding bower_components/foundation-sites/scss to the includePaths because the full path is bower_components/foundation-sites/scss/util/_util.scss.

Easier:
Move the default bower_components/foundation-sites/scss/settings/_settings.scss file into your own project styles.
Edit _settings.scss file to your liking.
Go to bower_components/foundation-sites/scss/foundation.scss file:
Replace:
// Settings
// import your own `settings` here or
// import and modify the default settings through
// #import 'settings';
With:
// Settings
// import your own `settings` here or
// import and modify the default settings through
#import 'your_own/project/styles/path/settings';
Make sure foundation is being imported on your styles:
#import "bower_components/foundation-sites/scss/foundation.scss";
VoilĂ !

Related

ember sass import file with tilde

I'm trying to import in an ember project that uses ember-cli-sass a scss file from a node_package which imports another scss file from another node package using ~;
basically the file I'm importing contains the following instruction:
#import "~bootstrap/scss/functions"; // from bootstrap node_module
but that breaks the build since it seems that ember-cli is not resolving the ~;
I've configured ember-cli-build with
sassOptions: {
includePaths: [
'node_modules/<package_name>/scss',
]
},

Fontawesome with Foundation 6 - Error

I'd like to incorporate fontawesome icons on my Foundation Sass project and I am having an issue. I have done everything as suggested by fontawesome team and yet it is not working...
I bower installed the fontawesome
I have added the scss file to the config.yml
I have changed the path name to fonts folder
https://postimg.org/gallery/1h018wsm8/
What I get in my browser is weird symbols and for some reason it is not working. Can you please tell me what I am missing? Thanks...
You have to #import the scss file from the bower_components folder in your Foundation _settings.scss or app.scss file.
The reference you have in config.yml is the PATH to the plugin/module not the import of the actual scss file. What this does is copy the *.scss files to the dist directory, but they still require referencing from your site/app code.
e.g. I use app.scss to import the various scss files and so my #import command for Font Awesome is:
#import '../../../bower_components/font-awesome/scss/font-awesome';
Note: this is to the specific file font-awesome.scss (where you set the font files path), not the whole directory so you also need to make sure you import the font files too which can be done via gulpfile.babel.js + config.yml.

How to include ember addon's scss files directly into consuming app

TL;DR
How to import scss files from ember addon to consumers app(should import scss files and not processed css file, scss should be processed in consumer's app instead).
Details:
I am developing an addon and I am using sass for design, I want to let my users configure css properties from addon. For this I want to import scss files directly into the consumers app(I don't want them to use already compiled to css file that would go to vendor.css file) and override some of the variable's value.
Here is the plan on how it should work:
I have a configuration scss file, which has several variables I want to be configurable, user can override these variables by first including their own configuration scss file and our scss file below that(more details on how scss variables can be made overridable and are overriden).
The file structure for addon/styles is as follows:
I have imported all css files inside addon.scss as follows:
#import 'config';
#import 'helpers';
#import 'normalize';
#import 'base';
#import 'utilities';
#import 'modules';
#import 'datetime-picker';
#import 'fontawesome';
#import 'animation';
#import 'states';
The values I want my user to override are in _config.scss. Part of my _config.scss file looks like this:
$header-font: $font-sans !default;
$header-font-size: $small-font-size !default;
$header-font-type: normal !default;
I want user to provide their own value for variables like $header-font,$header-font-size and include before scss from my addon is included.
Ember version: 1.13.3

Ionic2 - How to import css files for a page component

I have to import some stylesheets residing inside node_modules (bootstrap.css from node_modules, etc).
I tried by
adding styleUrls inside #Page,
putting the styles in the .scss file inside the page component folder,
and finally putting the styles inside the template file itself by creating new style tag... all with no luck, i.e the required styles are not getting applied on tags with appropriate classes.
How to do this ?
PN: I had imported the page scss for my components in app.core.scs.
Anyways, I think putting bootstrap.min.css inside page scss is not a
good way
Adding the above import doesn't seem to work in the latest version of Ionic2 (ionic -version = 2.1.4) that I installed on 10/25/16. There is no longer an app.core.scss file in newly created projects. But rather just variables.scss in src/app/theme.
There is a file app.scss in src/app that says it's for global SASS and importing other files, but adding an import for another page does not seem to make a difference.
I have a page /src/app/pages/about, in which I have about.ts that has styleUrls: ['about.scss']. The file about.scss is in the same directory. Putting #import "../pages/about/about"; at the bottom of that file makes no difference.
UPDATE:
I have finally got it to work with this in about.ts:
styleUrls: ['/pages/about/about.scss']
I'm not sure if this is the best way yet, but it works for now.
#import "../pages/yourpage/yourpage"
Add this line in app/themes/app.core.scss and rebuild. Of course change yourpage expression.

How to use Foundation 5 with Compass+SASS?

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