DEV Community

loading...
Cover image for 52 responsive snippets to create a website for your project

52 responsive snippets to create a website for your project

przemek profile image Przemyslaw Michalak ・2 min read

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.

widget collection

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'
      }
    }
  ]
})
Enter fullscreen mode Exit fullscreen mode

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.

banana widget

Styling

There is 2 ways to style your snippets.

Scoped CSS

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.

apricot

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...

tomato

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.

nectarine

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.

Discussion (12)

Collapse
sojasmine profile image
Sojasmine Gjerstad

Thank you for sharing:)

Collapse
db325 profile image
db325

This is awesome

Collapse
aneeez profile image
Anees Pathoor

This is just great. Thanks for sharing.

Collapse
roby98dev profile image
I KADEK ROBY ADI PUTRA

Where I can download the files?

Collapse
chrisczopp profile image
chris-czopp

It's in the studio, you just need to signup for free. It doesn't require any details from you except verification via Google or Github. Then, you will be able to explore and single-click insert them in your example HTML page following the introjs guide. When you're happy, just click export and you'll download a zipped file containing self-contained SolidJS+JSX project. It's a nicely organised reactive code. It comes with all the cofigs to let you run a Webpack Dev Server with hot reload.

Collapse
przemek profile image
Przemyslaw Michalak Author

You can also check my profile. I have pinned article where is yt video showing everything. At the beginning of the video you will find table of content so you can have a look straight away how to export them

Collapse
osnibjunior profile image
Osni B. Junior

Amazing 👏🏻👏🏻👏🏻

Collapse
melfordd profile image
Melford Birakor

Wow! Thanks❤️

Collapse
harryadney profile image
Martin Dimmock

Thank you so much, I reckon this is going to be BIG.

Collapse
pradeep profile image
Collapse
dquanghuy4444 profile image
Đặng Quang Huy

great article

Collapse
meo3w profile image
Phil Hasenkamp

Awesome work!

Forem Open with the Forem app