zurb foundation into an existing django project - css

i would like to use Foundation 6 in my django project but it seems hard to do.
To work with sass, I have to use the cli and create a foundation project and it's not what I want because I already have a django project.
I tried to copy all files from scss folder into django but I always have errors when sublim text compile files to css.
Do someone has an experience with the same case ?

Related

Build tools structure - NPM, Grunt with Wordpress

I want to integrate some build tools like NPM and Grunt whilst i'm working on my Wordpress theme. Eg...I'll write some Sass to compile it down to an .css file.
Where do the build files like grunt file and node_modules folder live within the wordpress theme?
There's documents on how to do it but not many documents on how it is structured.
How do you structure build tools to work with a wordpress theme?
I usually compile my own version of css from scratch when doing a client website - using built in tools suggested by either bootstrap, bulma or uxkit. For bulma you have a nice introduction on how to compile their framework
https://bulma.io/documentation/customize/with-node-sass/
In my workflow - I don't know if that would be optimal for everyone - I put wordpress files on the same level as node_modules folder but compile straight to wordpress theme folder, so my build command is as follows:
"css-build": "node-sass --omit-source-map-url src/scss/app.scss ../wp-content/themes/labaza/app.css",
So in this case when you take your files from local machine to server you just overwrite theme folder, and need to make sure that you're not uploading any node_modules.
Hope that helps - but as I wrote it's only my idea based on how I like to work.

Where would I find the css bootstrap after installing it via the composer?

I am new to composer.
I am trying to add CSS booststrap tp my laravel 5.1 project
To download the framework This is the command that I used
composer require twbs/bootstrap
But I can't find the css files in my laravel project.
Is there another step that I will need to make the CSS booststrap part of my project?
Maybe this has changed since Laravel 5.0, but bootstrap is included by default in the default app.blade.php view.
That may help you, but if you want the css files to also be local, check in the /vendor directory or public/css one.

How to include your own css files in a rails application using bower?

I am working on a rails app and I would like to include some custom css files inside my rails application. I would like to separate out the css from bootstrap and the css that I wrote. Could I just put the custom css files inside vendor/assets/bower_components folder in my own css folder?
Is there anything else that I need to do for my css files to be picked up?
There are several ways you can achieve bower functionality in a Rails application.
Although having said that, I'm not sure about your wanting to use it on your custom.css file. The file itself will work just as well if you keep it in your app/assets/stylesheets folder, which will concatenate it to the asset pipeline
Bower-Rails
You'll may wish to consider using bower-rails, which seems to just give you the ability to use bower within your Rails app. This seems to be specifically for helping you keep your dependencies up to date:
Dependency file is bower.json in Rails root dir or Bowerfile if you
use DSL. Check out changelog for the latest changes and releases.
RailsAssets
Another amazing piece of functionality we found recently is "RailsAssets"
This works really well (we use it in production), as it keeps your dependent assets completely up to date. You can use it very simply:
#Gemfile
source https://rails-assets.org
gem 'rails-assets-BOWER_PACKAGE_NAME'
#app/assets/javascripts/application.js
//= require BOWER_PACKAGE_NAME
When running bundle update, this will then give you the ability to update your assets in line with your app!

How to include Susy sass framework with Web Essentials

I tried to make simple web solution - a hello world solution - with the susy responsive toolkit. The instructions on the susy docs say to pull the sass folder in, but the sass doesn't seem to compile.
It is possible to get susy 2.2 to work in VS w/ web essentials?
I'm using VS2013 update 3 with web essentials.
I'd really appreciate it if somebody could upload a 'hello world' working solution. And so would this guy.
Additional Info for non-VS users:
Web essentials usually 'compiles' sass into css files.
Web essentials also has a menu option to compile the sass.
Once I uncomment the import statement, the sass no longer compiles or refreshes. No error message is shown. I'm pretty sure this is a web essentials plugin or web essentials dependancy problem.
At this time, VS web exetensions probably uses a sass compiler does does not meet the susy2.1's sass 3.3+ requirement.
The sass folder in the susy2.1 project compiles okay when compiled with koala - which supports sass version 3.3.7 as of writing.
As of now there is an issue with libSass and #import not working as expected. The author notes it here and links to libSass issues here

What does a successful Compass/Sass install look like?

Long time lurker, first time poster.
I am moving from LESS to Sass, and would also like to begin using Compass on a few projects. I am using CodeKit to watch and initiate new Compass based projects, but I have also tried this from the command line with the same result. My question boils dow to this:
Creating a new compass project with "compass create [project-name]" builds out the basic structure for a Compass project, along with a config.rb file and three .scss files (screen.scss, print.scss, and ie.scss).
But why isn't the project pre-populated with the latest core Compass .scss files, helpers, etc? Am I wrong to expect a payload of core Compass files (Such as these: http://compass-style.org/reference/compass/) to show up in my project?
I can find them if I drill down to say, /usr/local/Cellar/ruby/1.9.3-p194/lib/ruby/gems/1.9.1... , but these are global and for all projects, not for customizing on a per project basis.
I feel like I'm missing a starter kit of .scss files with a default set of variables. Or that I am otherwise getting off on the wrong foot with how new projects are being initiated with Compass.
Compass is envirment for project. There is no need for it to be in your project dir. You can update it any time. You can use compass watch or sass with compass as lib. All you need is your project and config for compass. It's better way than have it in all projects especially if you have control version in project. In my way I just writing minimal deps files and that's all.
Starter kit creates in sass folder by default. So you don't missing nothing. But there is a clean files. All other stuff you should do like you want or try skeletons from github for example.

Resources