Applying NativeScript themes to a project downloaded from NativeScript template - css

I am applying NativeScript themes to a project downloaded from NativeScript template project.
docs here says to place below line in app.css. I did not find direct app.css file but app.android.css file. Already It has some css code in it and I placed at end of the file.
#import '~nativescript-theme-core/css/core.light.css';
When I run tns preview CLI removes newly placed code from app.android.css file so I created a new file with app-common.css and placed in it.
Now, CLI does not remove it but themes are not visible in mobile app.
How do I link those style sheets to my project?

Related

CSS not imported into JS file in react + rails app on heroku

Hi I am having an issue of css on Heroku. The app is ruby on rails app with react on the frontend. The styles are not added. It works fine on local environment but not on production. I used the following link for adding react to rails
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-ruby-on-rails-project-with-a-react-frontend
You can see that css classes are not present in inspect in heroku app
Inspect tools link Heroku
But the css classes are present on local environment
Inspect tools link Heroku local
I had searched google for almost two hours but not found any relevant solution.
I have imported stylesheet to JS file as you can see in this image
Import CSS to js file

Updating website's style with SASS and uploading it to server

I made changes to my website styles using the specific SASS file for the specific page that I updated. Now, in order to make this changes to my published website (until now, everything was done locally), should I upload just the modified SASS file? Or should I upload the main SASS and CSS files where everything is being compiled locally?
Answering my own question: the solution is to upload the newly modified SASS file, together with the main SASS file and the CSS file and it will work.

How to Use CodeKit with WordPress and Foundation

I’m a new user to CodeKit and sass and I’ve been playing around with it for the past few days trying to figure out how to use it correctly to improve my workflow.
I’m building a WP project so I start by creating a new CodeKit project with Zurb and compass. It outputs the files and I throw them into a folder called 'Foundation'. I then throw in my WordPress files, and throw that ‘Foundation’ folder into the theme I’m working on in WP in my ‘assets’ folder. I know in the YouTube video CodeKit mentions not to pull the files out so that any linking isn’t messed up, but I can’t keep those files in the root of my project because they need to be within the theme.
So it looks like this:
wordpress/theme/assets/foundation
Assets is also where my sass files live for the overall site
wordpress/theme/assets/sass
Where I get hung up is in the compiling of the files.
I have one master style.sass file where I import all my partials and that works correctly. I want to include the foundation app.scss file so everything is in one place, but it doesn’t call it up. It says the compiling is complete, but when I look at the code it’s just the import line without the foundation code actually being outputted. I also found that if I place my sass partials in a folder called partials, CodeKit can't compile them, even though I'm importing them with the folder name, example: partials/layout, instead of layout.
I’m doing this locally so I can’t show you the link, but I guess I just feel like I’m setting this up entirely wrong.
My question are:
How do others setup their projects on CodeKit with WordPress and Foundation?
Is it correct to import .scss files into a .sass file?
Any help would be appreciated.
You should make your CodeKit project only contain the folder for the theme you are developing. CodeKit should then put foundation, jquery, and other scripts and frameworks in a folder called bower_components because it uses bower to fetch the project's dependencies.
The advantage of using bower is you can update the packages from the command line and also through CodeKit. You can also keep dependencies out of the git repo by adding bower_components to your .gitignore file.
Check out this directory structure that I use based on the Roots Sage Starter Theme
/your-custom-theme-folder
|--/bower_components
|--/foundation
|--/jquery
|--/etc.
|--/assets
|--/fonts
|--/images
|--/scripts
|--main.js // custom js for theme goes here
|--/styles
|--/modules
|--/utilities
|--/etc.
|--main.scss // all sass is imported through this file
|--/dist // all files compile to this directory
|--/fonts
|--/scripts
|--app.js // all js files concatenated together
|--app.min.js
|--/styles
|--app.css // main.scss outputs all imported sass to this file
|--app.min.css
|--functions.php
|--index.php
|--single.php
|--style.css // no actual styles in this file, just theme info
|--etc.

Can't load custom CSS on Heroku

I am running Rails 3.2.8 and built an app which links to a custom CSS file and images. The custom CSS file is placed in my Assets/stylesheets folder and images are in Assets/images.
For some reason, the CSS and images don't load when I push the app to Heroku. The app generates a manifest.yml file which contains all the images and CSS file.
The CSS file is a customised version of Twitter Bootstrap: http://twitter.github.com/bootstrap/index.html
Hope you guys can help and thanks in advance!
I don't think you can store images on heroku. You'll have to use something like amazone s3 bucket. And then link the ccs images to the amazone bucket

Css in Flex without compiling?

I added an external stylesheet file (css) to my flex project. Is there a possibility that the css is not compiled with the swf? It would be great if I could put the swf on my webspace and afterwards only change a css file to customize my application and fit it to the colors of my homepage.
Thanks in advance
Sebastian
Yes thats exaclty what happens.
Right click the CSS in your flex project and click 'compile to swf' then when you build your app you will see the CSS file as a SWF file in the same folder structure but in the bin-release folder.
So next time you update the CSS, you just upload the updated CSS-SWF file. This is providing that you load in the CSS-SWF file at runtime.
If your app doesn't load the CSS_SWF at runtime it will still contain whatever styles it had when you built the app in the first place.
check out http://blog.flexexamples.com/2007/12/12/loading-cascading-style-sheets-on-the-fly-using-the-flex-stylemanager-class/ for more info on runtime loading of CSS.

Resources