How to create a responsive Pinterest style layout with CSS

If you’ve seen the layout on Pinterest you probably already know what we are going to be creating here. If not, it’s essentially the stacking of divs or images of different sizes with a set number of columns (view demo). We really do love this style of layout, it gives a different kind of look to the standard Bootstrap columns. So let’s begin:-

HTML


<div class="container">
	<div id="list" class="section">
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 26em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 14em;"></div>
		<div class="item" style="height: 8em;"></div>
		<div class="item" style="height: 18em;"></div>
		<div class="item" style="height: 16em;"></div>
		<div class="item" style="height: 12em;"></div>
	</div>		
</div>

CSS


#list {
    width: 100%;
    overflow: hidden;
    margin-bottom: -1.875em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1.875em;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 1.875em;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 1.875em;
    column-fill: auto;
}

.item {
    background-color: #169fe6;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

You can see a working demo here.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Clean Website Design: How to Achieve It & Why It’s Useful

If you’re following the latest design trends, you probably know that sometimes less is more. Clean website design hasn’t always been the way to go through. In the past, the trend was to create 3D-styled skeuomorphic design websites.

The skeuomorphic design trend included heavy design elements and was very hard to adapt to mobile websites. That’s all changed with the new “flat” website design trend. It’s light, minimalistic and easy to adapt to multiple devices.

A good clean modern design will attract more visitors and ultimately increase your revenue from ads without increasing your spending. Making sure your business is nicely presented through clean design can work wonders in reducing ad costs and increasing conversion rates.

Here are 3 reasons why clean website design is important to your business:

1. Load times

Clean website design mainly focuses on simplicity. With that in mind, when you’re developing a website using clean design, you’re essentially avoiding all the complexity and implementing simplicity.

As your site loads faster, the bounce rate reduces and you are getting more visitors. This is especially important in this day and age, as over 50% of website traffic comes from mobile devices.

Google also takes notice of clean modern design. They utilise mobile-first indexing, which means they check the mobile website first and then the desktop version. Another thing Google does is rank the faster and more mobile-friendly websites higher than the desktop-only and resource-heavy websites. There are a lot of factors that come into play when working with optimising your website load speeds, but usually, your web hosting provider, optimised images & asset loading are a good start.

2. Better exposed products and services

While the previous web design trends focused on cramming as much as possible into a web page, clean design takes a different approach.

Clean design websites utilise white space, paddings, margins, and similar things to the best extent. Fact is, visitors won’t read your website top to bottom or left to right, or in any way you’ve imagined. It’s very likely they’ll just scan through the website to find the information that matters to them.

When you take the time to clean up the website and strip down the unnecessary elements, you’re left with only the most important bits. With this done, no matter how the reader scans the website, they’ll end up on this information, because there’s not much else to see.

3. Timelessness

A clean website design won’t die out. It won’t grow old and stop being useful. It might become a little outdated, but that will happen much slower and even when it does, it’ll still be very easy to navigate.

The main features that attract visitors to a website are the basic principles of clean design. Easy navigation is very important for clean website design, without that a website would grow old very quickly.

Clean styles which are consistent over all the web pages are a must in order to make it easier for the user to scan through the website.

Fact is, a lot of people will be coming to your site from social media. But social media sites are usually crammed with information, so the fact that your site is relaxing will make the visitor spend more time on it.

How to achieve a clean website design?

Building a clean website is not as hard as you might think. There are a few basic principles you need to follow, but it’s definitely worth it.

1. Pay attention to detail

You might think that dedicating attention to extreme details isn’t gonna pay off in the end. But you’re wrong. The visitor might not even consciously notice the shadow on that menu, but it creates a better impression than if you didn’t have it.

There are many of these mini-styles that you need to focus on like borders, shadows, textures, image overlays and more. These are all very important to create a beautiful clean website design. But use them in moderation, in a balanced way.

Take Microsoft’s website for example. If you mouse over the menu items, a black line pops up below them, you might not consciously notice it if you’re not looking for it, but it does tell you that the item is clickable, right?

In the same way, if you mouse over the images below the slider, their brightness increases slightly. All these details make a difference. If they didn’t, Microsoft wouldn’t implement them.

2. Consistency

All the elements and styles you’ve designed should be consistent on all the pages of your website. Any good website design will be consistent over all the pages.

The only exclusion to this rule can be the buttons, specifically the CTA (Call-To-Action) buttons, they are sometimes coloured differently than other buttons to indicate a different kind of action.

Other than that, every other element – headings, paragraphs, fonts, and colours should be defined at the start and used throughout the whole website.

I frequently see people neglecting this rule with images. You need to do this even with the images. Don’t go and make them exactly the same, but if your website consists of mainly cartoon-style images, make them all cartoon-style. Having one cartoon-style and another real-life makes for a confusing experience

3. Perfect alignment

Perfect alignment is a key feature of a clean modern design. When people are reading a website or looking for information, they tend to want a more organised look. The same is probably true for you. It makes finding information much faster and easier.

You might want to use a grid to align elements, to make sure they’re perfectly aligned. But in some cases, it’s not required. Just make sure the website looks organised when you’re done creating it.

A website that has grid-based design is Jucophoto. It’s a photography portfolio, so grid-style is kind of a must for that. But take note of how perfectly the images are aligned, each made to fit exactly the size it needs.

Conclusion

Clean website design is a must for anyone who wants to have an up-to-date website. It makes the website load fast, get better search rankings, reduce bounce rate, and more. There’s really no reason not to use clean design.

There’s no other way to remain competitive in today’s digital age. You need to follow the trend and be on top of it. All your customers will thank you for implementing a clean design. It literally makes their life easier.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Bootstrap – Responsive Carousel – Changing the number of visible slides

In this example, we are going to show how to configure the Bootstrap 3 carousel to show many panels at once but only slide one at a time.

See the JSFIDDLE to see how this works. On a desktop, it rotates one item at a time and has 3 elements in view. If you shrink the browser to mobile you will not see it rotates one item at a time but only has one element in view (as opposed to it usually stacking 3 elements).

Here is the code you need from the example:-

HTML


<div class="row">
  <div class="col-md-12">
    <div class="carousel carousel-blog slide" id="carousel123">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

CSS


.carousel-blog .carousel-control {
  width: 4%;
  background-image: none;
}

.carousel-blog .carousel-control.left {
  margin-left: 15px;
}

.carousel-blog .carousel-control.right {
  margin-right: 15px;
}

.carousel-blog .cloneditem-1,
.carousel-blog .cloneditem-2,
.carousel-blog .cloneditem-3,
.carousel-blog .cloneditem-4,
.carousel-blog .cloneditem-5 {
  display: none;
}

@media all and (min-width: 768px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -33.333%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 33.333%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-1,
  .carousel-blog .carousel-inner .cloneditem-2 {
    display: block;
  }
}

@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

@media all and (min-width: 992px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -16.666%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 16.666%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-3,
  .carousel-blog .carousel-inner .cloneditem-4,
  .carousel-blog .carousel-inner .cloneditem-5 {
    display: block;
  }
}

@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

.container {
  margin-bottom: 50px;
}

body {
  font-family: 'Bitter', sans-serif;
  color: #E54A41;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  margin-bottom: 2em;
}

h2 {
  margin: 2em 0 1em;
}

.logo {
  margin: 20px auto;
  height: 100px;
}

@media only screen and (min-width: 768px) {
  .logo {
    margin: 28px;
    float: left;
  }
}

.title {
  padding: 28px;
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

jQuery


(function() {
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // http://getbootstrap.com/javascript/#carousel
  $('#carousel123').carousel({
    interval: 2000
  });
}());

(function() {
  $('.carousel-blog .item').each(function() {
    var itemToClone = $(this);

    for (var i = 1; i < 3; i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-" + (i))
        .appendTo($(this));
    }
  });
}());

If you need to modify the code to show more slides or change the breakpoints, just remember to update these four key elements:

  • Update the html classes for responsive rules
  • Update the css item widths
  • Add in the required .cloneditem-n management
  • Tweak the js loop to control the number of cloned items
Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to make Responsive Slanted Divs in CSS

Do you need to create a slanted div for your website? Well you’ve come to the right place!

We are going to create a slanted Div using CSS only without the use of images as this would be a waste of resources! We are going to use pseudo elements, applying a CSS3 transform on them, skewing the whole element and hiding the overlapping areas. Here is the code:-

HTML


<div class="container">

  <main class="main">
    <div class="main-container">
      <section>
        <h1>Silva Web Designs</h1>
        <p>Okay, so I guess this is a good way to make a slanted div aye? I am also responsive which is pretty cool. Instead of using a background colour you can use a background image instead which works very nicely. The possibilities are endless! :)</p>
        </section>
    </div>
   </main>

</div>

CSS


.container {
  padding-top: 60px;
}

.main-container {
  background: #169fe6;
  position: relative;
  color: #FFFFFF;
}

.main-container:before {
  content: '';
  position: absolute;
  left: 0;
  top: -36px;
  width: 100%;
  height: 72px;
  background: #169fe6;
  -webkit-transform: skewY(2.5deg);
  -moz-transform: skewY(2.5deg);
  -ms-transform: skewY(2.5deg);
  -o-transform: skewY(2.5deg);
  transform: skewY(2.5deg);
  -webkit-backface-visibility: hidden;
}

section {
  margin: 10px 0;
  padding: 0 20px;
  padding-bottom: 10px;
  position: relative;
}

And there you have it, I hope this helps! 🙂

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Our top 3 favourite WordPress Starter Themes

What is a Blank WordPress Theme?

A ‘Blank WordPress’ theme is a boilerplate that serve as a starting point for developing your own custom theme, hence the name; ‘starter themes’.

Blank WordPress themes come with basic WordPress PHP, CSS, and HTML code and theme files already filled out for you saving hours of coding time!

Unlike theme frameworks, most of the files in a blank WordPress theme are meant to be modified based on your needs.

Why Use Blank WordPress Themes?

A blank WordPress theme speeds up your workflow by reducing the amount of code you need to write. Having a skeletal foundation means you don’t have to do the same initiation process over and over every time you need to start creating a new theme.

In addition, using a blank WordPress theme lowers the chances of you forgetting critical files or code required for a theme to function properly.

Some blank WordPress themes will also have useful integrated features like responsive layouts and sample data to help you test your theme.

Do not mistake these with Premium themes with ones you will find on ThemeForest, these are designed to be a ‘blank canvas’ to create your own WordPress Theme. I also use a starter theme like one of the ones below when creating bespoke websites for my clients.

Here are our favourite three:-

1. Underscores

Underscores, or _s, is a free blank WordPress theme developed by Automattic, the creators of WordPress.

The tutorial series by ThemeShaper (a major WordPress theme development company) will help you learn how to create WP themes using Underscores.

I use Underscores for every new theme I develop. It saves me hundreds of hours of coding! The great thing about it is that you can set the Theme name, Author & Theme Slug when you download which means you don’t have to do a find and replace when setting your theme name (which, coming from experience, can break things sometimes).

2. Roots

Roots is an excellent open-source WordPress starter theme. It’s built with HTML5 Boilerplate and Bootstrap (if you don’t need it, you can replace or remove it). It also has Grunt files for quickly compiling LESS code and combining your CSS and JS files.

A nifty feature of Roots is its Theme Wrapper, which helps you avoid having to write the same code in multiple files.

Check out themes built using Roots at the Roots Gallery. Get started with Roots by heading over to the project’s official docs.

3. Bones

Bones is a free blank theme built on top of HTML5 Boilerplate. It’s responsive and developed under the Mobile First philosophy.

WPtuts+ has an excellent Bones tutorial to help you get started with this awesome starter theme.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share