Web Design Blog Posts

Are you sick of having to constantly press that refresh button? Well no more. Dimensions Toolkit is compatible with all JavaScript auto-refreshers, so no more incessant button bashing.

Dimensions Toolkit is all for accurate measurements and sizes. We can control the dimensions of the preview by dragging handles, entering specific values manually or choosing from a selection of popular device measurements.

The toolkit is set to the default breakpoints of 320px, 480px, 768px & 1024px. Using the custom breakpoints feature, Dimensions allows you to change these values to anything you desire.

Codrops has shared a couple of modern and subtle tab styles and effects for your inspiration. They use pseudo-elements, SVGs and CSS transitions for some of the techniques.

This Tab Styles Inspiration collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box and you’ll see how interesting the usually boring tabs can become.

Startup Design Framework contains components and complex blocks which can easily be integrated into almost any design. All of these components are made in the same style, and can easily be integrated into projects, allowing you to create hundreds of solutions for your future projects.

All components are responsive design with full mobile support. It works fine on devices supporting Retina Display as well. Best of all, each component is already coded for you with HTML5, CSS and LESS. The only thing you need to do is to pick your favorite components and then build them like Lego blocks. It’s fun and super easy.

Flatic is a large user interface kit containing hundreds of web elements, which will help you design whole websites in Photoshop with ease. Sets of icons, and actions have been included in the kit. The package Includes more than 100 elements. You can check out the full preview here.

Responsive Elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today. The element is aware of it’s own width. It responds and adapts to increasing or decreasing amounts of space. You can easily explicitly declare which elements you want to be responsive using a data-respond attribute.

Codrops has shared a Multi-level Push Menuexperiment with us. They tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content like navigations of online stores.

The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.

The main idea is to increment the value for the translate so that we guarantee that the sub-levels are not shown once we push everything a bit more for showing the slices of the parents. Please note that this is using 3D Transforms which only work in modern browsers. You will find a fallback example for non-supporting browsers in the end of the component.css file.

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable. UIkit is developed in LESS to write well-structured, extendable code which is easy to maintain.

There is a collection of small, responsive components using consistent and conflict-free naming conventions. UIkit’s very basic style can be extended with themes and is easy to customize to create your own look. UIkit is open source and MIT licensed. It is absolutely free of charge and you can use, copy, merge, publish and distribute the framework without any limitations.

Aykut Yilmaz is a Senior Art Director from Istanbul, Turkey. He has made a beautiful modern UI Kit that you can download for free. So, you can design visually interactive and appealing user interfaces with this awesome free kits.

This UI kit is available in PSD format for easy modification. They can be used to design and mock-up web, app and software user interfaces. You can click on the “Download it now” link and then enter $0 price to get it for free. You can also take a look at other Free UI Kits we have mentioned some time ago.

Screenfly allows you to view your website on a variety of device screens and resolutions. Enter a URL and click on GO to get started. Screenfly can use a proxy server to mimic devices while you view your website. The proxy server mimics the user agent string of the devices you select, but not the behavior of those devices. On devices with densely pixelated screens, websites are often rendered using reference pixels instead of the traditional hardware pixel. Keep in mind that resolutions in Screenfly refer to the rendered resolution, and not necessarily the native resolution of the device you’re testing.

Dunked is one of the simplest, easiest, and most versatile portfolio simple-to-use solution to allow creative folk to showcase their work. It’s Responsive, Retina & Ready to go. you can choose from a growing collection of professionally designed templates to reinvent your portfolio. Their pixel-perfect templates are customizable, easy to use, and focus on one thing only – your content. Each template is fully responsive and will adapt itself to any mobile device. iPad, iPhone, Android, it doesn’t matter. Your work will always looks its absolute best. Upload images from your computer, embed your latest videos from YouTube or Vimeo, and add your mixes from SoundCloud. When you’re done, manage your content through a simple to use drag and drop admin interface.