Sass Version

If you’re using the Sass version of the theme, I’m going to assume you know how to install a WordPress theme. If you need a quick reminder, check out the JointsWP-CSS install instructions – the installation process is the same.

Sass File Structure Overview

All of the Sass files can be found in the assets/sass directory. The theme enqueues the assets/css/styles.min.css file for styles.

The Foundation files are imported from the vendor directory, but don’t make changes to those files, as they will be overwritten if you ever update Foundation.

  • AyeZee

    Found the answer…thanks

    • Jeremy Englert

      @disqus_JvBoJ8S5UY:disqus, sorry for my slow reply. You should be able to use any tool you want, including Compass, to compile the Sass files. I recommend trying Gulp, but many people also use Compass or CodeKit.

  • Ducky

    Hi Jeremy – thanks for the super quick creation of this theme! Excited to use it. I think I might just be forgetting something, but I’m hoping you can point me in the right direction. When I update one of the scss style sheets, my files compile (using Codekit) but I’m not sure how to get it to overwrite the style.min.css file you have enqueued. What step am I missing here? I’ve been looking through your documentation and don’t see what I’m missing. Thanks in advance for your help.

  • Ryan Patterson

    Hi Jeremy, I’ve used the css version of JointsWP for a couple years now and love it. I just recently installed Codekit and are wanting to work with the SASS version.

    *Note – I’m using Codekit because I can’t for the life of me get the environment setup via terminal. I’ve tried compass and libsass, but keep getting errors.

    The documentation keeps referring to the Assets/sass directory, but I don’t have the sass directory in my Assets folder, just CSS, functions, images, js, scss and translation.

    I assumed that I would be adding my customizations to the _main.scss file in Assets/scss. However, no matter what file I change in the scss folder, the changes don’t take effect. Codekit tells me the file has been updated, but I don’t see the changes on the front-end. I’m starting small, just trying to change the value of the $primary-color variable.

    Sorry, I know I’m a noob with SASS so are probably making a really dumb mistake. Can you just let me know what scss file I can edit/add custom styles to?

    • Jeremy Englert

      Hi Ryan, so it sounds like your Sass files are missing? Can you double check that you downloaded the Sass version of the theme? The folder directory should look like this: https://github.com/JeremyEnglert/JointsWP/tree/master/assets

      And CodeKit is an awesome tool. I’ll be doing some CodeKit testing and potentially putting together a quick video on using CodeKit with JointsWP this weekend.

      • Ryan Patterson

        Hi Jeremy,

        Thanks for the speedy reply!

        I downloaded the SASS version from the website but I’ll try getting directly from github.

        The weird thing is the changes I made to the _settings.scss and _main.scss in the assets/scss folder are showing up in the compiled css file (assets/css/style.css) but aren’t showing when I view the site.

        That would be awesome if you could better explain how to use codekit with JointsWP.

        Thanks again for your help, and great work with JointsWP! It’s by far my favorite base/starter theme. Up until now, I have used the css version for every site I have built in the last 2 years.

        • Steven Persoons

          Same problem here, tried everything the last 12 hours, but no result. Top theme Jeremy

          • Ryan Patterson

            Steven,

            This is probably the wrong way to do this, but a fix for me was changing the css file being enqueued to use the non minified version. So if you go to enqueue-scripts.php and change the style.min.css to just style.css the changes will take effect on the front-end.

            I’m sure Jeremy will have a better solution.

          • Jeremy Englert

            This is the best fix for now. I’ll be playing with CodeKit this weekend to try to come up with something better.

          • Dave Loneragan

            +1 for some CodeKit setup instructions or a config file.

          • Jeremy Englert

            CodeKit config file is now included.

          • http://beardsavvy.ca Joshua M

            Even with the config file, CodeKit doesn’t pick up installed components. It’s a fresh install, and I’ve tried forcing a refresh using ‘Determine installed components’. Any other CodeKit users that can point me in the right direction?

          • Jeremy Englert

            Ahhh. I see, you’re trying to get CodeKit to work with the Bower_Components – correct?

          • Jeremy Englert

            So the issue is that CodeKit ONLY looks for a bower_components folder.

            So here’s what you’ll need to do to use Bower with CodeKit:

            1. Install the theme like you normally would.
            2. Using the command line/terminal, navigate to your theme
            3. Run “bower update” – this will create a bower_components folder for you.

            You will now be able to see your bower_components inside of CodeKit.

            However, please note, the theme enqueues the files from the asset/ directory. So you will need to manually move your files from “bower_components” to “assets”.

            Or just use Gulp and it’s all automatically done for you. 🙂

          • Steven Persoons

            thx, man

          • Jeremy Englert

            Essentially, CodeKit is compiling the Sass to assets/css/style.css – however, the theme is calling assets/css/style.min.css.

            For now, the best bet would be to go into enqueue-scripts.php and call the non-minified styles.

          • Steven Persoons

            thx

        • Jeremy Englert

          Ahhhhhhhhh. I think I understand what is going on now.

          Essentially, CodeKit is compiling the Sass to assets/css/style.css – however, the theme is calling assets/css/style.min.css.

          For now, the best bet would be to go into enqueue-scripts.php and call the non-minified styles.

          I’m going to play with CodeKit this weekend and add a preconfigured CodeKit file to the theme.

      • Ash

        Sounds good. Is there any chance of including a default config.codekit maybe? I seem to think I based my F5 config file from a JointsWP version previously? PS do you have a PayPal account for donations if I don’t want to use DonorBox? Cheers

        • Jeremy Englert

          That’s a great idea! Let me work on that this weekend.

          Unfortunately, I don’t have a PayPal account – but I do have a Stripe account: jeremy@theadgarage.com

          Sidenote: Is there a reason you don’t like DonorBox? I just want to make sure I’m not using a tool that is scaring users away.

          • Ash

            Great, I’ll keep an eye on how that goes.

            No probs…main reason is just because I prefer to avoid entering card details where I can.

            I’m planning to use JointsWP on a few projects over the next week or 2 so I will ping you over a donation. 🙂

  • http://www.cfx-inc.com Brian Gomski

    The new JointsWp running on Foundation 6 is compiling the style.css correctly but not compiling or updating the style.min.css file. I tried the Coda 2 compiler as well as Hammer compiler. Any suggestions?

    • Jeremy Englert

      Hi Brian, you’ll most likely have to setup your compiler to create a minified file as well – I don’t think all compilers to that by default.

      However, I have switched the theme up a bit so it now enqueues the non-minified styles. This should fix the issue for users who are using a compiler that doesn’t automatically make a minified file.

      PS – Have you checked out Gulp? It’s awesome when used with JointsWP.

  • Jack Fearing

    Reveal issue: Hi Jeremy, it looks like reveal is having some issues when using the modal box on iPhone. The modal box opens however the overlay seems to be on top of the modal box. This also might be an issue with foundations css files as well but I thought I ask you to see if your getting the same thing… BTW I used tested on your DEMO site using an iPhone.

    • Jeremy Englert

      Hi Jack,

      From my understanding, this is an issue with Foundation and should be fixed in an upcoming release.

      • Jack Fearing

        Thanks Jeremy…. BTW are you planning on updating your theme foundation js to 6.0.5?

        • Jeremy Englert

          6.0.5 has a few bugs I’m hoping to avoid. 6.0.6 should be available this week – I’ll be updating to that for sure.

          • Jack Fearing

            Excellent — thanks again.