Grow your CSS skills. Land your dream job.

Codekit CSS minification

  • # February 21, 2013 at 4:48 pm

    Ya, I’m late in the party…

    I am going to get started on using CSS preprocessing in my next project(s) and would like to know if there is a way to get Codekit to minify plain-ol CSS files for a project which I’m already 1/2 done.

    I’d rather not get into preprocessing unless I’m starting something new, but would like to minify some things if possible.

    Also, when I set the suffix of JS files (-ck changed to -min), the files still compress with -ck.
    I’ve closed the app and restarted, removed the project and re-added it, still same suffix. Am I missing something?

    # February 21, 2013 at 6:43 pm

    I haven’t tried making codekit do that, but keep in mind – starting into something like less or scss is super-easy because valid CSS IS valid syntax for those languages.

    Just create a less (or scss) file, copy your existing css over, point Codekit at it and let it do its thing. You can learn the pre-processor at your own speed, as your project allows.

    # February 21, 2013 at 6:44 pm

    I don’t use codekit since I’m on Windows, but you should be able to go in your project configuration and adjust the Output Mode to Compressed

    # February 21, 2013 at 7:48 pm

    > to minify plain-ol CSS files for a project which I’m already 1/2 done.

    Why not complete the project and then minify all of your assets for production. Unless you are ready to deploy, I don’t see any reason for minifying anything.

    But I’m sure if you dig around Codekit you will find compression settings for CSS. Maybe someone with experience with Codekit can chime in. I’m on Linux.

    # February 22, 2013 at 9:15 am

    @sloveland: indeed!! I think that’s a good way to go about it.

    Thanks for the help guys!

    # February 22, 2013 at 9:24 am

    Glad we could help. =)

    # February 22, 2013 at 4:32 pm

    Another question regarding codekit:
    I have a little jquery/css “plugin” that I’d like to use on this project. Normally, I’d copy the folder to the project and include/link whatever I needed to in the php page in the of the document as per usual.

    I’d like to convert the plugin’s CSS to SCSS so I can minify and perhaps use compass along with it to make my stylesheet more readable. However, when I compile the SCSS file that is not located where compass thinks it should be (not in the main scss folder, it’s located along with the other tidbits I use for this little plugin thingy), I get the old “You must compile individual stylesheets from the project directory.” error.

    I assume it’s because compass thinks that all my css and scss files should be in a single folder rather than in bits and pieces throughout the site.

    How do you tackle this? Do I need to rethink how I work with things a bit?

    # February 22, 2013 at 5:31 pm

    Take a look at [320andup scss-compass files](https://github.com/malarkey/320andup/tree/master/scss-compass).

    See how “320andup-scss-compass.scss” file imports all the stylesheets into one file.

    This way you can organize your code.

    If you need to move CSS code into SCSS just simply create new file “mycoolfile.scss” and copy the CSS as is, or rewrite it so that is represented in SCSS format. Then just compile the file.

    Edit:

    >I assume it’s because compass thinks that all my css and scss files should be in a single folder rather than in bits and pieces throughout the site.

    You should keep all of your files in appropriate folders. If you try to modify some code 6 months from now, will you remember where the file is located? If you develop solid structure to the way you organize files; will only make your coding experience easier.

    # February 23, 2013 at 3:54 pm

    This bit of CSS/SCSS is needed for one/two pages tops, same with the javascript that goes along with it. So importing it into the main scss file isn’t really a great idea (although the size tradeoff in this particular instance is tiny indeed).

    I have a few little ‘plugins’ that include JS, CSS/SCSS/etc, images, and maybe other small pieces (PHP code for ajax requests perhaps) to make the plugins work as needed. How do you easily manage small little plugins that require multiple files and filetypes that are not used in every page?? Also, so they are easily used on other projects?

    I have setup folders to just copy and include them into projects, but now that I am minifying things and codekit expects my scss files to be within a certain folder, I’m not sure what to do.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".