I'm attempting to change the maximum row width from 1200px to 1560px however I'm having trouble finding anyway to do this. I'm using SASS to compile.
I'm assuming that settings just need to be changed in the settings.scss file however any changes I make seem to have no effect on row width.
I saw a breakpoints variable here
$breakpoints: (
small: 0,
medium: 1200px,
large: 1560px,
xlarge: 1440px,
xxlarge: 1440px,
);
There I changed large: from 1200px to 1560px and changed the other breakpoints as well.
I also changed the $global-width here
$global-width: rem-calc(1560);
None of these seemed to have had any effect. I made sure it was included in my main.scss file.
#import "vendors/foundation/settings";
#import "base/colors";
#import "base/global";
#import "base/typography";
My folder structure is
-_main.scss
-base
-_colors.scss
-_global.scss
-_typography.scss
-vendors
-foundation
-_settings.scss
Also I double checked and the effects of all the other scss files are working just fine. I'm getting no errors.
UPDATE: I also made sure that the settings import happened after my base foundation includes
#import '../bower_components/foundation-sites/scss/util/util';
#import '../bower_components/foundation-sites/scss/foundation.scss';
#include foundation-global-styles;
#include foundation-grid;
All occur before the rest of my imports.
How do you change the max width or rows/breakpoints in SASS in Foundation 6
UPDATE: I also added a test variable
$testcolor: #523432;
and used it elsewhere in base/colors like so
* { border: 1px solid $testcolor;}
And that works just fine.
Turns out it had to do with the order I imported. The _settings.scss file needs to be imported before the base _foundation.scss file.
Related
I initialized a new project using
tns create <project_name> --vue
So I've the file ~/App/app.scss
// Import app variables
#import 'app-variables';
// Import the theme’s main ruleset - both index and platform specific.
#import '~nativescript-theme-core/scss/index';
#import '~nativescript-theme-core/scss/platforms/index.android';
// Import common styles
#import 'app-common';
I'd like to try one of the themes, for example 'aqua' or 'brown'.
What must I add and/or changes?
Opening _app-variables.scss I found this at start
#import '~nativescript-theme-core/scss/light';
I changed to
#import '~nativescript-theme-core/scss/brown';
Then commented all the overrides of the variables.
Then in my Home.vue, in the style section, I commented the use of $dark_accent.
In this way I can simply switch theme using the first row of _app-variables.scss
Specifying $include-html-classes to false and then importing Foundation 5 to your Sass file still generates a bunch of CSS. Looks like some of it is meta stuff for versioning information I suppose, but some of it looks like HTML classes. I thought the whole point of using this variable was to remove HTML classes?
Here's my SCSS file:
#import "../foundation/settings";
$include-html-classes: false;
#import "foundation";
This wasn't a problem in Foundation 4. What are these styles and how can I get rid of 'em?
This looks like it is a bug where new presentational classes have been added above the conditionals. Since you question is how to fix it, here is the process if you don't want to wait until it is fixed officially.
Move your Scss into a different directory or fork the foundation bower repo.
Update your config.rb (line 2) to point to the new files, this is relative to your project directory
# Require any additional compass plugins here.
add_import_path "some_other_directory/foundation/scss"
Then you will need to modify each file that generates presentational classes. Luckily Compass/Sass gives us the exact place to look.
/* line 259, ../bower_components/foundation/scss/foundation/components/_global.scss */
meta.foundation-version {
font-family: "/5.1.0/";
}
On line 296 you will see the conditional line:
#if $include-html-global-classes {
and all of the classes that have been added above it.
You will need to move this line to 260 and it should look like the following.
#include exports("global") {
#if $include-html-global-classes {
meta.foundation-version {
font-family: "/5.1.0/";
}
Since this is Scss you could either leave or correct the indentation to match.
You would need to repeat this for each file that generates CSS with Compass. If you are running compass watch, you can just check or reload your stylesheets/app.css after each correction.
I am having an issue with the following import
#import "../foundation/components/top-bar";
I get Line 342 of _top-bar.scss: Undefined variable: "$row-width"
Unfortunately I can't find much documentation about this variable.
Digging into the source of _top-bar.scss I get to the offnding line 342:
.contain-to-grid .top-bar { max-width: $row-width; margin: 0 auto; }
The documentation says about .contain-to-grid:
If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid".
This means the class is optional. Therefore shouldn't $row-width be set to some sort of default to prevent the above error appearing (i.e if I decide I don't want to use .contain-to-grid)?
Variables such as the one I encountered are defined either in a templates/project/scss/_settings.scss or my own settings.css. Therefore I created my own copy of the original _settings.scss and imported it (i.e #import "settings";).
In other words it was in the documentation the whole time under the section "Using Sass Standalone".
I am trying to make dynamically generated html 5 graphs show up in a webview in Blackberry 10 Cascades. I have confirmed the html5 that I have generated, draws the correct graphs. My problem is that when I try to implement this in the Blackberry 10 Cascades Beta 3 SDK (using the Blackberry 10 Dev Alpha Simulator), the webview that is supposed to show the graph, just looks like this:
Here is the code that leads to this error:
//html_ already contains the html-5 code to make the graph at this point in the code
//This is the file path to a local file that is actually accessable in the emulator
//and not just from Windows
//
QFile *chartFile = new QFile("app/native/assets/data/chart.html");
if (chartFile->open(QIODevice::WriteOnly)) {
chartFile->write(html_.toUtf8());
chartFile->flush();
chartFile->close();
}
if (chartFile) delete chartFile;
if (graphView_) {
graphView_->setHtml("");
graphView_->setUrl(QUrl::fromLocalFile("app/native/assets/data/chart.html"));
}
I checked the permissions of that file, put they are all Allow (777 permissions for those who know Unix style permissions).
I added access_internet to the bar-descriptor.xml, eventhough my app was already able to access remote sites, just to see if that would fix it, but it did not.
I've been searching around trying to find a solution to this problem, but I have not.
If anyone could help me out with this, it would be greatly appreciated.
-------------------------------------------------------
Update:
I changed the code to set the html directly, now I have this:
if (graphView_) {
graphView_->setHtml(html_, QUrl("app/native/assets/data/chart.html"));
}
But nothing shows. It seems I have the wrong relative path relative to my base url.
My base url is this: QUrl("app/native/assets/data/chart.html")
My relative paths all begin with: ./Highcharts/js/...
My relative paths are located under: app/native/assets/data/Highcharts/js
It seems to me that I this should work, but when I do this, I just a blank screen, as if it can not find my relative paths. So I don't know what's going on here either.
I found a solution that works. I'm using the first approach, not the updated approach, but instead of
graphView_->setUrl(QUrl("app/native/assets/data/chart.html"));
I'm using:
graphView_->setUrl(QUrl("local:///assets/data/chart.html"));
And I have left the rest of the code the same, and it works.
To cut a long story short, my project (an iPhone app) was all working fine until I started using a C++ sdk (openfeint). Everything was working fine, including the C+++ Openfeint stuff, until I switched from tesitng on the device to testing in the simulator.
Now it won't compile for anything and I'm getting just under 200 errors. It's all just spiralled out of control and wont compile on any device. As I said, everything was working perfectly, I didn't change a single line of code, I simply switched Active SDK's.
So I'll start at the beginning. The first error is...
Error 1: ISO C++ forbids of declaration 'BrickControlLayer' with no type
Clicking on this error takes me to the header file for another class...
// GameScene.h
#import <Foundation/Foundation.h>
#import "cocos2d.h"
#import "brickSprite.h"
#import "BrickControlLayer.h"
#import "GameState.h"
#import "ScoreController.h"
#import "FeedbackLayer.h"
#import "TimeBar.h"
#interface GameScene : Layer {
GameState *gameState;
ScoreController *scoreController;
CocosNode *spriteHolder;
brickSprite *targetBrick;
// Heres the line it takes me too <<<<<<<<<<<<<<<<<
BrickControlLayer *controls;
NSInteger difficulty;
NSMutableArray *pointsLookupArray;
BitmapFontAtlas *scoreLabel;
FeedbackLayer *feedback;
NSDate *startTime;
TimeBar *timeProgress;
int rowScanCount, foundRows;
}
// methods here....
#end
I'm new to this, so bear with me. I was confused as I'm clearly stating that *controls is of the type 'BrickControlLayer'. So I'm thinking there's something wrong inside 'BrickControlLayer' itself.
Here's the header...
// BrickControlLayer.h
#import <Foundation/Foundation.h>
#import "cocos2d.h"
#import "brickSprite.h"
#import "HighScores.h"
#interface BrickControlLayer : Layer{
CocosNode *spriteHolder;
CGPoint touchedStartPoint, moveFromPoint;
brickSprite *touchedBrick;
BOOL editorMode;
int movecount;
// Control buttons
AtlasSpriteManager *buttonManager;
AtlasSprite *rotLeft, *rotRight, *newBrick, *deleteBrick, *makeTarget, *save, *run;
BOOL tapToContinue;
}
#property (retain, readwrite) CocosNode *spriteHolder;
#property (retain, readwrite) brickSprite *touchedBrick;
-(void)showEditorControls;
-(void)selectBrickAtLocation:(CGPoint)location;
-(void)hideEditorControls;
-(void)deactivate;
#end
I've been over it and over it. It was all working fine before and I simply can't figure it out. I've been googling it and the only thing that crops up is the term "Forward Declaration", but that doesn't mean anything to me and all the info I've found talks about structs.
I suspect the errors are more of an indication that I'm doing lot's of other things wrong, rather than committing a simple one line typo or something. Can anyone explain in laymans terms what's going on here?
Jason here from OpenFeint. If you'd like to send over a code sample to devsupport at openfeint dot com that demonstrates the problem we'll take a look at it for you. It sounds like you may be including the header file from a .CPP instead of a .MM file.
If all you did was change the iPhone Target SDK, double check that when you setup compiler options you did it for all SDKs and build configurations (release, debug).
The error you're getting sounds like the compiler doesn't recognize that you're in an Objective-C declaration OR it can't find the header declaration for BrickControlLayer. Could be a circular include? (do you use include guards or #pragma once?)
Hope that helps,
- Jason Citron
- Founder & CEO, Aurora Feint
Your error is about BrickController not BrickControlLayer so I don't think that you've posted the line that the compiler is actually complaining about.
Having said that, I think that your fundamental problem is that you are trying to compile files that look to be Objective C with something that, from it's error messages, thinks that it is an ISO C++ compiler.
Have you followed all of the steps listed on the Integrating the OpenFeint SDK page?
Alternatively, you could create one single class that is Objective-C++ that interfaces with OpenFeint. Then all your Objective-C classes can remain the same but make calls to the OpenFeint handler class.
Have you renamed all files that include or import OpenFeint to .mm ? Also have you tried turning off (or on) 'compile for thumb' in your build settings?