Dribbble Shot

A skeleton HTML & CSS project used to create Dribbble shots

Why does this exist?

I found myself designing and mocking-up layouts directly inside HTML/CSS more and more frequently over the years. Because of this, any work I decided to share on Dribbble became slightly more difficult since I rarely used specific design software like Sketch, Figma, etc.

And so, Dribbble Shots was born!

Usage

Simply create your mockups with regular HTML/CSS inside the .canvas classname element. If you wish to create your shot @2x scale, just add the additional .x2 class alongside .canvas before starting your project.

Export

To keep things straightforward, use the default screenshot feature built into Firefox. You can target the specific .canvas element directly.

Not using Firefox? You really should be if you value privacy and a more open web.

Enjoy!