Menu icon Foundation

My Posts









  • NEW
  • Foundation Build left out some css

    By Siavoush

    cssscssfoundation cli

    Hi,  This is strange, but I noticed that after I used foundation build in cmd there was some css that did not get converted to the final version which I had to add manually after. This hasn't happened before, so I am looking to see if this is a know... (continued)



My Comments

Siavoush commented on Siavoush's post 2 months

bump

Siavoush commented on Siavoush's post over 1 year

Could you tell me how you fixed it ?

Siavoush commented on Siavoush's post over 1 year

Yes that did the trick, it wasn't clear in the docs, thanks for the help

Siavoush commented on Siavoush's post over 1 year

I have foundation CLI version 2.1.0.
another thing that was strange was that putting a background color on the container doesn't render
I also have attached the image, 

 

Siavoush commented on Siavoush's post over 1 year

Snig, that is perfect, thank you 

Siavoush commented on Amelia Banks's post almost 2 years

There is a youtube video which is helpful but it's with an older version of Foundation,
https://www.youtube.com/watch?v=-ssTbEGu22k

alternatively you could use a foundation skeleton themes such as FoundationPress or JointsWp

Siavoush commented on Siavoush's post almost 2 years

I had a look at that and it is good to begin with but I was hoping more for documentation on how foundation features interact with WordPress, I currently I have my own sass stylesheet which I am using to override the default styles, Is there a more efficient way of customizing foundationPress?

Siavoush commented on Siavoush's post almost 2 years

I found the issue, it was this this piece of code for the gallery plugin

   <script>
    var elem = document.querySelector('.m-p-g');
    document.addEventListener('DOMContentLoaded', function () {

      var gallery = new MaterialPhotoGallery(elem);
    });
  </script>

Siavoush commented on Siavoush's post almost 2 years

this is my entire index.html page, is there anything wrong?


<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bedford Court Mansions, WC1</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/app.css" />
  <link rel="stylesheet" href="material-photo-gallery-master/dist/css/material-photo-gallery.css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <header id="first" data-magellan-target="first">
    <div class="row logo">
      <div class="large-12 columns">
        <img src="img/hsc.png" alt="Logo">
      </div>
    </div>

    <nav>
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Bedford Court Mansions, WC1</div>
      </div>

      <div class="top-bar" id="main-menu">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Bedford Court Mansions, WC1</li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="menu vertical medium-horizontal nav" data-responsive-menu="drilldown medium-dropdown" data-magellan>
            <li><a href="#">Home</a></li>
            <li><a href="http://localhost/sai-xampp/PDO-test/minisite/sales.php">Sales</a></li>
            <li><a href="http://localhost/sai-xampp/PDO-test/minisite/lettings.php">Lettings</a></li>
            <li><a href="#second">Gallery</a></li>
            <li><a href="#third">Location</a></li>
            <li><a href="#fourth">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <div class="row banner">
      <div class="large-12 column">
        <img src="img/banner.png" alt="Bedford Court Mansions Banner">
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered">
        <h2 class="heading">About</h2>
        <p class="content border">
          <br> Bedford Court Mansions along with the rest of Bedford Avenue was constructed in the 1890’s to replace the mews to the South Side of Bedford Square. It comprised of family flats each containing five to twelve rooms, with a large central courtyard designed to assist with the lighting and ventilation with the idea to improve upon building standards that existed in London in the late 1800’s. Situated in the London Borough of Camden, and immediately south of Bedford Square in the heart of Bloomsbury, Bedford Court Mansions is ideally located for the superb amenities of the West End, Covent Garden, the heart of theatre land and Soho are just short stroll away.
          <br>
          <br> The nearest underground stations are Tottenham Court Road (Northern and Central Lines) and Goodge Street (Northern Line). There are numerous bus services that provide easy access across the City and West End. Just round the corner from Bedford Court Mansions is The British Museum, the first National Museum in the world, opened on the 15th January 1759, with its international exhibitions. A collection of seven million objects representing the rich history of human cultures mirrors the city of London's global variety. In no other museum can the visitor see so clearly the history of what it is to be human.
        </p>
      </div>
    </div>

    <div id="back-top" data-magellan>
      <a href="#first"><img src="img/up-arrow.png" alt=""></a>
    </div>

    <div class="row heading-row">
      <div class="large-8 column large-centered" id="second" data-magellan-target="second">
        <h2 class="heading">Gallery</h2>
        <div class="m-p-g border">
          <div class="m-p-g__thumbs" data-google-image-layout data-max-height="250">
            <img src="img/Gallery/01.jpg" data-full="img/Gallery/01.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/02.jpg" data-full="img/Gallery/02.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/03.jpg" data-full="img/Gallery/03.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/04.jpg" data-full="img/Gallery/04.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/05.jpg" data-full="img/Gallery/05.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/06.jpg" data-full="img/Gallery/06.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/07.jpg" data-full="img/Gallery/07.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/08.jpg" data-full="img/Gallery/08.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/09.jpg" data-full="img/Gallery/09.jpg" class="m-p-g__thumbs-img" />
          </div>

          <div class="m-p-g__fullscreen"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered" id="third" data-magellan-target="third">
        <h2 class="heading">Location</h2>
        <div class="border">
          <div id="map">
            <!--Map Location-->
          </div>
        </div>

      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered">
        <h2 class="heading">Area Information</h2>
        <div class="content border">
          <br>
          <h3>Sights</h3>
          <p>London has some of the most famous sights such as the Royal Observatory or the Science Museum and close to Bedfort Court Mansion in Bloomsbury you can view the famous Charles Dickens Museum or St Pancras Church at ease.</p>

          <h3>Attractions</h3>
          <p>London’s most famous attractions such as the London Eye, Tower Bridge and the Buckingham Palace are definitely the best places to visit when you have an off day from work but there are also some fantastic attractions close to Bedford Court Mansions such as the London Rib Voyages and abundance of theatres to delight you during the evenings.</p>

          <h3>Squares &amp; parks</h3>
          <p>There are quite a few beautiful green spaces in the heart of the city that includes guided winter walks in the Bloomsbury squares or you could go and visit London’s finest landscapes such as the Hyde Park or St. James’s Park.</p>

          <h3>Job Opportunities</h3>
          <p>There are thousands of job opportunities in Bloomsbury in a wide range of sectors such as the design, editorial, finance, marketing &amp; publicity, administrative, production and administrative sectors. There are a lot of entry level positions that require little former education and you can also find professional employment in institutions, hospitals and law firms that will accommodate just about any educational level.</p>

          <h3>Health</h3>
          <p>In Bloomsbury you can enjoy some of the best medical treatments and care and if you are interested in pursuing a career in the medical field then you should definitely consider the University College Hospital so you can also help shape the world to be a better and healthier place. The city has an abundance of medical institutions, hospitals and clinics that will provide you with excellent physical and dental care.</p>

          <h3>Transport</h3>
          <p>Bloomsbury is well served by tube and train, with underground stations at,</p>
          <ul>
            <li>Russell Square</li>
            <li>Holborn</li>
            <li>Tottenham Court Road</li>
            <li>Goodge Street</li>
          </ul>
          <p>Euston, King’s Cross/St Pancras and Liverpool Street mainline stations are all nearby.</p>

          <h3>Schools</h3>
          <p>Primary schools in the area include,</p>
          <ul>
            <li>St Joseph’s Primary School</li>
            <li>St George the Martyr Church of England Primary School</li>
          </ul>
          <p>Secondary schools range from the Children's Hospital School at Great Ormond Street and UCH (also a primary school) to The Royal Ballet School.</p>
        </div>
      </div>
    </div>

    <div class="row banner">
      <div class="large-12 column">
        <img src="img/bedroom-full.jpg" alt="Bedford Court Mansions Lounge Banner">
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered contact" id="fourth" data-magellan-target="fourth">
        <h3 class="heading">Do you live in Bedford Court Mansions?</h3>
        <p>To find out how much your property is worth, contact us below for a free valuation.</p>
        <h3><span class="contactSale">Sales</span> &amp; <span class="contactLet">Lettings</span></h3>
        <address>
          <a href="tel:020 7299 3322" class="link">020 7299 3322</a>
          <br>
          <a href="mailto:westend@h-s-c.co.uk?subject=I would like a free valuation" class="link">westend@h-s-c.co.uk</a>
        </address>
      </div>
    </div>
  </main>

  <footer>
    <div class="row">
      <div class="large-4 columns large-centered">
        <ul class="social-media-list">
          <li class="social-media-icon">
            <a href="https://www.facebook.com/" target="_blank">
              <img src="img/facebook.svg" alt="Facebook Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="https://twitter.com/" target="_blank">
              <img src="img/twitter.svg" alt="Twitter Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="https://www.youtube.com/user/" target="_blank">
              <img src="img/youtube.svg" alt="Youtube Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="" target="_blank">
              <img src="img/google.svg" alt="Google Plus Icon">
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="large-8 columns large-centered">
        <p class="text-center">copyright 2014 all rights reserved -</p>
        <img src="img/hsc.png" alt="Logo">
      </div>
    </div>
  </footer>

  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/vendor/what-input.min.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/app.js"></script>
  <script src="material-photo-gallery-master/dist/js/material-photo-gallery.js"></script>
  <script>
    var elem = document.querySelector('.m-p-g');
    document.addEventListener('DOMContentLoaded', function () {

      var gallery = new MaterialPhotoGallery(elem);
    });
  </script>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="js/google-ini.js"></script>
  <script src="js/scrollTop.js"></script>
</body>

</html>

Siavoush commented on Siavoush's post almost 2 years

Hi thank you for getting back, i am developing the site locally at the moment so I can't provide a link, I ran a few tests and found out that something in foundation.css is causing the issue, without it, the anchors work fine. @Rafi Benkual yes I am linking to a page that has magellan however i don't care about scrolling to it, as long as it loads the correct target section.

Also I found that it is not just one link, only the first anchor will work, any other anchor just goes straight to the bottom of my target page

edit
I downloaded a clean copy of foundation and tried linking to several sections on the default and the anchors work fine so it must be something In my html, I don't know what I've done wrong, I have linked a code pen with all my html
http://codepen.io/anon/pen/eJQNQR

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Siavoush's post 2 months

bump

You commented on Siavoush's post over 1 year

Could you tell me how you fixed it ?

You commented on Siavoush's post over 1 year

Yes that did the trick, it wasn't clear in the docs, thanks for the help

You commented on Siavoush's post over 1 year

I have foundation CLI version 2.1.0.
another thing that was strange was that putting a background color on the container doesn't render
I also have attached the image, 

 

You commented on Siavoush's post over 1 year

Snig, that is perfect, thank you 

You commented on Amelia Banks's post almost 2 years

There is a youtube video which is helpful but it's with an older version of Foundation,
https://www.youtube.com/watch?v=-ssTbEGu22k

alternatively you could use a foundation skeleton themes such as FoundationPress or JointsWp

You commented on Siavoush's post almost 2 years

I had a look at that and it is good to begin with but I was hoping more for documentation on how foundation features interact with WordPress, I currently I have my own sass stylesheet which I am using to override the default styles, Is there a more efficient way of customizing foundationPress?

You commented on Siavoush's post almost 2 years

I found the issue, it was this this piece of code for the gallery plugin

   <script>
    var elem = document.querySelector('.m-p-g');
    document.addEventListener('DOMContentLoaded', function () {

      var gallery = new MaterialPhotoGallery(elem);
    });
  </script>

You commented on Siavoush's post almost 2 years

this is my entire index.html page, is there anything wrong?


<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bedford Court Mansions, WC1</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/app.css" />
  <link rel="stylesheet" href="material-photo-gallery-master/dist/css/material-photo-gallery.css">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <header id="first" data-magellan-target="first">
    <div class="row logo">
      <div class="large-12 columns">
        <img src="img/hsc.png" alt="Logo">
      </div>
    </div>

    <nav>
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Bedford Court Mansions, WC1</div>
      </div>

      <div class="top-bar" id="main-menu">
        <div class="top-bar-left">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Bedford Court Mansions, WC1</li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="menu vertical medium-horizontal nav" data-responsive-menu="drilldown medium-dropdown" data-magellan>
            <li><a href="#">Home</a></li>
            <li><a href="http://localhost/sai-xampp/PDO-test/minisite/sales.php">Sales</a></li>
            <li><a href="http://localhost/sai-xampp/PDO-test/minisite/lettings.php">Lettings</a></li>
            <li><a href="#second">Gallery</a></li>
            <li><a href="#third">Location</a></li>
            <li><a href="#fourth">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <main>
    <div class="row banner">
      <div class="large-12 column">
        <img src="img/banner.png" alt="Bedford Court Mansions Banner">
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered">
        <h2 class="heading">About</h2>
        <p class="content border">
          <br> Bedford Court Mansions along with the rest of Bedford Avenue was constructed in the 1890’s to replace the mews to the South Side of Bedford Square. It comprised of family flats each containing five to twelve rooms, with a large central courtyard designed to assist with the lighting and ventilation with the idea to improve upon building standards that existed in London in the late 1800’s. Situated in the London Borough of Camden, and immediately south of Bedford Square in the heart of Bloomsbury, Bedford Court Mansions is ideally located for the superb amenities of the West End, Covent Garden, the heart of theatre land and Soho are just short stroll away.
          <br>
          <br> The nearest underground stations are Tottenham Court Road (Northern and Central Lines) and Goodge Street (Northern Line). There are numerous bus services that provide easy access across the City and West End. Just round the corner from Bedford Court Mansions is The British Museum, the first National Museum in the world, opened on the 15th January 1759, with its international exhibitions. A collection of seven million objects representing the rich history of human cultures mirrors the city of London's global variety. In no other museum can the visitor see so clearly the history of what it is to be human.
        </p>
      </div>
    </div>

    <div id="back-top" data-magellan>
      <a href="#first"><img src="img/up-arrow.png" alt=""></a>
    </div>

    <div class="row heading-row">
      <div class="large-8 column large-centered" id="second" data-magellan-target="second">
        <h2 class="heading">Gallery</h2>
        <div class="m-p-g border">
          <div class="m-p-g__thumbs" data-google-image-layout data-max-height="250">
            <img src="img/Gallery/01.jpg" data-full="img/Gallery/01.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/02.jpg" data-full="img/Gallery/02.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/03.jpg" data-full="img/Gallery/03.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/04.jpg" data-full="img/Gallery/04.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/05.jpg" data-full="img/Gallery/05.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/06.jpg" data-full="img/Gallery/06.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/07.jpg" data-full="img/Gallery/07.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/08.jpg" data-full="img/Gallery/08.jpg" class="m-p-g__thumbs-img" />
            <img src="img/Gallery/09.jpg" data-full="img/Gallery/09.jpg" class="m-p-g__thumbs-img" />
          </div>

          <div class="m-p-g__fullscreen"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered" id="third" data-magellan-target="third">
        <h2 class="heading">Location</h2>
        <div class="border">
          <div id="map">
            <!--Map Location-->
          </div>
        </div>

      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered">
        <h2 class="heading">Area Information</h2>
        <div class="content border">
          <br>
          <h3>Sights</h3>
          <p>London has some of the most famous sights such as the Royal Observatory or the Science Museum and close to Bedfort Court Mansion in Bloomsbury you can view the famous Charles Dickens Museum or St Pancras Church at ease.</p>

          <h3>Attractions</h3>
          <p>London’s most famous attractions such as the London Eye, Tower Bridge and the Buckingham Palace are definitely the best places to visit when you have an off day from work but there are also some fantastic attractions close to Bedford Court Mansions such as the London Rib Voyages and abundance of theatres to delight you during the evenings.</p>

          <h3>Squares &amp; parks</h3>
          <p>There are quite a few beautiful green spaces in the heart of the city that includes guided winter walks in the Bloomsbury squares or you could go and visit London’s finest landscapes such as the Hyde Park or St. James’s Park.</p>

          <h3>Job Opportunities</h3>
          <p>There are thousands of job opportunities in Bloomsbury in a wide range of sectors such as the design, editorial, finance, marketing &amp; publicity, administrative, production and administrative sectors. There are a lot of entry level positions that require little former education and you can also find professional employment in institutions, hospitals and law firms that will accommodate just about any educational level.</p>

          <h3>Health</h3>
          <p>In Bloomsbury you can enjoy some of the best medical treatments and care and if you are interested in pursuing a career in the medical field then you should definitely consider the University College Hospital so you can also help shape the world to be a better and healthier place. The city has an abundance of medical institutions, hospitals and clinics that will provide you with excellent physical and dental care.</p>

          <h3>Transport</h3>
          <p>Bloomsbury is well served by tube and train, with underground stations at,</p>
          <ul>
            <li>Russell Square</li>
            <li>Holborn</li>
            <li>Tottenham Court Road</li>
            <li>Goodge Street</li>
          </ul>
          <p>Euston, King’s Cross/St Pancras and Liverpool Street mainline stations are all nearby.</p>

          <h3>Schools</h3>
          <p>Primary schools in the area include,</p>
          <ul>
            <li>St Joseph’s Primary School</li>
            <li>St George the Martyr Church of England Primary School</li>
          </ul>
          <p>Secondary schools range from the Children's Hospital School at Great Ormond Street and UCH (also a primary school) to The Royal Ballet School.</p>
        </div>
      </div>
    </div>

    <div class="row banner">
      <div class="large-12 column">
        <img src="img/bedroom-full.jpg" alt="Bedford Court Mansions Lounge Banner">
      </div>
    </div>

    <div class="row">
      <div class="large-8 column large-centered contact" id="fourth" data-magellan-target="fourth">
        <h3 class="heading">Do you live in Bedford Court Mansions?</h3>
        <p>To find out how much your property is worth, contact us below for a free valuation.</p>
        <h3><span class="contactSale">Sales</span> &amp; <span class="contactLet">Lettings</span></h3>
        <address>
          <a href="tel:020 7299 3322" class="link">020 7299 3322</a>
          <br>
          <a href="mailto:westend@h-s-c.co.uk?subject=I would like a free valuation" class="link">westend@h-s-c.co.uk</a>
        </address>
      </div>
    </div>
  </main>

  <footer>
    <div class="row">
      <div class="large-4 columns large-centered">
        <ul class="social-media-list">
          <li class="social-media-icon">
            <a href="https://www.facebook.com/" target="_blank">
              <img src="img/facebook.svg" alt="Facebook Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="https://twitter.com/" target="_blank">
              <img src="img/twitter.svg" alt="Twitter Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="https://www.youtube.com/user/" target="_blank">
              <img src="img/youtube.svg" alt="Youtube Icon">
            </a>
          </li>
          <li class="social-media-icon">
            <a href="" target="_blank">
              <img src="img/google.svg" alt="Google Plus Icon">
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="large-8 columns large-centered">
        <p class="text-center">copyright 2014 all rights reserved -</p>
        <img src="img/hsc.png" alt="Logo">
      </div>
    </div>
  </footer>

  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/vendor/what-input.min.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/app.js"></script>
  <script src="material-photo-gallery-master/dist/js/material-photo-gallery.js"></script>
  <script>
    var elem = document.querySelector('.m-p-g');
    document.addEventListener('DOMContentLoaded', function () {

      var gallery = new MaterialPhotoGallery(elem);
    });
  </script>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="js/google-ini.js"></script>
  <script src="js/scrollTop.js"></script>
</body>

</html>

You commented on Siavoush's post almost 2 years

Hi thank you for getting back, i am developing the site locally at the moment so I can't provide a link, I ran a few tests and found out that something in foundation.css is causing the issue, without it, the anchors work fine. @Rafi Benkual yes I am linking to a page that has magellan however i don't care about scrolling to it, as long as it loads the correct target section.

Also I found that it is not just one link, only the first anchor will work, any other anchor just goes straight to the bottom of my target page

edit
I downloaded a clean copy of foundation and tried linking to several sections on the default and the anchors work fine so it must be something In my html, I don't know what I've done wrong, I have linked a code pen with all my html
http://codepen.io/anon/pen/eJQNQR

Posts Followed


Following

  • No Content

Followers