Menu icon Foundation

Designer

My Posts





My Comments

Michael commented on Michael's post over 4 years

Right, I've solved it at last. I am just posting back here in case anyone else has the same problem.

Once I started reading up on Bootstrap (in the mistaken belief that it did something special that Foundation didn't) I inadvertently came across a thread on Stack Exchange that led me eventually to these pages, amongst other similar pages:

http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/

The answer to this problem is therefore to use the percentage padding 'trick'. After some reading, plus a bit of fiddling about, I ended up adding the following CSS to my app.scss file (and applying the 'tg' class to the block grid's 'ul' tag), and it did exactly what I wanted it to. Here is the CSS:

.tg li a
{
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 75% 0 0 0;
  overflow: hidden;
  background: #303030;
  border-radius: 0.275em;
  -webkit-border-radius: 0.275em;
  -moz-border-radius: 0.275em;  
}

.tg img
{
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0.7em 0.7em 0.7em 0.7em;
}


For my thumbnail images (800 x 600) the aspect ratio is 4:3, so that necessitated the 75% padding value above. The formula for calculating the padding value is as follows (I copied it from one of the articles linked above):

B / (A / 100) = C%

Which means that, for example, for 16:9 (where 16 is A and 9 is B) you get:

9 / .16 = 56.25 (%)

And here are some other padding values for other aspect ratios:

75% = 4:3 (e.g. 800 x 600 - the one I used)
66.66% = 3:2
62.5% = 8:5

Below is the HTML for my block grid, which includes a few different aspect ratio thumbnail images, to test its behaviour.

<ul class="tg small-block-grid-2 medium-block-grid-3 large-block-grid-4">

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/600x800" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x200" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x800" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/600x800" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                    </ul>


I hope that this is of some help to other beginners as I spent nearly four days on this, and I only found the answer by accident when I had given up and started looking at Bootstrap.

Michael commented on Michael's post over 4 years

I have given up with the flexbox grid as I couldn't get it to do what I thought I could get it to do.

I'm now trying to do it with standard divs that use the Foundation grid, rather than block grid, and I just can't get it to work. As soon as I add a thumbnail of a different aspect ratio that is taller than the 3:2 standard thumbnails it messes up the layout, as in my second example image in the original post above.

I tried limiting the height of the thumbnail image, which works until I try to re-size the browser window, then the layout goes all over the place. I have also tried setting a maximum height for the image, but that messes up the grid as soon as I try to re-size the browser window.

I have also tried adding divs around the images and applying those classes to the image that way. I have tried creating a panel around the image, but nothing works. This is getting ridiculous as I have spent over three whole days on this now.

EDIT: I have given up with this damned thing for now. It appears that Bootstrap can do what I need, so I'm going to look into using Bootstrap and Foundation together, unless it turns out that Foundation has the relevant equivalent functions - and I'll start a new thread for that subject.

Michael commented on Michael's post over 4 years

Hello and thanks for your reply.

I can see that it works perfectly well for bare thumbnails with the block grid, but I am trying to do this with a container around the thumbnail images so that the container is always the same size, then within those containers I can place thumbnail images of different aspect ratios (as shown in my example image above).

The desired behaviour that I am looking for is that the unused space around the thumbnail (of whatever aspect ratio I have placed into the container cell) is then filled with a background colour.

I made an image to explain as far as I got with this using the block grid before I gave up on it. I have added it to my original post above.

Michael commented on Michael's post over 4 years

Thank you. I'm not entirely sure what that means, but I presume it applies to the 'Set the message text' section at the end of the script. I'll experiment with that and see what happens.

Incidentally, the intermediate version of jQuery that I tried, which nearly worked, was version 1.11.1. That was the one that returned a whole load of php code and inserted it into the error/success div, rather than just the success message.

Thanks again for your help.

Michael commented on Michael's post over 4 years

This is the script that I am using for my contact form:

 $(function() {

  // Get the form.
  var form = $('#ajax-contact');

  // Get the messages div.
  var formMessages = $('#form-messages');

  // Set up an event listener for the contact form.
  $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData
    })
    .done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message text.
      $(formMessages).text(response);

      // Clear the form.
      $('#name').val('');
      $('#email').val('');
      $('#message').val('');
    })
    .fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      // Set the message text.
      if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
      } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
      }
    });

  });

});

Michael commented on Michael's post over 4 years

Hello, and thank you both for your replies.

The problem I was having with my contact form was that with 2.1.1 the error and success messages wouldn't display in their dedicated div (everything else worked, such as sending e-mails). I saw a similar problem reported on a WordPress forum and they said they solved it by using an earlier version of jQuery. I tried a slightly earlier version and it nearly worked - this time it actually used the error and success div, but inserted the whole of the php code into it instead. So, I tried version 1.10.1 and my contact form then worked perfectly.

I have no idea why it worked that way, but it would be nice to find out where the problem occurred and fix it so that my contact form works with 2.1.1. I presume it is something in the script for my contact form that pre-dates 2.1.1, but I have absolutely no idea whatsoever how to even approach looking into this!

I'm very much a beginner with all this, but I was wondering if it would be possible to make only my contact form use 1.10.1, then let everything else use Foundation 5's 2.1.1. Is that what a no-conflict loading is for? I can't see what actually makes my contact form use a particular version of jQuery. It has this to identify it:

<form id="ajax-contact" method="post" action="mailer.php">

Then in my app.js file I have the form's code, which I think identifies itself with this line:

 var form = $('#ajax-contact');

I'm not sure how it decides where to find the jQuery file though. My earlier (successfully working) version of jQuery 1.10.1 is directly above my contact form script, in app.js. I presume this overrides 2.1.1 otherwise my contact form wouldn't work.

As it happens, I don't think that there are any problems using 1.10.1, judging by David's jQuery test page, but it would be nice to use 2.1.1 as intended for Foundation 5.

Michael commented on Michael's post almost 5 years

UPDATE: I've got it working! I'm just posting here in case this is of help to anyone else.

Having replaced my version 2.1.1 jQuery file that didn't work, with version 1.11.2 that nearly worked (see post above), I thought I would try an even earlier version. I found a copy of version 1.10.1 and pasted that into my app.js file, above my contact form, then tried the form, and the success message appeared correctly above my form.

So, it appears to be the version of jQuery in Foundation 5 that was causing the problem - or perhaps you could say that my contact form was causing a problem with the Foundation 5 jQuery file!

I presume that pasting the earlier version of jQuery into my app.js file is the correct way to do it. Is this simply overriding the later version that is still in my bower_components/jquery/dist folder? Is this earlier version likely to cause problems anywhere else in Foundation? I can't see anything else on my pages malfunctioning with this version 1.10.1.

Michael commented on Pete Clark's post almost 5 years

I recommend watching James Stone's videos on YouTube as they are very helpful and he explains things very well.

This video here (particularly from about 1:22 onwards) will explain what I was going on about above, with regard to working with the '_settings.scss' and 'app.scss' files: https://www.youtube.com/watch?v=Gx-9cgNlZlQ

Michael commented on Pete Clark's post almost 5 years

The '_settings.scss' file and the 'app.scss' file are compiled to create your website's CSS file. When you make changes in your '_settings.scss' file, always copy and paste the line you want to change (which is commented out by default), then un-comment your copy and change its value. Doing it this way will always allow you to restore the original line if you need to.

If you need to create any custom CSS, you need to put that in the 'app.scss' file, underneath the foundation components list. If you edit the CSS anywhere else, it will be overwritten every time you save. The compiling action therefore overwrites everything 'downstream' of your '_settings.scss' and 'app.scss' file.

You can set up WampServer on your computer to create a local server for testing your website. I am using WampServer 2.5. I haven't been using it to view web pages, as I just do that by previewing my HTML page in the browser, but I have been using WampServer to test my contact page script (which doesn't work properly yet!).

Just in case you ever need to test a contact form, I was able to do this by using WampServer along with a program called Test Mail Server Tool, which simply creates somewhere (locally, on your computer) to receive and display the e-mails you send from your contact page. It worked perfectly for me simply by installing it and doing nothing else.

Michael commented on Pete Clark's post almost 5 years

I don't know if I'm going to be any help here, but I recently installed Foundation 5 and got SCSS working (as a complete novice), and it wasn't quite straight forward. Perhaps some of the below will be of some help:

I started at the page you mentioned above, and worked through downloading the programs, and ended up with the following versions (I'm using Windows 7):

Git 1.9.4
Node 0.10.33
Ruby 1.9.3

Where I got stuck was that when I got to the 'gem install foundation' part, the 'gem' command wasn't being recognized. After much searching online it turned out that I had to tick a specific box when installing Ruby. When installing Ruby, the tick box in question is on the second screen titled 'Installation Destination and Optional Tasks', and it is the middle option that reads 'Add Ruby executables to your path'. I needed to uninstall Ruby and run it through again, this time ticking that middle option, and that got me one stage further.

Thereafter, when running the install command from the command line, it kept repeatedly coming up with errors telling me to check that a specific component was installed. Every time it did this I simply ran the install command again, and it indicated that it was installing something. Eventually, after five or six cycles of those goings-on, it finally had everything it needed, and completed the 'gem install foundation' task.

I had the same problem with it not recognizing the 'bundle' command. It was then a case of doing the same again (as above) until it would install something and finally accept the 'bundle exec compass watch' command.

From there everything worked as expected, and I ended up with a project folder located where I wanted it to be (on my desktop), and it contained all the Foundation files.

So now, when I open my project (in Sublime Text 2), I open the '_settings.scss' and 'app.scss' files, then open up a command line and navigate to my project folder using the 'cd' command (in my case my project folder is on my desktop). Once I'm in my project folder I type 'bundle exec compass watch', which returns a line telling me that Compass is watching for changes. I then test that it's working by making a change (any change) to something in the '_settings.scss' file, then saving it. I then look back at the command line window, and it has returned a load of data (including deprecation warnings), ending with the line 'write stylesheets app/css'. When it does that I know that it's working.

Apologies if this is no use, or indeed if it seems a bit vague, but I thought it might at least be of some help if you run into any similar problems.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Michael's post over 4 years

Right, I've solved it at last. I am just posting back here in case anyone else has the same problem.

Once I started reading up on Bootstrap (in the mistaken belief that it did something special that Foundation didn't) I inadvertently came across a thread on Stack Exchange that led me eventually to these pages, amongst other similar pages:

http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/

The answer to this problem is therefore to use the percentage padding 'trick'. After some reading, plus a bit of fiddling about, I ended up adding the following CSS to my app.scss file (and applying the 'tg' class to the block grid's 'ul' tag), and it did exactly what I wanted it to. Here is the CSS:

.tg li a
{
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 75% 0 0 0;
  overflow: hidden;
  background: #303030;
  border-radius: 0.275em;
  -webkit-border-radius: 0.275em;
  -moz-border-radius: 0.275em;  
}

.tg img
{
  position: absolute;
  display: block;
  max-width: 100%;
  max-height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0.7em 0.7em 0.7em 0.7em;
}


For my thumbnail images (800 x 600) the aspect ratio is 4:3, so that necessitated the 75% padding value above. The formula for calculating the padding value is as follows (I copied it from one of the articles linked above):

B / (A / 100) = C%

Which means that, for example, for 16:9 (where 16 is A and 9 is B) you get:

9 / .16 = 56.25 (%)

And here are some other padding values for other aspect ratios:

75% = 4:3 (e.g. 800 x 600 - the one I used)
66.66% = 3:2
62.5% = 8:5

Below is the HTML for my block grid, which includes a few different aspect ratio thumbnail images, to test its behaviour.

<ul class="tg small-block-grid-2 medium-block-grid-3 large-block-grid-4">

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/600x800" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x200" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x800" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/600x800" alt=""></a>
                      </li>

                      <li><a href="#">
                        <img src="http://placehold.it/800x600" alt=""></a>
                      </li>

                    </ul>


I hope that this is of some help to other beginners as I spent nearly four days on this, and I only found the answer by accident when I had given up and started looking at Bootstrap.

You commented on Michael's post over 4 years

I have given up with the flexbox grid as I couldn't get it to do what I thought I could get it to do.

I'm now trying to do it with standard divs that use the Foundation grid, rather than block grid, and I just can't get it to work. As soon as I add a thumbnail of a different aspect ratio that is taller than the 3:2 standard thumbnails it messes up the layout, as in my second example image in the original post above.

I tried limiting the height of the thumbnail image, which works until I try to re-size the browser window, then the layout goes all over the place. I have also tried setting a maximum height for the image, but that messes up the grid as soon as I try to re-size the browser window.

I have also tried adding divs around the images and applying those classes to the image that way. I have tried creating a panel around the image, but nothing works. This is getting ridiculous as I have spent over three whole days on this now.

EDIT: I have given up with this damned thing for now. It appears that Bootstrap can do what I need, so I'm going to look into using Bootstrap and Foundation together, unless it turns out that Foundation has the relevant equivalent functions - and I'll start a new thread for that subject.

You commented on Michael's post over 4 years

Hello and thanks for your reply.

I can see that it works perfectly well for bare thumbnails with the block grid, but I am trying to do this with a container around the thumbnail images so that the container is always the same size, then within those containers I can place thumbnail images of different aspect ratios (as shown in my example image above).

The desired behaviour that I am looking for is that the unused space around the thumbnail (of whatever aspect ratio I have placed into the container cell) is then filled with a background colour.

I made an image to explain as far as I got with this using the block grid before I gave up on it. I have added it to my original post above.

You commented on Michael's post over 4 years

Thank you. I'm not entirely sure what that means, but I presume it applies to the 'Set the message text' section at the end of the script. I'll experiment with that and see what happens.

Incidentally, the intermediate version of jQuery that I tried, which nearly worked, was version 1.11.1. That was the one that returned a whole load of php code and inserted it into the error/success div, rather than just the success message.

Thanks again for your help.

You commented on Michael's post over 4 years

This is the script that I am using for my contact form:

 $(function() {

  // Get the form.
  var form = $('#ajax-contact');

  // Get the messages div.
  var formMessages = $('#form-messages');

  // Set up an event listener for the contact form.
  $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      data: formData
    })
    .done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message text.
      $(formMessages).text(response);

      // Clear the form.
      $('#name').val('');
      $('#email').val('');
      $('#message').val('');
    })
    .fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      // Set the message text.
      if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
      } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
      }
    });

  });

});

You commented on Michael's post over 4 years

Hello, and thank you both for your replies.

The problem I was having with my contact form was that with 2.1.1 the error and success messages wouldn't display in their dedicated div (everything else worked, such as sending e-mails). I saw a similar problem reported on a WordPress forum and they said they solved it by using an earlier version of jQuery. I tried a slightly earlier version and it nearly worked - this time it actually used the error and success div, but inserted the whole of the php code into it instead. So, I tried version 1.10.1 and my contact form then worked perfectly.

I have no idea why it worked that way, but it would be nice to find out where the problem occurred and fix it so that my contact form works with 2.1.1. I presume it is something in the script for my contact form that pre-dates 2.1.1, but I have absolutely no idea whatsoever how to even approach looking into this!

I'm very much a beginner with all this, but I was wondering if it would be possible to make only my contact form use 1.10.1, then let everything else use Foundation 5's 2.1.1. Is that what a no-conflict loading is for? I can't see what actually makes my contact form use a particular version of jQuery. It has this to identify it:

<form id="ajax-contact" method="post" action="mailer.php">

Then in my app.js file I have the form's code, which I think identifies itself with this line:

 var form = $('#ajax-contact');

I'm not sure how it decides where to find the jQuery file though. My earlier (successfully working) version of jQuery 1.10.1 is directly above my contact form script, in app.js. I presume this overrides 2.1.1 otherwise my contact form wouldn't work.

As it happens, I don't think that there are any problems using 1.10.1, judging by David's jQuery test page, but it would be nice to use 2.1.1 as intended for Foundation 5.

You commented on Michael's post almost 5 years

UPDATE: I've got it working! I'm just posting here in case this is of help to anyone else.

Having replaced my version 2.1.1 jQuery file that didn't work, with version 1.11.2 that nearly worked (see post above), I thought I would try an even earlier version. I found a copy of version 1.10.1 and pasted that into my app.js file, above my contact form, then tried the form, and the success message appeared correctly above my form.

So, it appears to be the version of jQuery in Foundation 5 that was causing the problem - or perhaps you could say that my contact form was causing a problem with the Foundation 5 jQuery file!

I presume that pasting the earlier version of jQuery into my app.js file is the correct way to do it. Is this simply overriding the later version that is still in my bower_components/jquery/dist folder? Is this earlier version likely to cause problems anywhere else in Foundation? I can't see anything else on my pages malfunctioning with this version 1.10.1.

You commented on Pete Clark's post almost 5 years

I recommend watching James Stone's videos on YouTube as they are very helpful and he explains things very well.

This video here (particularly from about 1:22 onwards) will explain what I was going on about above, with regard to working with the '_settings.scss' and 'app.scss' files: https://www.youtube.com/watch?v=Gx-9cgNlZlQ

You commented on Pete Clark's post almost 5 years

The '_settings.scss' file and the 'app.scss' file are compiled to create your website's CSS file. When you make changes in your '_settings.scss' file, always copy and paste the line you want to change (which is commented out by default), then un-comment your copy and change its value. Doing it this way will always allow you to restore the original line if you need to.

If you need to create any custom CSS, you need to put that in the 'app.scss' file, underneath the foundation components list. If you edit the CSS anywhere else, it will be overwritten every time you save. The compiling action therefore overwrites everything 'downstream' of your '_settings.scss' and 'app.scss' file.

You can set up WampServer on your computer to create a local server for testing your website. I am using WampServer 2.5. I haven't been using it to view web pages, as I just do that by previewing my HTML page in the browser, but I have been using WampServer to test my contact page script (which doesn't work properly yet!).

Just in case you ever need to test a contact form, I was able to do this by using WampServer along with a program called Test Mail Server Tool, which simply creates somewhere (locally, on your computer) to receive and display the e-mails you send from your contact page. It worked perfectly for me simply by installing it and doing nothing else.

You commented on Pete Clark's post almost 5 years

I don't know if I'm going to be any help here, but I recently installed Foundation 5 and got SCSS working (as a complete novice), and it wasn't quite straight forward. Perhaps some of the below will be of some help:

I started at the page you mentioned above, and worked through downloading the programs, and ended up with the following versions (I'm using Windows 7):

Git 1.9.4
Node 0.10.33
Ruby 1.9.3

Where I got stuck was that when I got to the 'gem install foundation' part, the 'gem' command wasn't being recognized. After much searching online it turned out that I had to tick a specific box when installing Ruby. When installing Ruby, the tick box in question is on the second screen titled 'Installation Destination and Optional Tasks', and it is the middle option that reads 'Add Ruby executables to your path'. I needed to uninstall Ruby and run it through again, this time ticking that middle option, and that got me one stage further.

Thereafter, when running the install command from the command line, it kept repeatedly coming up with errors telling me to check that a specific component was installed. Every time it did this I simply ran the install command again, and it indicated that it was installing something. Eventually, after five or six cycles of those goings-on, it finally had everything it needed, and completed the 'gem install foundation' task.

I had the same problem with it not recognizing the 'bundle' command. It was then a case of doing the same again (as above) until it would install something and finally accept the 'bundle exec compass watch' command.

From there everything worked as expected, and I ended up with a project folder located where I wanted it to be (on my desktop), and it contained all the Foundation files.

So now, when I open my project (in Sublime Text 2), I open the '_settings.scss' and 'app.scss' files, then open up a command line and navigate to my project folder using the 'cd' command (in my case my project folder is on my desktop). Once I'm in my project folder I type 'bundle exec compass watch', which returns a line telling me that Compass is watching for changes. I then test that it's working by making a change (any change) to something in the '_settings.scss' file, then saving it. I then look back at the command line window, and it has returned a load of data (including deprecation warnings), ending with the line 'write stylesheets app/css'. When it does that I know that it's working.

Apologies if this is no use, or indeed if it seems a bit vague, but I thought it might at least be of some help if you run into any similar problems.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content