The Jatsby Framework is a simple web "UI Framework" for creating elegant webpages and experimenting with your latest designs. It comes with four breakpoints, a simple-but-effective reset CSS block called Rasa (available standalone), awesome fonts, and a diverse color palette.
It's designed with Chrome, FireFox and Safari in mind and meant to suppliment client-side Js frameworks that lack a proper UI element, like Ember and Angular.
Jatsby includes four simple breakpoints for making your website responsive. And if responsive isn't on the agenda, simply stick to main.css' 320px breakpoint.
main.css - for @imports, reset, and global declarations; 320px, 600px, 900px, 1025px breakpoints.
There's a lot of meaning behind these numbers! Below are the screen widths of some of the world's most-popular gadgets:
320px - iPhone (4, 4s, 5, 5s)
375px - iPhone 6
540px - Nexus 5
600px - Nexus 7
720px - Surface Pro 3
768px - iPad (3, Mini, Air)
800px - Nexus 10
960px - Nexus 7 (Landscape)
1024px - iPad (Landscape)
1152px - 2015 MacBook
1200px - Nexus 10 (Landscape)
1280px - MacBook Pro 13" (Retina and non-Retina)
Notice that up to 1024px, a device could be a tablet (with the exception of the Nexus 10), hence the 1025+ desktop breakpoint, which is primarily for restricting :hover effects to mouse-and-keyboard computers.
Jatsby comes with some neat, free-to-use fonts that you can @import locally and via Google Fonts for easy implimentation.
Aileron (local) Bebas Neue (local) Lato (Google Fonts) Lobster (Google Fonts) Mohave (local) Montserrat (Google Fonts) Roboto (Google Fonts) Source Sans Pro (Google Fonts)