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 3 months

@bella43 
Hey, I used flexbox to get around it and floated the last element to the left for IE9, not sure if it's the best way but it works for me. Hope it helps :)
.team__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.team__member:last-child:not(:first-child) {
float: left;
}

Siavoush commented on Siavoush's post 9 months

bump

Siavoush commented on Siavoush's post about 2 years

Could you tell me how you fixed it ?

Siavoush commented on Siavoush's post about 2 years

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

Siavoush commented on Siavoush's post about 2 years

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 2 years

Snig, that is perfect, thank you 

Siavoush commented on Amelia Banks's post over 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 over 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 over 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 over 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>

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Siavoush's post 3 months

@bella43 
Hey, I used flexbox to get around it and floated the last element to the left for IE9, not sure if it's the best way but it works for me. Hope it helps :)
.team__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.team__member:last-child:not(:first-child) {
float: left;
}

You commented on Siavoush's post 9 months

bump

You commented on Siavoush's post about 2 years

Could you tell me how you fixed it ?

You commented on Siavoush's post about 2 years

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

You commented on Siavoush's post about 2 years

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 2 years

Snig, that is perfect, thank you 

You commented on Amelia Banks's post over 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 over 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 over 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 over 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>

Posts Followed


Following

  • No Content

Followers