They’re not sexy. They’re not styled. They’re the browser defaults.
No web designer will include them in their portfolio without restyling them. But they will have used them in their work. Checkboxes, radios, dropdowns and more…
I've used this to speed up quick wireframes, forms, anything that needs very little styling and a couple of fugly CMSs. If you’re like me, I know you want to get the nit-picky-details jussst right, even though they're the defaults!
This comprehensive Sketch Library will help you speed up including defaults the next time you're faced with similar design challenges.
ZIP File contains
Native Web Components.sketch
Demo - Full Flow.mp4
Take a look
You can see a detailed overview of whats included in the files onMedium
. I've posted a few of these onDribbble
Need to resize? No problem! You can drag and everything will stay perfectly scaled. All the layout option have been set using Sketch's Resizing properties so they'll speak really well to other apps like InVision, Marvel or Zeplin.
No plugins needed
You wont need to install anything else, other than Sketch, to get this up and running. However, if you do have the Paddy plugin, your buttons will resize automatically.
As simple as possible
If you add Native Web Components.sketch as a Sketch Library, you can simply copy and paste every asset straight from the demo file. No need to dig through the symbols dropdown trying to find what you need.
Got questions? Or Suggestions for improvements?
Get in touch via twitter and I’ll be happy to help you out.
Right now this is designed with Mac OS and Google Chrome in mind. I came to this conclusion as Sketch is Mac only and Chrome is the most popular browser, also there is very little difference between Chrome and Safari as they both use WebKit.
If you would find it useful to see more operating systems or browsers added, reach out, I'll be happy to consider them.
If you do find this resource useful and it saves you a lot of time, please show your support and consider buying me a ☕️or a 🍺by donating a few bucks! It will encourage me to keep the library up-to-date and think of more useful things to give to you for free.