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.
Related
I have been searching all over for information on where django-cms is storing the CSS and SCSS data for my site, which I am working on localhost. When I go to edit the CSS file directly, it has no effect, so I'm wondering what needs to be done to edit those CSS files. Obviously they have been loaded somewhere. How can they be reloaded, or in general what is the best practice for editing the CSS files?
Apparently I had to do this with both the style.scss and style.css files, which seem to have the same css classes. But even after editing both files, I had to refresh the site on my localhost a few times before I could see the changes. Frustrating, but it does work to edit the files directly in the static folder.
#Lawrence DeSouza At first you should mention which plugins and style frameworks you use.
If you are using some sort of a frontend framework like Bootstrap 4 your should compile its css from scss separately. You can do it right on the dev server in a separate directory outside your project dir and cloned from the official repository. Normally you would only need to change variables in "/bootstrap-4.x.y/scss/_variables.scss" file. On the next step you would compile your *.css files with "npm run dist" command and then copy compiled files from "/bootstrap-4.x.y/dist" directory to your "/projectname/appname/static/css" directory. The process is well-documented here. After copying changed files to your "static" folder you should run "python manage.py collectstatic" and refresh the page. If it's not working after refreshing the page in a browser (normally it should work) - restart the server. I am a bit biased towards Bootstrap, but the logic should be the same in your case.
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.
in my project I have multiple sites that share common SASS files. Some of them implement their own, custom rules (in _custom.scss); others don't. So for some of the sites there is no _custom.scss file (but it is imported in common SASS anyway). To avoid putting empty _custom.scss files in each local SASS folder I created an extension in compass (like it was suggested here How to import scss file in compass only if it exists?).
But there is problem: the compiled CSS goes into css/extension_name/stylesheets folder. I want it to go into css/ folder.
I have my css_dir set to "css" but still the compiled CSS goes into css/extension_name/stylesheets. I could move the file each time but I don't think it's a good practice.
Can somebody suggest some solutions? Any help would be appreciated.
What is the easiest way to do this?
I have a simple one page Boostrap website with a less folder and a css folder.
I have no way of making changes to the .less files and having them compile as a .css file in the css folder.
I have tried instructions on Grunt.js via Boostrap, which compiles everything to a dist folder inside node_modules but I don't want to include the entire build system when I publish my website. And I don't want to have to manually copy and paste the css folder from the build system.
I tried the instructions on Less and had no idea which files were where. In the past I used Compass but it only works with Sass.
I feel like this should be really easy, anything that I'm overlooking?
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)