Frontend-Design Knowledge Sharing #19
Butter Cake CSS Framework, Screen Size Map, Flexbox30, UI Print, Devices, Free Dribbble shots mockups by forpeople studio, 200 free animated icons
Table of Content
— Frontend Talks
- Butter Cake CSS Framework
- Screen Size Map
- Flexbox30
— Design Talks
- UI Print
- Devices
- Free Dribbble shots mockups by forpeople studio
- 200 free animated icons
Butter Cake CSS Framework
A new modern lightweight CSS framework built with flexbox. Designed for mobile first 100% responsive, modern and modular concept.
You can follow the documentation here.
Butter Cake/
│
├── dist/
│ │
│ ├── css/
│ │ ├── butterCake.min.css (98kb)
│ │ └── butterCake.min.css.map (52kb)
│ │
│ └── js/
│ ├── butterCake.js (Non Minified) (9kb) - (Complete components Js)
│ ├── butterCake.min.js (Minified) (5kb) - (Complete components Js)
│ ├── alert.js
│ ├── accordion.js
│ ├── dropdown.js
│ ├── modal.js
│ ├── chips.js
│ ├── tabs.js
│ ├── side-navbar.js (Side Navbar)
│ └── slideDown-navbar.js (Slide Down Navbar)
│
├── src/ (Includes SASS|SCSS Files)
│
├── prepros-6.config
│
└── index.html (Starter File)Screen Size Map
An interactive map displaying various screen resolutions and usage statistics.
Visit the site here
Flexbox30
A guide for learning CSS Flexbox in 30 days via 30 code tidbits.
Day 1 — Introduction
Before Flexbox, we were mainly using floats for layout. And for those CSS developers, we all know the frustrations and limitations of the old way — especially the ability to vertically center inside a parent. Ugh, that was so annoying! Not anymore! Flexbox for the win!
Day 2— Flex Container & Flex Items
In order to get Flexbox to work, you need to set up the Parent-Child relationship. The parent is the flex container, and everything within it is the children or flex items.
Visit the site here for other days.
UI Print
If you love to draw your idea on paper and want some good sketchpad templates to speed up your design process. Grab UIPRINTS. These templates will be an invaluable resource for any UX project. Giving you the ability to quickly wireframe your ideas and produce rapid prototypes. We can say these mockups are really helpful to quickly sketch out an idea or a wireframe and get feedback from the stakeholders. Having our sketches drawn out on in a device helps to put things in perspective.
Visit the site here
Devices
A free collection of device mockups from Facebook. You can download images and sketch files of the popular devices.
Visit the site here
Free Dribbble Shots Mockups by Forpeople Studio
Forpeople Studio has created high quality, easy to use Dribbble shots mockups, which is helpful for designers, startups, agencies for presenting their work in dribbble platform. It is compatible with Sketch, Figma, Adobe XD.
These mockups are very easy to customize and save a lot of time in creating a presentation on Dribbble. We can add or remove elements, change colors and upgrade the composition to make our shots unique. Forpeople studio has prepared 18 free mockups design layouts at the moment and are planning to add more in the future.
Visit the site here
200 free animated icons
Download JSON for Lottie, GIF, and After Effects format.
Made by Icons8 free for a link
Visit the site here
Read our previous blog
Also from our backend blog
That’s all for this week. Stay tuned for upcoming blogs, Till then
Keep on Hacking!!
