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'
}
}
]
})
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.
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.
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.
Top comments (12)
Thank you for sharing:)
This is awesome
This is just great. Thanks for sharing.
Where I can download the files?
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
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.
Wow! Thanks❤️
Thank you so much, I reckon this is going to be BIG.
awesome
Amazing 👏🏻👏🏻👏🏻
great article
Awesome work!