Rmcwnbjhl2rucka5c121 Png

Hi everyone. I made 52 responsive snippets that can help you to build website for your project, portfolio, commercial website or whatever you wish, since they are free. All of them are fully responsive and customizable so I want to quickly show you how to use them.



Edit their content

Each snippet comes with its own object JSON file that provides data to it. So it is pretty straight forward to change their copy. Remember that a lot of snippets have elements as cards that takes content from an array of objects. So to control amount of elements simply copy and paste or delete objects from the array. Have a look at the picture bellow. 

export default () => ({
  getTitle: () => 'Nunquam consumere boreas',
  getDescription: () => 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
  getImage: () => ({
    src: 'https://via.placeholder.com/350',
    alt: 'image'
  }),
  getCallToAction: () => ({
    text: 'Sectams prarere!',
    target: '_self',
    href: 'https://www.glue.codes'
  }),
  getCards: () => [
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    },
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    },
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    }
  ]
})
Adzh7shpsj9ivmqhpmiwt5 1024 80
Read moreBMW’s new flat logo is everything that’s wrong with modern logo design - The Verge

As you can see, we have function getCards that returns array with 3 objects and so snippet displays 3 cards. If you add extra or delete some of those objects you will get respectful amount of cards.



Scoped CSS

Understanding-logo-design-brief
Read moreThis Simple Chart Explains What Common Terms In A Logo Design Brief Mean

Each snippet has its own dedicated CSS file that can be freely edited without worries of interfering with the rest of them. It is especially useful when you want to use the same snippet more than once on your website. You can make them look absolutely different using scoped CSS files.



Global Styles

Each widget is also connected to the global styles file that can edit all of the snippets at once to speed up your work when it comes to consistent design of your project. And that is possible thanks to…



Consistent naming

All snippets have consistent naming when it comes to their CSS classes or object JSON file. That significantly helps with changing their design and make it easy to learn how to change their content.



FREE to use

As I said right at the beginning, you can use them for free for what ever project you build. Even commercial. To get access to them visit my website.

This content was originally published here.

Scroll to Top