38 Freebies & Goodies For Web Designers – November 2015

World Landmark Vector Icons

A set of 18 vector icons that feature quite a defined line style in order to represent several of the most known landmarks in the world.

Bitsies: Line Color Vector Icons Set

Bitsies is a set of 143 vector icons that feature a line trace in several widths and colors, released free for personal and commercial use.

Bitsies: Line Color Vector Icons Set

Office and Business Vector Icon Pack

A pack of 92 icons related to business and office topics released in several vector formats and additional PNG previews ranging from 64 to 512 pixels.

Office and Business Vector Icon Pack

FlagKit: 180 Flag Sketch Icons Library

FlagKit is a Sketch icon library that features over 180 flags of countries and organizations across the world, ready to be called from Swift coding.

FlagKit: 180 Flag Sketch Icons Library

170 Line Icons Set

A set of 170 icons released in PSD format that feature a line style representing miscellaneous elements.

170 Miscellaneous Line Icons Set

Blobs: Flat Colorful Icons Pack

Blobs is a pack of 1000 icons that feature a pure flat design delivered in Ai, PSD and SVG formats.

Blobs: Flat Colorful Icons Pack

iOS 9 Sketch Keyboard Kit

A kit of several iOS 9 keyboard templates in both light and dark style featuring Qwerty layouts, emoticons, numerical keyboards and other keys.

iOS 9 Sketch Keyboard Kit

24 Flat Mockups of Apple Devices

A set of 24 flat mockups representing most of the current Apple devices collection such as Apple Watch, iPod, iPad, iPhone, iMac and MacBooks.

24 Apple Devices Flat Mockups

Diverse Device Hands (Mockups)

Diverse Device Hands is a set of regular mockups featuring a range of hand-held mobile devices with different screen sizes.

Diverse Device Hands: Hand-held Devices Mockup

Mydesk: Desk Item Mockup Set

MyDesk is a set of 50 mockups representing several desktop items such as cameras, coffee cups, keys, USD drives, and more.

Mydesk: Desk Items Mockup Set

T-Shirt PSD Mockup Set

A set of 10 photorealistic mockups that allow you to feature your design in several positioned T-Shirts which can be edited via Photoshop smart objects.

T-Shirt PSD Mockups Set

Newspaper Design Inclusion Mockup

A set of 14 photorealistic mockups that allow you to feature your ad designs in newspaper sections of different sizes and placements.

Newspaper Design Inclusion Mockup

Blurring Image Filter

Blur Like Jony is an image filter plugin for Photoshop inspired by Apple’s iOS blurring effect, allowing you to showcase your edition in a dark, light or extra light mode.

iOS Blurring-like Image Filter

Style Tiles: Sketch App Template for Startups Design

Style tiles is a template for Sketch App that allows you to design logos by helping you manage the proportions of your design color scheme.

Style Tiles: Sketch App Template for Startups Design

Stone Text Effect

A Photoshop effect that gives your text an amazing stone texture in a 3D perspective. It’s best suited for sharp edged fonts.

Stone Photoshop Text Effect Material & Flat UI Resources is a web tool for designers that feature material design colors, icons and flat UI colors collections available for direct download or color code copy-to-clipboard. Material & Flat UI Resources

Core: Colorful iOS UI Kit

CORE UI Kit comes with 12 fully editable high-quality screens of the 9 most common categories. This kit comes in PSD format including artboards to work with Adobe PS CC 2015.

Core: Colorful iOS UI Kit

U.S. Web Design Standards

An open source project that aims to collect and curate style guidelines used by US government sites.

U.S. Web Design Standards

Stark: Flat Acid Colored UI Kit

Stark is a modern web UI Kit that features a flat style with a soft and acid color palette. It consists 200 components, 90 elements, and 10 categories.

Stark: Flat and Acid Colored UI Kit

DYK: Blog UI Kit Collection

DYK is a collection of 13 homepage variations featuring a resolution of 1920×10000 pixel for website UI kit, perfectly suitable for blogging sites.

DYK: Blog UI Kit Collection

Let’s Go Travel App Concept

Let’s Go is an iOS UI concept specifically designed for travel- and tourism-related applications featuring line icons and a flat minimal style.

Let's Go Travel App Concept

Relancer Font

Relancer is a typeface that was designed following a single grid made out of regular circles and squares. The typeface is in uppercase, and contains a few special characters.

Relancer: Single Grid-crafted Typeface

Novu-M Font

Novu-M is a rather futuristic looking typeface that comes in uppercase characters featuring a narrow and regular width style.

Novu-M: Narrow Futuristic Typeface

Stilu Font

Stilu is a sans serif typeface family that comes in four different weights for both regular and oblique styles. It features ligatures, lining, old style figures and more.

Stilu: Sans Serif Typeface Family


Anson is a sans serif font that features straight ends and edges, inspired by a British twin-engine, multi-role aircraft from the World War II.

Anson: Sans Serif Aircraft-inspired Font


Amsdam is a round typeface that includes a tail in most of its diverse characters in order to give a drop-like look.

Amsdam: Round Tail-adorned Typeface

H&S: ECommerce Fashion Web Layout Concept

H&S is a PSD web template that presents a new concept of layout featuring a 24 column 40 pixel-width grid which would allow you to lay out content in a very diverse way.

H&S: ECommerce Fashion Web Layout Concept

Food Magazine Sketch & PSD Template

A PSD & Sketch template that shows a modern tile layout concept for food magazine websites, combining section feature images and flat color backgrounds.

Food Magazine Sketch & PSD Template

Flat Landing Page PSD Bootstrap Template

Hasi is a PSD landing page template for Bootstrap 3 that features a nice and clean flat style and filled icons.

Hasi: Flat Landing Page PSD Bootstrap Template

Wedding Dress ECommerce Web Template

A clean website template that would perfectly suit eCommerce sites for wedding dresses and related products.

Wedding Dress ECommerce Web Template

New Maxx

New Maxx is a WordPress theme designed for multiple purposes that comes with eCommerce features as well as several size containers and sidebars.

New Maxx: WordPress Theme


Zerius is a WordPress theme that has nice parallax effects for smooth navigation, as well as wooCommerce-ready features and custom blocks.

Zerius: Parallax Background WordPress Theme


ClassyLite is a business template that comes ready-to-use with both Bootstrap and WordPress featuring a nice flat design and multi-weight line icons.

ClassyLite: Flat Business WordPress Theme

IDE Micro Code-Editor WordPress Plugin

A shortcode implementation of Codeflask to be embedded into WordPress. It allows you to edit code from WordPress.

IDE Micro Code-editor WordPress Plugin

Google Maps Plugin WordPress Plugin

Intergeo Maps is a WordPress Plugin that allows you to embed customized Google maps directly into your website. You can set initial position and zoom, control settings, manage colors, and more.

Intergeo Maps: Google Maps Plugin WordPress Plugin

Medium: Automated Photo Publisher WordPress Plugin

A WordPress plugin that allows you to automatically publish photos onto Medium profiles directly from WordPress.

Medium: Automated Photo Publisher WordPress Plugin

Dual Sliding Panels

A code snippet that generates panels that slide along sidewards in order to deploy a description featured by a background image.

Dual Sliding Panels


Top 10 Best Free WordPress Themes from November 2015

Fresh free WordPress themes raise the blood pressure of any user of the world’s most popular CMS. Content feels to be delivered much better from a new design. Let’s not deny it, choosing a new WordPress theme is like choosing a new lover – lots of emotion involved. That’s why we bring you the best free WordPress themes in a monthly roundup. All of the following themes are free and responsive on any screen. Need we still mention that?


1 – WPGumby

Free WordPress Themes: WPGumby WordPress-Theme

WpGumby is a theme in modern flat design and is suitable for multiple purposes. With 13 page templates, five widget areas and four template layouts WpGumby delivers a solid foundation for blogs, portfolios and even online shops as it is prepared to work flawlessly with WooCommerce.

2 – SKT BeFit

Free WordPress Themes: BeFit Theme

BeFit has been developed for the fitness industry but is as well usable for other purposes. Think of photography, businesses, personal websites, just about any topic desired to be presented in a dark layout will fit.

3 – WpF Flaty

Free WordPress Themes: WpF Flaty

As you might have guessed from its name, WpF Flaty also sports the flat design approach. This one would be great for blogs and portfolios. It comes with two sidebars and a template without sidebars as well as different coloring.

4 – Novellite

Free WordPress Themes: Novellite

Novellite is a simple, yet attractive theme for a lot of use cases, among them businesses and portfolios. It can easily be configured through a Theme Options area in the backend. You can change the logo, the background and more.

5 – Photo Perfect

Free WordPress Themes: Photo Perfect

Photo Perfect is a dedicated theme for photographers and photobloggers as it has been developed with images in mind. Backgrounds and color schemes can be changed. Unfortunately, Exif is not what this theme is able to read. Seems to be not that perfect after all, but still a very attractive option.

6 – SKT Girlie

Free WordPress Themes: Girlie

SKT Girlie focuses female bloggers. This does not block out male users, however. Each man that wants to please the girlie in him is welcome to use it, too. Girlie is open for all possible use cases but explicitly recommendable for online shops as it comes prepared for WooCommerce.

7 – Resi

Free WordPress Themes: Resi

Resi is the last theme any minimalist needs. Its strength lies in the presentation of images which makes it a valid choice for photographers and photo bloggers. Customize the backgrounds and the color scheme as you see fit.

8 – Colinear

Free WordPress Themes: Colinear

Colinear is made by Automattic, the inventors of WordPress. That always comes with the promise of great code, perfect compatibility and proper utilization of the internal powers of the WordPress core. Colinear is a pure blogging theme and comes with two sidebars. Throw in your own backgrounds, colors, and headers to customize it.

9 – fYeah

Free WordPress Themes: FYeah

fYeah is another classic blogging theme, inspired by Tumblr. It supports all the different post formats, comes with an exchangeable logo, individual backgrounds and lets you customize colors as well as add your own fonts.

10 – Hitchcock

Free WordPress Themes: Hitchcock

Hitchcock is a theme for designers, photographers and just about any other creative worker out there. The only prerequisite needed is your wish to present your work in an elegant and clean way. Hitchcock likes social media, lets you change accentuation colors, is prepared for Jetpack’s Infinite Scroll and doesn’t prevent you from changing backgrounds and headers.

More Recent Themes Can be Found Here:



Holiday Card with Adobe Capture and Illustrator

Holiday Card with Adobe Capture and Illustrator

It’s that time again, the most wonderful time of the year, at least that’s what the old song says. I love the holidays, and Abduzeedo was born at this time back in 2006, which makes me even more nostalgic. But the reason of this post is not to talk about the past but to showcase a tutorial that illustrates the future at least in terms of how mobile tools can be incorporated in your design process replacing old things like scanners. This tutorial is a courtesy of Von Glitschka. He shows us how to create a Holiday Card using Adobe tools like Capture and the old classic Illustrator.

Step 1

Even in a digital age, I like to begin with a pen and paper. This design started off as a rough sketch to work out the main art for our design’s theme.

Step 2

Working from our rough sketch, I inked the final line work with a brush pen to imbue it with nice thick and thin lines.

Step 3

Using Adobe Capture CC, I transformed my art from ink on paper to a digital vector image. I also used the slide control to adjust the exposure and add/subtract detail.

Step 4

Once I’ve captured my artwork, I quickly removed the unwanted content, including the pen captured in this image, using the select/deselect slider.

Step 5

Using Creative Cloud’s CreativeSync feature, I easily saved my captured assets into Creative Cloud Libraries. From there, I was able to access my vector artwork across Illustrator CC and Photoshop CC within seconds.

Step 6

Since installing Adobe Capture CC, I take pictures of anything and everything for inspiration! I’m particularly fond of these anime manga patches, which I used to develop my color theme. The best part – all of these swatches can be easily saved to CC Libraries and acessed in Illustrator CC, InDesign CC and Photoshop CC.

Step 7

Once I transferred my artwork from Adobe Capture CC into Illustrator CC, I began to add colors to my penguin. I wanted the color to loosely fit within the lines, so I used the Pen tool and loosely followed the shapes.

Step 8

Seeing the colors captured with Adobe Capture CC helped me adjust my overall color scheme to improve my design. Instead of black, I shifted the line work to a darker blue. This kind of fluid workflow is facilitated by Adobe Capture CC because it allows me to easily experiment with a wide range of swatches at a moment’s notice and consider color themes I might not have thought of before.

Step 9

Focusing on the background, I used my custom color theme to build out the background image and snow.

Step 10

With Adobe Capture CC, you can leverage analog methods and easily integrate them into a digital workflow. For this design, I wanted authentic-looking brush strokes, so I used an actual paint brush and black acrylic paint to create the artwork.

Step 11

I love making custom brushes with Adobe Capture CC. For this, I captured my hand-painted strokes, then cropped out what I didn’t need. Using the filters, I adjusted and customized my brush stroke to transpose it into an asset. Adobe Capture CC allowed me to test drive the brush within the app so I could see how it would look once I accessed it in Photoshop CC or Illustrator CC via CC Libraries.

Step 12

Once I saved my brushes to a CC Library, they automatically appeared in my CC Libraries panel in Illustrator CC. I drew a stroke and applied the new brush design to it. The process doesn’t get any easier, and the results look authentic and add a lot of organic flair to the overall aesthetic.

Step 13

I could have used a font, but almost everything in this design was created by hand, so I decided handletter the type as well. I sketched the words on paper, scanned it in and used the Pen tool to complete.

The final type in place really added a nice level of fun to this design. Looking at my design, I realized I was missing an integral piece – SNOWFLAKES!

Instead of cluttering the design with ornate graphics of snowflakes, I decided to use a repeat pattern. I first created a Pattern swatch (shown on left) in black and white, then adjusted the opacity of the various white flakes as they’d appear on the background color. Once I was happy with the snow, I dragged the art into the Swatches panel and began using the pattern.

To adjust the pattern tiling, adjust the elements of the pattern, or recolor it, I just double-click on the Pattern swatch to enter Pattern Editing mode in Illustrator CC.

My initial color composition was blue, but creativity is all about exploration. I played around with the color themes to develop three separate color iterations. I settled on the green color scheme for my final holiday card design. The final card design is fun, as was the process to create it using Adobe Capture CC and Illustrator CC. In total, this project took me about 3 hours.


7 Slack Integrations Developers Should Use

How to customize Slack to enhance your development workflow using integrations and bots

It certainly feels like Slack is gradually becoming the standard for modern office communication. While you may argue that technically Slack is no different than, say, IRC – the polished experience is what makes it stand out in the crowd of messaging services. Using less gentler words, Slack is killing email for office communications. And has built in support for code snippets with syntax highlighting. Boom.

In this post we’re highlighting some of the most useful new workflows that Slack is enabling. Apart from the messaging features, it has a huge number of integrations available that let you customize it for the tools you’re working with. Moreover, some more advanced triggers can also let you perform actions just like a terminal, and even automate them.

Let’s see what’s it all about.

New Post: 7 Essential @SlackHQ Integrations Developers Should Know

— Takipi (@takipid) November 17, 2015

1. The essentials: GitHub and Bitbucket

“He who controls the source, controls the universe”, or something like that. This one is a no brainer. If you’re using GitHub (or Bitbucket) with your team, you want this integration in your Slack. The way we’re using it in Takipi is by having a #github channel with a stream of all the changes in our repositories so anyone can get a quick overview of what’s going on.

GitHub on Slack
GitHub notifications in a Slack channel

The Github integration posts messages about all commits, pull requests, comments, and issues. The messages include links to these events on GitHub’s, and also let’s you see the images attached so everyone can easily look at a new mockup. More active capabilities are available if you’d like to customize a bot to do more stuff, potentially just linking the Slack to a terminal. An easier integration for opening GitHub issues from Slack is available through Zapier.

Bottom line: GitHub notifications in a stream.

Check it out: Get started through the official integrations page.

2. Sentry, Airbrake, Raygun and error tracking

Tools like Sentry and Airbrake report on exceptions and log errors that are happening in your application. After adding the appropriate code and build changes, these tools are able to get access to your errors, aggregate them, and report high level stats.

Airbrake on Slack
Bottom line: Get notified when errors happen.

Check it out:

3. Replacing log files with a Slack channel

Traditionally, to identify and solve errors in production, companies had to rely on log files to know what’s causing them. This includes exceptions, logged errors, warnings, and HTTP errors. A back and forth process that sometimes takes days, even weeks, to complete.

Takipi and Slack
Error analysis in Takipi

With Takipi’s Slack integration, you not only receive immediate alerts on errors in production – but each alert carries tons of actionable information, without ever having to write it into the log. This includes the full stack trace and variable values at the moment of error – all of that is overlayed on the actual code:

Takipi error analysis
Takipi accessed from Slack

Bottom line: Instead of writing every error to your logs, get the variable values and exact state behind each error in production directly from Takipi with Slack.

Check it out: Get Takipi, and add it to Slack.

4. Codeship and other CI/CD tools

If you build it, they will come. And post notifications on your Slack channel of choice. Another area to look into is integrations your build process to send its notifications to Slack.

Codeship on Slack

Codeship notifications in Slack

Once configured, Codeship sends messages on failed and successful builds to your Slack channel. All your team can easily get notified and stay informed of any change in your build.

Bottom line: Your build process can be viewed through Slack.

Check it out:

5. Slack bots for fun and profit

Starting off with the default slackbot, bot users in Slack can become pretty complex and do literally anything that you’d like them to. When first joining Slack, the friendly (yet pretty simple at the moment) slackbot will greet you and get you to complete the onboarding process. It can also set reminders for you and respond to custom defined triggers. Two of our personal favorites are triggers that we’ve set for the office wifi passwords and fetching the menu from one of our takeaway places for lunch.

In an interview with the Wall Street Journal, Slack CEO Stewart Butterfield compares the future of slackbot to the AI from the movie “Her”, or Siri for that matter. It would be awesome to see how this develops in the future.

Hey Slackbot

Hey slackbot, /remind me to [do something] in [some time from now]

But wait, slackbot is not the only bot in the neighborhood. There are actually tens of available bots, and you can also build one yourself. There’s even one that lets you run pokemon battles with your team, and another one for playing poker over Slack.

On a more serious note, the way this works behind the scenes is by spinning up a server that talks with Slack’s Real Time Messaging API which grants you read and write access to channels. The bot appears as a regular user on the user list and you can choose a custom name and set his photo. Other than games, more practical use cases include things like stand-up meeting in Slack but the real magic hides in custom bots which you can hook automate your own processes.

Bottom line: Bots open up a world of options only limited by your own imagination. Heaven (or… time sink) for productivity geeks.

Check it out:

6. Custom Slash Commands

These are quite similar to bots, just without the actual bot user so a bit simpler. Custom Slash commands let you define your own actions. One thing we pulled off is a slash command for ordering food straight from Slack. Yup. There’s a restaurant we like that doesn’t support online orders so almost every day we’re sending them an email with everyone’s requests and it’s a bit of a hassle to collect all the orders. The new slash command lets you order the food you like, aggregates everyone’s requests to a an email, and sends it out on a predefined deadline. We’ll do a separate hands-on tutorial about that soon.

Slash command to order food
Order food with a slash command

In a nutshell, the way this works is by sending an HTTP POST or GET request to a URL of your choice. The request payload includes all the fields you need to execute your response:

Slack slash command payload

Bottom line: Automate ALL the things!

Check it out: Slash commands docs.

7. Giphy

Well, if you’re into GIFs like I am, this one is a charm. Once you add the Giphy integration you get quick access to Giphy’s “text-to-GIF” feature. Just type /giphy space cat and get…. Space cat! We just couldn’t build an essential integrations list without it :)

Giphy, perfect when you’re hungry

The integration is built using Giphy’s API which is quite awesome on its own. Pronouncing it Jiff vs. GIF still remains unresolved.

Bottom line: Let there be cats! Beware of occasional NSFW content.

Check it out: Get Giphy for Slack through the official integrations page.

Final Thoughts

There are tons of integrations that we didn’t have a chance to mention, a great place to see a comprehensive list is on which also has a section for developer specific integrations. Slack has entered our lives by storm and now we’re spending all our hours in the office connected to it. The integrations we’re using are kicking it up a notch and making it even more useful, cutting down and centralizing all notifications and alerts. The next step of this evolution will probably include AI bots, and we’re super excited to see where it goes next!

Have an interesting use case that we missed? Share it in the comments section below



10 Daily Routine Hacks To Become A Better Version Of Yourself

I’m always trying out new methods to become a  better version of myself. Trying to learn something new every day or increase my productivity by fine-tuning my daily routine. During almost two years of freelancing I constantly searched for ways to improve myself and the way I work. Then a couple of days ago I realized something. Most of the time I was trying to find life “hacks” to be more productive, to increase my skills and to be happier at the same time. Why not share my findings with you?

Today I’m going to share my best 10 tips on how to be productive and reach your daily goals. Maybe not all of my advice will work for you, and you certainly need to find out on your own what works for you, but it’s worth a try!

1. Wake Up Early

I’m waking up at 6:15 every morning. I’ve attempted to wake up around 5, then around 7 and I found out that the best time for me is 6 – 6:15. To compensate for that, I’m going to sleep at 22:30 and my sleep time is almost 8 hours, which is enough to relax and rest. Plus I discovered that I can do 50% of my daily job when people are still sleeping and nothing is going on social media. If you want to learn more about sleep habits check this article about 21 Sleep Habits of World Famous Entrepreneurs.

2. Find Productive & Unproductive Time

Again, it’s really good when you know your productive and unproductive hours. For example, I’m productive from 7 to 11 and 16 to 19. During that time I’m trying to finish my primary tasks. And during my unproductive hours I’m doing low priority or low effort tasks or just read, play Xbox or meet up with friends.

3. 50:10 Technique

I guess we all know about Pomodoro technique. You are working for 25 minutes then taking a break for 5 minutes and then the cycle repeats. The 50:10 technique is basically the same, only you work for 50 minutes and then take  a break for 10 minutes. The reason behind this is that most of the time 25 minutes is not enough to finish my tasks. And those 5 minutes can unbalance me from working mode, so it’s better to finish my tasks and enjoy a longer break later on.

4. Do Sport

Sport is one of the main things that  helps me to stay active and productive. If I’m going to the gym at the first part of the day, it makes me focused and productive for the rest of the day.  I’m also feeling and looking better and my self-confidence has increased, which is very important too. An active lifestyle can change many things, that’s why I cannot imagine my life without it.

“Exercise improves attention, memory, accuracy, and how quickly you process information, all of which helps you make smarter decisions” – Charles H. Hillman

5. Listen to Podcasts

I believe in constant self-improvement and strive to become a better person every day. One of the ways to reach that goal is to listen to podcasts. There are hundreds of different topics you can choose and listen while doing sports, work or in public transport during your work commute. If you don’t know where to start, check out my article on this topic – Top Design And Business Podcasts For Creative Entrepreneurs.

6. Four Day Work Week

If I’m working from home, why do I need to follow the rules invented for the 9 to 5 office jobs?  I don’t really and neither do you. I’m already trying to work only on Monday, Tuesday, Thursday, and Friday. On Wednesday, I’m spending my time on meetings, reading or just chilling. It’s easy to make it work for you if your other days are well planned and you stay at the top of your productivity. Try to take a day off in the middle of the week, it will also help you to productive and sharp until the end of the week.

7. Prepare The Day Before

I have a habit to prepare for the next day. At the end of my working day, I’m always making a small plan for the day ahead. In the morning, I don’t have to prepare my plan and wonder what I’m going to do today or what should I focus on right now. I just open the laptop and do the job. Try it! It works.

8. Use The Right Tools

When you are working with the right toolkit, technology can make any person more efficient. All the project and content management systems, collaboration platforms, and a number of automation tools make our jobs easier. If you don’t know many tools, you can spend 15 minutes every day to check for latest tools. The right tool might save you hours of work.

9. All Meetings in 1 Day

According to Fast Company, an average office worker averages about 16 hours a week sitting in meetings.

I’m also spending a lot of time on meetings. When you’re young and passionate, you’re always creating some new projects and meetings are part of the business. I’m not spending 16 hours per week on meetings, but it might be 6 – 9 hours per week. For me, it’s hard to focus on work before the meeting or right after it. So I’m trying to hold all the meetings in one day to stay productive during my work hours.

10. Eliminate multitasking

We all like to do couple of things at the same time. Check mobile phone, read email or Facebook. How can we truly focus efficiently and creatively with so many things asking for our attention? Maybe some people can do it, but as I found out for myself – I can’t. My guess is you can’t do that either. So do yourself a favour and focus on one job at a time.


Collection of Fresh Design Freebies – November Edition

We are ready to close the autumn season that was full of enjoyable surprises and helpful resources.The last month has bestowed us with some valuable generators, solid frameworks and, of course, a ton of carefully designed UI components and templates that are inspired by material design and flat style. They follow modern requirements and work well with responsive and mobile friendly projects. So let’s take a look.

Freebies for Designers and Developers

Gridle is a modern modular system that is driven by SCSS. It is a viable solution for creating reliable websites with a flexible structure. From huge two-column to insanely 33-column layout, it enables you to build interfaces of varying complexity.



Vue.js is a compact and lightweight library of components that has no dependency. Choose from a wide variety of items and features such as grids, tables, graphs, and others to quickly construct a UI for an app.


The Pattern Library

The Pattern Library is tailored to enrich website designs with fascinating, matchless and exquisite backgrounds. It displays random patterns from various categories that can be freely downloaded.

The Pattern Library


CSSgram aims to make your photos look vibrant, original and professional. This small yet powerful library lets you mimic Instagram filters through skillfully using CSS filters and blend modes.



Scooter offers a reliable and streamlined way of prototyping projects for Dropbox. It is an SCSS framework that has all the essential elements as well as styles to meet current requirements of the platform.



Legofy is a little Python program that transforms boring images into lego-inspired masterpieces with a high-tech vibe and a note of childish playfulness. You can use any static image or gif.



img2CSS claims to be CPU heavy and resource consuming. However, it has enormous potential. It converts basic images into pure CSS versions. Just drop an image into a box and use the resulting code snippet wherever you need to.



NavNav is an online collection of different types of navigation. Here you will find a bulk of code snippets and tutorials that get the most out of HTML, CSS, and JavaScript in order to create the main menu. It is broken into several categories such as drop down, off-canvas, full-screen overlay and others.


Bootstrap Carousel

Bootstrap Carousel is a helpful generator available both for Windows and Mac users. It creates responsive image sliders that have an elegant and refined appearance and sleek transitions. It is based on a Bootstrap boilerplate so that it goes perfectly well with projects driven by this framework.

Bootstrap Carousel


EasyHTML5Video is a conversion tool that enables multimedia to work on various browsers and platforms. It quickly transforms any video format into an HTML5-based one, giving you an opportunity to show it to users whose devices do not have the support of Flash technologies.


Shopper Responsive WooCommerce Theme

Shopper Responsive WooCommerce is a clean and neat WordPress theme that has the option of an e-store. It is flexible and mobile-friendly. Grid structure displays lots of images without overwhelming potential customers.

Shopper Responsive WooCommerce Theme

iOS 9 UI Kit

iOS 9 UI Kit is a super massive selection of assorted components that are inherent to devices powered by the latest version of iOS. The artist has done a huge job, professionally crafting such elements as:

  • navigation;
  • system screens;
  • notifications;
  • keyboards;
  • modals;
  • pickers and much more.

iOS 9 UI Kit

Free PSD Stark UI Kit

Stark UI Kit by Baianat comes with more than two hundred integral components and more than ninety elements that cover ten categories. Each item has a clean design with sharp graphics and contemporary appeal. It is also made with Arabic languages in mind.

Free PSD Stark UI Kit

Vonn Material Design UI Kit

Vonn Material Design UI Kit Freebie boasts of a gorgeous vibrant color scheme, lots of fresh air, tiny yet intuitive icons and neatly designed graphics. The set comprises several mobile screens including notifications, list view, and others.

Vonn Material Design UI Kit Freebie

iPad Dashboard PSD

iPad Dashboard PSD by Creative Boxx is a sleek and refined theme of a backend. It features vibrant charts, subtle graphs, navigation sidebar, control center and some data boxes.

iPad Dashboard PSD

450+ Simple Oultine Icons

The package offers a ton of pixel-perfect and delicate line style glyphs that can be used in different projects. From creating weather widgets for the app and ending with markers for enriching Google maps in the contact section, here you can find lots of interesting stuff.

450+ Simple Oultine Icons

Office And Business Icon Pack

This set of tiny circular illustrations is delivered in six standard formats: AI, EPS, PSD, PDF, PNG, SVG. There are more than ninety glyphs that have a businesslike feeling.

Office and Business Icon Pack

Responsive eCommerce Icon Set

This Responsive eCommerce Icon Set is an ideal option for those UIs that need to look consistent and elegant across various devices. Each item nicely adapts to screen size and looks sharp and legible.

Responsive eCommerce Icon Set

Web Resume Template

Web resume template by Nasir Uddin and Eftakher Alam is a starting point for all newbies. If you want to establish yourself online or win over clients through email, then you should give this carefully crafted CV theme a try. It has everything you may need to express yourself as a specialist.

Web Resume Template

My Desk Mockup

My Desk Mockup is a package of highly realistic renderings that can be used for displaying a UI in a natural environment or for creating popular hero images. It counts more than fifty elements from tiny ones (keys, pencils, or USB drive) to big ones such as Apple devices.

My Desk Mockup


Although autumn is coming to an end, as we all know when one door closes another one opens. So let’s wait for the most whitish, cold and snowy season of the year. It always hides numerous presents. The more so it has two big holidays that inspire creative folks on producing and giving away lots of helpful and incredible stuff.


20 Free Christmas Icons Set (AI, EPS, SVG, PNG)

The Christmas season is around the corner, to celebrate this festive holiday season we are sharing this amazing free Christmas icons pack. This gorgeous vector icon set contains 20 beautiful icons in AI, EPS, SVG, PNG formats and will be the ideal choice for your Christmas themed designs and projects. These vector icons can be used in web designs, graphic designs, app designs and in various forms of print media such as greeting cards, posters and brochures.

christmas icon

2.Free Christmas Icons



Best of: 25 Great WordPress Themes for Bloggers

The WordPress community is huge, there are more than 70 million websites powered by WordPress. We easily can say that WordPress rules the web. Blogging has enormously evolved in the last decade, absolutely everyone now can easily start a blog and create content, whether it is video, images, text or even a photos. There are few simples steps, buy domain and hosting and choose a theme. And the last one is the biggest challenge.

If your still wanting to create your new blog or wondering which theme to choose, check my list of 25 premium WordPress themes for bloggers.

Hello World

Hello World is a simple but high quality WordPress blog theme. From WordPress beginners to experts, it’s made for everyone who wants a simply beautiful blog.


The Beverly Theme is ready for an editorial or magazine site that covers topics ranging from lifestyle to beauty to motherhood.

Clean & Simple

Simple and Clean is Theme Fashions signature look. It represents the modern and chic approach we take in all our design creations.


Matchstick is a beautifully simple, masonry blog theme that’ll impress your readers and make your blogger friends jealous.


Geneva is a responsive, single-channel WordPress theme that gives you thorough control over the presentation of your images and makes it easy to play with the whitespace around your work.


Enamored is a simple and easy to customize WordPress blog theme. From WordPress beginners to experts, it’s made for everyone who wants a simply beautiful blog.


Editor puts bold and beautiful publishing right at your fingertips with comfortable, legible typography and large featured images.


Gratify is a responsive WordPress Theme handcrafted for the busy blogger but it’s very easy to setup and boast highly features.


Deborah is a simple and modern WordPress theme, carefully designed to meet your requirements.


Simple is a crafted to provide easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.

The Anna Grace

The Anna Grace is a sweet and simple theme boasts a fully-loaded dashboard on the back-end so you can make customizations galore.


Pocket highlights your writing with beautiful, expressive Featured Images, abundant white space, and bold typography.


Olivie Theme designed for fashion, beauty and lifestyle bloggers. This stylish theme comes with newsletter subscription section under slider.


Sublime is a stylish & simple Pre-made WordPress theme from indie studio. best for fashion,creative, journalist and everyday bloggers.


MasterPiece personal WordPress blog theme is the best way to show yourself and your opinions.


Anastasia is beautiful designed, easy reading and navigation with minimal resizing, panning, and scrolling across a wide range of devices.


Dreamer is an amazing responsive wordpress theme perfect for minimalist style lovers. It’s simple and elegant, great for Bloggers.

Ellen Sue

Ellen Sue theme is a great option for writers or bloggers to express yourself and share your knowledge or experience.


Artista is a simple yet stylish WordPress theme based on the Genesis Framework. You can use this theme for your blog or website.


Suavis is a responsive and retina-ready WordPress theme crafted for bloggers and creatives. With a clean and intuitive design, as well as efficient code, Suavis is very easy to use and customize.


With loads of widgets, flexible templates, an option-filled blog layout, portfolio ready & more, Blooog isn’t just your average WordPress theme.


Camille is a minimal and modern design are perfect for personal and business blogs.


Versed is a theme built for a better reading experience—designed with magazine blogs, podcasters, and solo bloggers in mind.


Flatwhite is perfect for Food and Lifestyle bloggers. It has an amazing and useful customize panel which allow you to change fonts, colors, sizes, etc.


Artist is a stylish & simple Pre-made WordPress theme from indie studio. best for fashion,creative, journalist and everyday bloggers


10 JavaScript SVG Animation Libraries

SVG animations can get a little complicated, but these libraries make it extremely simple for anyone to add animation to their site. In this post i’ve collected 10 Javascript SVG animation libraries that allow you to create some really impressive animations that can literally take your animations and UIs to the next level.

jQuery DrawSVG

Lightweight, simple to use jQuery plugin to animate SVG paths.

jQuery DrawSVG


Vivus is a lightweight JavaScript class that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.


Animation Engine for Vector Graphic

Enliven ’em is a jQuery plugin which lets you animate any vector graphic presented as SVG files in many different ways when your vector illustrations become visible in a user’s browser viewport. Also you can allow an animation to be repeated when user click or tap your graphic.

Animation Engine for Vector Graphic

Lazy Line Painter

A jQuery plugin for path animation using the CSS.

lazy line painter


Trigons is a flexible JS script which lets you create modern and stylish abstract SVG images with optional animations. Trigons script is coded as plugin for d3.js library ( and it uses d3’s build-in method of Delaunay triangulation for creating colored and animated abstract images. No jQuery needed.


A little JavaScript class (without dependencies) to draw and animate SVG path strokes.



Trigons is a flexible JS script which lets you create modern and stylish abstract SVG images with optional animations. Trigons script is coded as plugin for d3.js library ( and it uses d3’s build-in method of Delaunay triangulation for creating colored and animated abstract images. No jQuery needed.



A lightweight library for manipulating and animating SVG. Svg.js has no dependencies and aims to be as small as possible.


Animate Plus

Animate Plus is a CSS and SVG animation library for modern browsers. Animate Plus is performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.

Animate Plus


An easy way to animate SVG elements.



Wheel navigation JavaScript library built on SVG . It can be tab navigation, pie menu, sub menu and more



Freebies for designers – Week 46

Howdy mates! we’ve brought this load of fresh and crisp resources for you to go all over it and take home to let your creativity explode at its maximum expression! Check out this month’s round-up and you’ll find stacks of amazing photorealistic mockups for showcasing, identity, and branding, material screens, and UI kits, emailing templates, Halloween special-of-the-month Super Pack, printing templates for personal or corporate identity, multiple styles of icons, an awesome font collection, and several PSD templates, don’t wait any longer and grab it all to yourself! Enjoy :)

A Halloween Vector Super Pack: Icons, Avatars, and Customizable Characters & Scenarios

A Halloween Vector Super Pack: Icons, Avatars and Customizable Characters & Scenarios

Line Kitchen Related Ai Icons

Line Kitchen Related Ai Icons

Inkallicons: Ink Line Style Vector Icons

Inkallicons: Ink Line Style Vector Icons

170 Miscellaneous Line Icons Set

170 Miscellaneous Line Icons Set

10 Material Design Avatars Set

10 Material Design Avatars Set

20 Free Print Templates for Advertising Tri-folds

20 Free Print Templates for Advertising Tri-folds

Apple Watch PSD Vector Mockup

Apple Watch PSD Vector Mockup

Material Design Mobile Screens Set

Material Design Mobile Screens Set

Colorful Avatar Cartoon Faces Set

Colorful Avatar Cartoon Faces Set

Clean Resume & Business Card Template

Clean Resume & Business Card Template

Outdoor Signs and Facades PSD Mockups

Outdoor Signs and Facades PSD Mockups

Vintage Motel Sign Mockups Set

Vintage Motel Sign Mockups Set

The Passion: HTML & PSD Email Template

​The Passion: HTML & PSD Email Template

My Desk: 50 Desktop Elements Mockup Set

My Desk: 50 Desktop Elements Mockup Set

10 T-Shirt Mockups Set

10 T-Shirt Mockups Set

Fancy: Neat Black & White Folder Template

Fancy: Neat Black & White Folder Template

Devious: Tail-decorated Uppercase Font

Devious: Tail-decorated Uppercase Font

Anson: Aircraft-inspired Sans Serif Font

Anson: Aircraft-inspired Sans Serif Font

Debby: Nice Cursive Handwritten Font

Debby: Nice Cursive Hand-written Font

Photographer Website PSD Template

Photographer Website PSD Template

Joby: Job Finder Landing Page Template

Joby: Job Finder Landing Page Template

Sevenmag: Magazine One-page PSD Template

Sevenmag: Magazine One-page PSD Template

A Curated List of 80 Modern Fonts

A Curated List of 80 Modern Fonts

This post Freebies for designers – A very spooky halloween was written by jp and first appearedon Inspired Magazine.

Inspired Magazine


15 Handy Tools for Smooth Web Development

We’re not ones to adhere to stereotypes, but it’s probably been a while since a (stereo) typical web developer shaved his damn beard, or changed his clothes, or took a bath, or shaved that damn beard…

15 Handy Tools for Smooth Web Development

You really can’t blame them. It’s been a while since all developers took a breather. 2015 has been a good year with leaps and bounds of advancements in web development tech, but no more can a developer just break out his Laptop/MAC (like a boss) and code for a platform at his leisure.

Now you’ve got to take care of the responsive design with multi-platform support, HTML5, PHP7 set for release a bit further on in the year, browsers like IE that won’t stop bugging everything up …the gradually growing-to-Matrix-like-levels of Internet of Things itself.

It’s all we developers can do to keep up. But we do, due mostly to these nifty tools.

Take a look.

1. Komodo Edit

Komodo Edit

Everything’s born from code for a developer, so it’s only natural to start with the best editing tool you can find. Komodo Edit is quite kosher for all that and more. It is a nice cross-platform, multi-language text-editor for you to write and edit your code in. Oh, and it’s free.

The tool works on Windows, Mac, Linux/UNIX, so no sweat there. We also like it for its auto code-completion feature for languages like HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (for the 5 or so people in the world), etc. That’s one smart text-editor.

Bonus points for added convenience of Project Manager feature for organizing and keeping track of files.

2. CSS 3.0 Maker

CSS 3.0 Maker

Let’s be honest, despite everything you love about CSS3, you can’t help but hate it a little when it comes to writing syntax for things like rounded damned edges. It’s such a trivial detail to lose your sleep over, but you do anyway. You can’t memorize more than 100 new properties and their respective prefixes. So, thank the Lord for a tool like CSS 3.0 Maker.

This neat little online tool will let you copy and paste tricky code into your style sheet. It generates code for style details like box radii, gradients, text and box shadows, transforms, transitions and rotations of your choice. It will also show which desktop and mobile browsers support those style properties. A little preview area will show the effect, the code can be copied from the view box or downloaded within an HTML file.

For those of us who can’t devote far-too-much time on seemingly banal style details, this tool is a life saver.

3. –prefix-free


“Break free from CSS prefix hell!” – Prefix-free intro page.

This is a no-nonsense tool, brought to deliver us from ‘prefix hell’ by an angel named Lea Verou of Github. It will add vendor prefix (somewhere you can’t see) to style sheets in <link> or <style> elements. Also: You won’t have to worry about new <link> or <style> elements, jQuery’s .css() prefixes, or any changes you make, ’cause it will cover it all.

What’s not to like?

4. Blokk Font

Blokk Font

‘Lorem Ipsum’ has been the go-to placeholder text for far-too-long. Fortunately, we now have Blokk: The font to put the ‘pain’ of incomprehensible Latin to a screaming halt.

Blokk gives you block ‘text’ to be used as placeholder while creating mockups and wireframes. It also goes without saying that it won’t confuse the less, uh, web-enlightened clients during presentations.

5. Fontello


Before icon fonts became a thing, developers had to enlist the help of designers to create scalable icons. The time it took to develop them (which, by the way, includes creating, extracting, implementing, and customizing) bordered on ‘absolutely ridiculous’. But then someone turned icons into fonts and everyone lived happily… for the foreseeable future.

Fontello is a great icon font generator. It’ll let you take your pick from thousands of icons, customize their mapping or edit their names, and compile them in a single font file. It’s amazing and it’s free.

We can’t thank Vitaly Puzrin enough.

6. Typetester


Turn on your browser’s JavaScript and start testing what your chosen typeface will look like on an actual site.

Typetester is uncomplicated. It lets you enter and compare different fonts and test their appearance. You can also play around with size, tracking, color, etc. until you get what you want. You can compare up to 36 different typefaces at once. Imagine the amount of time you can save with that.

It’s pretty cool.

7. Dirty Markup

Dirty Markup

Coding can be slightly tiring sometimes, but code-cleaning exists on Level: Utter Tedium. It is necessary though, if you want to prevent errors and load faster.

Dirty Markup helps save the time you can otherwise spend pursuing more interesting activities (bacon sandwich, anyone?). This one comes with combined capabilities of other single-syntax cleaning tools. We’re talking HTML Tidy, CSS Tidy, JS Beautify, and Ace Editor. That’s one comprehensive cleaner.

It’s a web based app for cleaning and formatting your HTML, CSS, and JavaScript. We can’t possibly ask for more.

8. BugHerd


You might just become a bug-killing vigilante with this powerful tool.

BugHerd follows the age-old adage of ‘Keep it Short and Simple, Stupid”. It can capture client-feedback, resolve minor issues by itself, track bugs (for you to exterminate). It’ll also play Secretary and manage your projects.

A super-easy point-and-click UI on your site lets your users report issues. BugHerd turns them into reports with all the information you could need (like user’s browser version). It’s easy to set up, fun to use, and has features like automatic screenshots (browser extension), direct links, file attachments, full selector data, and discussions.

At $ 29/month standard subscription, that’s a catch.

9. Screenfly


Responsive Web Design is more than a new fad, in that it’s here to stay. But for now, you will find fluid layouts tricky at best. You will also find yourself worked up to a violent rage trying to test your layout on various screen sizes.

Fortunately, Screenfly is a nice little web-app that will test your @media queries for you. You plug in your URL and it’ll show how your queries handle device dimensions you’re clicking through in the top panel.

It doesn’t factor in the rendering difference between browsers, but you can use Browser Shots for that. Otherwise, it’s a simple, beautifully assembled way to see how your site looks on different resolutions.

10. Foundation


Since we’re talking RWD, we might as well start talking frameworks to develop it.

The internet debate rages on over which front-end framework is better: Bootstrap or Foundation? You can use one or the other. But Foundation is slightly more to the fore when it comes to grid systems, proportional units for designing (although Bootstrap 4.0 Alpha has moved to em and rem units), right-to-left support, pricing tables, tours, and off-canvas navigation.

It’s obvious we prefer Foundation. It works with SASS and CSS, is full of a whole band of features and generally more convenient and flexible.

We agree with Zurb on this: It is ‘crazy fast’.

11. Adobe Edge

Adobe Edge

After a decade of software that put design before code, Adobe finally gives the coders an Edge.

This frankly amazing array of tools and services is made keeping the new front-end coding trends in mind. They’ve got us quite a treat. Edge Animate to help coders create animation while simultaneously eradicating all traces of Flash. Sorry Adobe, Flash was great. But Animate uses standard HTML and JavaScript, and you know, one-size-fits-all…

There’s Edge Code for editing CSS from within an HTML document. Inspect consolidates browser test and device compatibility tests for responsive design, and synchs them all for super-fast updating/customization. The immensely popular Typekit is now a part of Edge family. Reflow is yet to release, but it will probably blow other front end CSS grid makers out of the water. And there’s still more.

We know. We had to pick our jaws off the floor too.

12. Vagrant


Vagrant is so much more than virtual development software.

This beauty allows you to create portable, easily reproducible work environments. It consolidates the virtualization software, server base box, and configuration tools in one powerful package. Basically, you no-longer have to have VirtualBox + Ubuntu + Chef. Vagrant will do the job of all three and take up less space while doing it. Power-users will also tell you how it allows you to set-up multi-VM networks easily.

It’s written in Ruby, but will work for PHP, Java, JavaScript, Python, and C#. You can work with Vagrant on Windows, Mac OSX, Linux, and FreeBSD.

It’s super-fast because it has none of the U-friendly-I going for it that looks nice but takes up much-needed space. It works well as a testing environment for developers.

That’s as close to the Holy Grail as we can get.

13. PageSpeed Insights

PageSpeed Insights

Google’s PageSpeed Insights does exactly-what-it-says-on-the-tin. It gives you insights on your Page’s front-end performance. That’s going to be an eye-opener for many high-and-mighty developers out there. So have a chortle-fest and begin the accelerated-balding from all the hair that’s going to be pulled.

All it does is measure elapsed time between: request and above-the-fold content rendering, and request and full-page rendering.

It will check the network-independent aspects to calculate how your page performs: server configuration, HTML structure, JavaScript, CSS, and images.

It’s razor-sharp and mercilessly fast; so it definitely will hurt your feelings and quite possibly make you cry if you score low. It will also try to make up for it by giving you pointed suggestions to improve your performance, like a condescending parent.

And we love it.

14. Git


Most modern developers are already familiar with it. That’s how you explain the existence of communities like GitHub after all.

Git is an open-source revision control and source code management system that keeps track of your project history in a repository. It’s basically an uber-fast, super-efficient PA.

It allows you to experiment freely without fear of messing everything up for all time. You can also create multiple repositories and use branching/merging to work with individual features. It’s a particularly useful tool for collaborative efforts.

It’s fully distributed, so you won’t have to fear no-net-nightmare when you’re offline (by design or accident). You can simply add the updates in your main repository, which will be waiting for you patiently back online.

15. W3C Markup Validation

W3C Markup Validation

This is the final rite of passage.

W3C Markup Validation is pretty straightforward and necessary. As W3C puts it, validation can: help you debug, future-proof your site (browsers are built on W3C standards), and help in maintenance.

It also teaches you how to be standard compliant by showing you the ‘errors’ of your ways.

Markup Validation shouldn’t be thought of as repressive, because really, it isn’t. It will help you learn how to write better code…

Like a pro.

Bottom Line

There are, of course, more tools, plugins, add-ons, and resources and communities in general that make developing…well not exactly easier, but less of a pain. And more are being developed right now. There’s Firebug add-on for Firefox that will let you monitor and edit HTML, CSS, and JavaScript, live. PixelDropr is a Photoshop add-on that will let you create adorable buttons and icons for your site with minimal hassle.

Every professional developer eventually has his/her own ‘tool kit’ of apps and software they rely upon to work faster and more efficiently. Some are free, some we have to pay for.

But then, who can put a price on convenience?

Visit us at




The Top 25 Free Minimalist WordPress Themes

First impressions are lasting impressions. Whether you realize it or not. Sites that rely heavily on photography and typography for their style cues tend to create a strong and lasting impression upon visitors. Whilst many trends and techniques soon become outdated, minimalist web design principles are being successfully applied to all sorts of different websites. It looks like this one is here to stay.

So if you’re looking to jump start your blog, portfolio or business website for the upcoming new year, here top 25 free minimalist WordPress themes. I can bet right away that you’ll find it tough to ignore any of these themes as they are extremely simple in looks and faster in operation.


Fukasawa is a minimal masonry style blog theme for photographers and collectors.


Download Theme


Apex is a sophisticated, minimalist theme. It looks great and performs wonderfully on phones, tablets, laptops, and everything in between. As a fast, responsive, accessibility-ready, and translation-ready theme, Apex is a theme you can trust to present your content to the world.


Download Theme


Gridsby is a pinterest style gallery theme which is a simple way to showcase a beautiful photo collection. Gridsby is responsive and retina ready, and includes an easy method for posting photos to a front page gallery.


Download Theme


A bold, beautiful, and responsive theme. Tracks is perfect for personal blogs, magazines, and photography websites. It includes a logo uploader, social media icons, search bar, comment display controls, premium layouts and features, and more.


Download Theme


Modern is responsive, retina-ready blog and portfolio WordPress theme. It’s perfect for personal and small business portfolios.


Download Theme


A minimalistic square theme.


Download Theme

GK Portfolio

If you’re a photographer, designer or creative blogger, you know how much of an impact strong visuals can have. It’s not enough to just write about your skills, or talk about what works in design; it has to be seen to be understood. With the clean, elegant design offered by this free Portfolio WordPress theme that puts all the emphasis on your creative work, you can craft an alluring, attractive and relaxed website that echoes the qualities that you put into your writing and images.

GK Portfolio

Download Theme


Hoffman is a beautifully minimal, responsive and retina-ready theme for bloggers. It features a social icon menu, Jetpack support for infinite scroll, five custom widgets, two page templates, editor styling, translation-ready code, custom accent color support, custom background support, support for the gallery post format and much more.


Download Theme


A minimal, modern theme, designed to be mobile first and fully responsive, Decode features the ability to change all the colors in the theme and an elegant sidebar conveniently accessed by tapping on the menu icon.


Download Theme


A beautiful and minimal theme for personal blogs. Kouki is meant for publishers who like to display their content in a delightful and minimal way. Ideal for food blogs, photographers, minimalists, tumble logs and everyone else who likes an unobstrusive WordPress theme. Non-mandatory theme options help you to individualize the theme. Change colors, choose fonts from the Google libary and add social icons. The theme is responsive and looks good on small devices.


Download Theme


Graphy is a WordPress theme for blogs that are designed to have beautiful typography. It is developed using mobile-first responsive design, ensuring that your blog will be no less beautiful when viewed on a smartphone or tablet.


Download Theme


Adler is a personal blogging theme for sharing your own thoughts and write about your latest findings!


Download Theme


A clean, responsive portfolio theme with options for a custom site logo, a featured content slider, and lots of room to share your work.


Download Theme


A stylish, classic look for your personal blog or long-form writing site. The main navigation bar stays fixed to the top while your visitors read, keeping your most important content at hand, while three footer widget areas give your secondary content a comfortable home.


Download Theme


A clean, responsive theme for long-form writing, with bold featured images, fancy image captions and pull quotes, and plenty of space for your content to shine. A slide-out sidebar provides ready access to all your secondary content, including social links, custom menu, and widgets.


Download Theme

Amalie Lite

“Amalie Lite” is a feature rich, uniquely designed free blogging theme built upon the free “Twenty Fifteen” WordPress theme. Responsive grid is a standard these days and “Amalie” makes a good use of it to preserve its unique looks across the whole range of internet capable devices.

Amalie Lite

Download Theme


Crawford is a responsive minimalist theme designed for writers.


Download Theme


Ryu is a clutter-free theme for personal bloggers. It has great readability with a large font size, and the one-column layout is perfect for displaying large images. Optional widgets are located at the top panel with social media links and a search field. Background color for an image post will automatically match the uploaded image in the post.


Download Theme


tdPersona is a responsive WordPress theme with a clean, simple and elegant design. Perfect theme for any bloggers.


Download Theme


Chosen is a bold and minimalist theme for publishers who want to get their visitors’ attention and keep it. Present your best content in a clean, uncluttered fashion on phones, tablets, and desktop computers with Chosen.


Download Theme


Responsive full screen theme for bloggers. The choice of color, background image, custom header images and other settings using the WordPress Customizer with a live preview.


Download Theme

RokoPhoto Lite

RokoPhoto Lite is an elegant WordPress theme for photographers, writers, and bloggers. This design focuses on your content and is perfect for an elegant blog site.

RokoPhoto Lite

Download Theme


Garfunkel is a stylish and responsive Pinterest-style theme with Masonry layout. It features responsive and retina-ready design, support for six post formats (including a gallery slideshow), six custom widgets, two page templates, Jetpack Infinite Scroll support, editor styling and translation-ready code.


Download Theme

Jkreativ Lite

Jkreativ Lite is 100% Responsive also featured masonry blog layout. This themes is retina ready so your themes will seems perfect on every modern device and cross browser compatibility.

Jkreativ Lite

Download Theme


Libretto is a responsive one-column theme with classic styling and careful typographic details. It’s ideally suited to showcasing longform writing interspersed with beautiful images and inspiring quotes.


Simple to Use jQuery Plugin to Animate SVG Paths

jQuery DrawSVG uses the jQuery built-in animation engine to transition the stroke on every inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. It weights less than 2KB minified and 800 bytes gzipped. It’s easy to use with easing and stagger support. Best of all, it’s completely Free!


Requirements: jQuery Framework
License: MIT License


Why Responsive Web Design is a Small Business Must Have

Technology is advancing on a daily basis, and more and more people are using their smartphones to browse online rather than their PCs or laptops. Tablets have become much more streamlined than heavy laptops, and users can access everything they need from wherever they are. If you run a small business you should be very aware that potential customers are looking at your website for information from their mobile phones.

In fact recent studies show that over 80% of the population search for local businesses on their mobile phones. This article outlines why responsive web design is a small business must have.

What is Responsive Web Design?

Responsive web design is the way the website is built to respond to different screen sizes. A responsive website will adjust its content, images, and call to action features depending on how it’s viewed. For example a responsive website will optimise the text size and image size when viewed on a mobile phone to make it easier for people to read. It allows users to view a website easily without having to zoom in and out. This can make website browsing a much more enjoyable experience for potential customers and clients.

What Are the Benefits of Responsive Web Design?

In 2014 mobile internet usage took over desktop usage so it’s quite obvious that any business who generates potential sales from their website, needs to make their website friendly for mobile users. The main benefit is that users who have a better browsing experience are more likely to visit your business, and visit your website again. If your website is not mobile friendly you may find your potential customers may click off the page and go straight to your competitor’s website instead.

Responsive websites are quick to load, and since 16% of mobile users will click off a website if it takes too long to load, this can be an incredibly important benefit. Google has also announced that they offer preference to mobile optimised websites. They now show up in the mobile search results as a priority over non responsive websites.

The Future is Responsive

If you are still not convinced that you need a responsive website then you may want to take a look at the facts and figures. Over 61% of adults now own a smartphone and that number is going up by the day. The speed of mobile internet is increasing each and every year making it more and more accessible for people to search via their mobiles. Android and iPhone are now releasing smart watches and smart TVs so there is no limit to how and where your website may be viewed.

From these statistics it’s very clear that the future of business is increasing with the use of tablets and smartphones. Simply having a website that’s only accessible on desktop screens is not enough to keep up. So the second after you have purchased your hosting from, your next step should be to choose a responsive theme or hire a designer skilled in responsive design. Don’t let your small business fall behind.



Best Web Apps and Tips to Improve a Design’s Team Productivity

A design team can markedly improve its productivity, and the quality of its web and mobile designs, by following time-tested productivity guidelines and by taking advantage of what the best web apps on the market have to offer.

Some of the apps described here cover web design, prototyping, and project management. Several focus solely on project management, and for a few the main focus is almost entirely on real-time collaboration. All of these apps are productivity enhancers, and when they are used in conjunction with time-tested productivity tips, such as those outlined here, they are well worth investing in.

Three Tips to Help You do Better

  • Observe and Improve – Do more than just work at your tasks. Observe what you are doing. Note how long certain tasks take, and give some thought as to how you might do them in the same time while improving quality. Make continual improvement an objective each day and every day,
  • Start with the Most Difficult Tasks – To put things off all too often results in wasted time, and when you start with the easy tasks it can be difficult to gain momentum. Finishing a difficult task up front not only gets it out of the way, but doing so can be a morale booster. The easy tasks suddenly seem easier, and they take less time, resulting in increased productivity.
  • Make the Most of Your Time –Time boxing is a great way to make the most of your time. This practice helps you stay focused throughout the day. It involves working in increments, and taking short breaks between work sessions. The Pomodoro technique for example, recommends 25-minute work sessions, each followed by a 5-minute break. Following the preceding two tips will also help you make the most of your time.

Make a habit of following these tips until they become second nature, which should not take long. Keep them in mind while we move on to several of the best productivity-enhancing tools on the market.


Pidoco is a superior way to wireframe. Companies in more than 50 countries place their trust in this premium app. Project managers and designers who use this tool will not have to worry about downloads or installing the latest updates since everything is done online.

Since Pidoco is web based, you can access it from any place. You can work with team members and clients in real-time thanks to Pidoco’s easy-to-use collaboration features that include issue tracking, versioning, and commenting tools. More than four hundred UI elements and icons are among this app’s design features as are mouse, keyboard, and touch interactions and screen transitions. Users can create reusable custom templates, and your team can build highly interactive prototypes without a need for coding.

Which of the four plans you choose will depend on the number of projects you work with at a given time. Sign up for free, and take advantage of Pidoco’s free trial offer to see which of the plans will best suit your team’s needs. 

If your goal is to create a high-fidelity, fully interactive prototype that will perform exactly how you want the finished app to perform, provides an ideal solution. With this web app, your team can take static designs, wireframes, and mockups to the next level. As you would expect from a premium design tool, combines everything needed to create beautiful, animated, fully-interactive prototypes. Design features include a selection of built-in UI libraries, multiple mouse and touch events, and the ability to animate anything that appears on your screen, including animation sequences or loops.


Azendoo will give team collaboration activities a definite boost. This management tool effectively integrates with most of today’s popular design tools. With Azendoo in your toolkit, you can sync into Dropbox, Evernote, Facebook, Mailchimp, Google Calendar, and countless other applications, with the objective of delivering your projects on time. It’s time to stop working at working or focusing on deadline issues, and let Azendoo help you focus your attention on that which is most important of all – your design.

Marketing teams, design teams, and design agencies love using this web app, and you can use it to keep your clients well informed and in the loop. If you are looking for a task management app that makes a difference, giving Azendoo’s free Starter Plan a try will be time well spent.


If you are looking for an online application that will enable you to create wireframes and mockup rapidly and with surprising ease, is an excellent choice. Better yet, this web app allows teams to collaborate in real time, easily coordinate changes, and exchange comments and feedback. Since Creately is a web-based application, team members and project managers alike can make decisions while away from the office. This web app brings a wealth of design aids and features to the table as well. Give the free trial version a try. You won’t be disappointed.


There’s little need for a project manager to be constantly peering over the design team’s shoulders when Paymo is on the job. This task management app does the work of tracking project performance, so there is no need to constantly interrupt design work to see where everyone on the team is at. Paymo closely tracks expenses and costs, while taking care of time tracking and invoicing. It has a global outreach as well. It can automate project management tasks in 18 languages.

Notism Collaboration

Notism offers a versatile combination of prototyping and communications capabilities. It is an ideal tool for designers looking for a capability to turn information presented on astatic screen into an interactive prototype – without programming. Design teams will like what Notism has to offer in the way of real-time sharing of comments, notifications, and team member feedback. Its task management features are also impressive, but most impressive of all is the video collaboration feature; a real time saver. Sign up for free, and give this highly useful web app a try.


MeisterTask may or may not make task management fun, but it will certainly make it easier. This intuitive collaboration and task management tool was made to order for project managers, and for design team members who have a need to follow other team members’ progress. Its project boards display the information needed to keep everyone on the same page, while its dashboard offers a particularly effective way of helping a project manager focus on what needs to be done over the course of a work day. MeisterTask can be used on any project, large or small, and by teams of any size.

Final remarks

While your ultimate choice will naturally be based on your needs, each of the web apps presented here has much to offer. These premium tools are the best in the business, so if you find one whose features match your needs you will not be disappointed. Visit the websites to find out more about those of particular interest. Take advantage of the free trials, especially if it will be your first experience with an online prototyping or task management tool. You may also discover new ways to improve your productivity and improve the quality of your results, and you will discover how you can work smarter, instead of working harder.


20 Essential Plugins for Sketch App

There are many things to love about Sketch, but one of its most loved features is that it makes it super-easy to create plugins, made possible by JSTalk, that will extend its functionality even further. And the great thing is that the ever-growing Sketch community is chock-full of plugins that you can freely download and use.

If you’re an experienced Sketch user, then the chances are you already use or know about these plugins, but if you’re new to Sketch, and not quite sure where to start, this post will have you up and running with the essential plugins in no time. And to help you even further, we’ve previously published a huge collection of UI kits and templates for Sketch that you can freely use as well.

Before you start downloading these plugins, you will need to install Sketch Toolbox, the plugin manager for Sketch that makes it super-simple to find, automatically download and install all of the below plugins, and many, many more.


CSSketch is a plugin that allows you to edit and quickly mockup your designs by attaching a stylesheet. Supports Less.



The Blade Plugin will automatically generate HTML from your designs.


Social Artboards

Social Artboards will add artboard presets of common social media image sizes.

Social Artboards sketch app

Sketch Data Studio

Sketch Data Studio is a time-saving plugin that will convert tables and charts by pulling data directly from a CSV file.

Sketch Data Studio

Day Player

Day Player will allow you to add placeholder images from some of the most popular services into any Sketch doc.

Day Player

Sketch Iconfont

Sketch Iconfont is a useful plugin that allows you to use icon fonts (like these) in your documents.

Sketch Iconfont

Export Assets

The Export Assets Sketch Plugin allows you to export assets for Android, iOS, Windows Phone in Sketch.

Pixel Perfecter

Pixel Perfecter will identify all pixel imperfect layers and show you a total count of them, allowing you to then fix them all at once.

Pixel Perfecter

Style Inventory

Style Inventory will give you an overview of all of the styles you have used and allows you to merge similiar ones together.

Style Inventory

Sharpen Images

Sharpen Images will easily add Unsharp Mask filters to image and shape layers with image fills in Sketch.

Sharpen Images

Generate GIF

Generate GIF is an awesome Sketch plugin that will generated animated GIFs from a sequence of artboards.

Dynamic Button

Dynamic Button allows you to create buttons with fixed paddings regardless of the number of text characters you use.

Lorem Ipsum

Lorem Ipsum is, as the name suggests, a plugin that will quickly create and add Lorem Ipsum generated text to your document.

Marvel Plugin

The Marvel Plugin will allow you to quickly create prototypes from your designs by sending your Sketch artboards directly to

Marvel Plugin sketch

Icon Stamper

Icon Stamper is a super-simple, yet really useful, plugin that will quickly create multiple sizes of iOS icons.

Icon Stamper

Content Generator

Content Generator will create dummy data such as avatars, names, geo location data, and much more.

Content Generator

Sketch Palettes

Sketch Palettes allows you to quickly and easily save and load colors into the color picker.

Sketch Palettes


The Measure Sketch Plugin for getting your designs just perfect.

Measure Sketch Plugin

Sketch Commands

Sketch Commands is a port of some of the awesome Orange Commands originally for Adobe Fireworks to


If you’re looking for something, in particular, to make your Sketch experience that little bit easier, or looking for something that will save you a little bit of time, you should take at the unofficial Sketch Plugin Directory, there are hundreds of plugins, for almost everything, freely available.

And if you feel I’ve missed any plugin that you deem essential, do let me know in the comments below.

Powered By | Full Text RSS Feed
Speckyboy Design Magazine


45 Clean and Minimal WordPress Themes

Although there are thousands of different WordPress themes available, finding the right one can be a challenge. Sometimes the best choice is a theme that features a clean design without unneeded design elements and distractions.

WordPress themes with a clean or minimalist design and layout are often easier to customize and use as a starting point, and they can also look great on their own without the need for customizations.

In this post we’ll showcase 45 different minimal WordPress themes that avoid excess in terms of design and style. Some are very minimal, and others use clean layouts.

Gallery Portfolio (Free)


Ares Responsive WordPress Theme (Free)


The Look ($ 59)


Minimal Multi Purpose ($ 59)

Minimal Multi Purpose

Hero ($ 59)


Hardy ($ 59)


Clean ($ 59)


Filtered ($ 49)


Reveal ($ 49)


Starting Up ($ 69)

Starting Up

Prologue ($ 69)


Divi ($ 69, includes access to 80+ themes)


Lucid ($ 69, includes access to 80+ themes)


Flexible ($ 69, includes access to 80+ themes)


Evolution ($ 69, includes access to 80+ themes)


Ambiance Pro ($ 99.95, includes Genesis framework)

Ambiance Pro

eleven40 Pro ($ 99.95, includes Genesis framework)

eleven40 Pro

X ($ 64)


Bigbang ($ 49)


GoodSpace ($ 49)


SmartStart WP ($ 49)

SmartStart WP

Purity ($ 59)


Aware ($ 49)


Daisho ($ 54)


Quantum ($ 44)


Omm ($ 49)


Greenwich Village ($ 44)

Greenwich Village

Flatbase ($ 49)


Akin ($ 44)


Form ($ 49)


Caveat ($ 44)


Cross ($ 59)


Calcium ($ 44)


Fabulous ($ 40)


Mini ($ 59)


Wharton ($ 39)


Grille ($ 59)


Ultra Mag ($ 59)

Ultra Mag

Senator ($ 55)


Relevant ($ 44)


InfinityGrid ($ 44)


Peak ($ 49)


Ebor ($ 59)


Payge ($ 39)



The Web Development Resources You Need to Know About

The market for web development and design resources isn’t lacking in tools. Consequently, any web or design professional can spend days on end searching for what they need a seemingly endless repository.

Everybody knows that the right tools can help you in your work immensely, so we thought we’d lend a helping hand and let you know about our favorite resources and products.

1. Muffin group – BeTheme

BeTheme is a remarkable theme created by the experts at Muffin Group and it is the ultimate example of a multi-purpose WordPress Theme. BeTheme gives you the possibility to create almost any type of niche website by simply importing a demo websites with one click. Over 150 pre-made layouts ready to use are waiting for you. At the moment, successful websites for health magazines, marketing agency, event companies, schools and more. have been created with BeTheme. Thanks to the awesome layouts generator, you will be able to create an unlimited number of layouts for pages, and you can choose between four different grid layouts: 1240px Boxed, 960px Boxed, 1240px Full Width, 960px Full Width. Speaking of unlimited, you can also choose between unlimited menus, and different menus for different pages. One of the most important components of a website is the header, as this is usually the first thing that a user sees and it makes an impression on him or her. With BeTheme you’ll have seventeen customizable header styles at your disposal, so you can be sure you’ll find one that fits your needs. With more than 200 shortcodes available, you’ll be able to customize your theme easily and quickly. In addition to all of this, BeTheme is compatible with most popular plugins, E-commerce and multilingual ready and, once you have installed it, you can count on outstanding support from experts and lifetime updates!

2. Jupiter WordPress Theme

The team at Artbees take visual perfection to a whole new level. With seven years of experience under their belt, this independent company delivers beautiful WordPress themes and designs one of a kind resources. Their recipe for success consists of careful research and user friendly approaches. With over 12,000 users and over 30,000 sales, Artbees are surely some of the community’s favorites. And not without reason, their website builder, Jupiter, was pretty awesome to begin with, but this November, it’s getting a complete facelift. The new Jupiter V5 promises to bring not only radical improvements as far as design and usability are concerned, but also a deep codebase refactoring, a restructured theme and massive performance enhancements. As far as design is concerned, Jupiter V5 comes with even more header styles, gradient coloring capability for page elements, blending effects to page sections, hover styles and much more. You will also find that Jupiter V5 introduces add-ons, a new contact form style, new WooCommerce capabilities, a shop loop builder and many more. Make sure you get Jupiter V5 for yourself this November and see exactly what it can do.

3. Argento

If you’re trying to create an E-commerce store or if you have one already and it needs a makeover, we highly recommend that you try Argento, the most advanced Magento template ever made. Because Argento was created exclusively for online stores, it has all the features necessary to increase conversion and speed up your website. It adapts to any browser width and screen resolution thanks to its awesome fluid layout. Because it is implemented with over fifteen of the most popular Magento extensions, it will work just as well on Android, iOS and Blackberry, as if you had separate desktop and Magento mobile themes. Argento will also reduce the number of HTTPS requests, due to the fact that it is based on CSS sprite techniques. There’s even more good news: thanks to additional extensions such as Sold Together and Suggest Page, you will experience an increase in the average order size. Let the Argento professional developers install your new responsive Magento template for free and get ready to run your awesome new E-commerce website.

4. Metronic – #1 Selling Ultimate Bootstrap Admin Theme

Designed by Keen Themes, Metronic currently holds the title of number one admin theme on Themeforest. Join thousands of other people who would rather spend their time on something else than on UI coding. This revolutionary theme was built with Twitter Bootstrap Framework 3.3.5 and boasts AngularJS and Sass support. With 7 ultimate admin themes, it’s no wonder it has won the trust and admiration of so many buyers. Leave all coding to the team from Keen Themes. They created Metronic with super clean code and they offer outstanding support. With over 80 jQuery plugins and more than 700 template pages, Metronic will save you tons of time that you could spend focusing on more important tasks. Highly responsive, Metronic can be used for any web application from admin dashboards to E-commerce backend and custom admin panels. What is more, the creative minds behind Keen Themes keep releasing updates and features to improve their customers’ experience.

5. Fire checkout

Fire checkout, the Magento one page checkout is here to make your customers happier and increase your conversion rate. Nobody likes to finish up a transaction by going through a 6 page checkout. With this in mind, Fire Checkout was created. This simple tool allows your users to place orders quickly and efficiently. The simple checkout form was especially designed to speed up the buying process and increase your sales. The fast Ajax updates paired with the flexible layout and intuitive design make this tool stronger than ever. Fire checkout offers full support for every payment method and shipping option out there. Loaded with user friendly features, Fire checkout also comes with Geolocation support, which instantly pinpoints the customers’ country and city. Keeping your customers satisfied has never been this easy before. They are able to choose the delivery date for the shipment as well as send comments with particular requirements or inquiries.

6. actiPLANS

Managers are well aware of the importance of good time management and, hence, would rather not get caught up in a series of back-and-forth emails between them and their employees asking to go on leave when they have more important things to do. The perfect tool for this situation has been created: actiPLANS. This leave management system will revolutionize the submission and management of leave requests for both regular team members and managers. With an intuitive interface and clear view of corporate leave schedule, actiPLANS eliminates paperwork, complicated spreadsheets and human errors by automating the process of leave time management. Team members can submit a leave request by simply dragging and dropping the needed time period on the chart, while managers can approve, reject or delete requests in bulk with one click. They can also leave a comment for a rejected or approved leave, for further clarification. Another smart actiPLANS feature is calculation of PTO balance, there is a number of automatic and manual rules to make the process of accruing and spending PTO days clear and simple. actiPLANS has a mobile app for iOS and Android coming out in November, making it as easy as possible for anyone to inform their colleagues when they’re running late for work. actiPLANS’ flexible settings will adapt to any company’s leave time policy. It is so easy to use that everyone can start using it in a matter of minutes.

7. actiTIME

Keeping track of your working hours on various projects can be tricky. And when you have to keep an eye on your team’s performance, things become even more complicated. Luckily, we have just the thing for you. Meet actiTIME. This super-efficient program is packed with time saving features and user friendly options. actiTIME is a web-based software that keeps tabs on your working hours and logs in all the essential data in a neat looking timesheet. Emphasizing speed and efficiency, this time tracking tool will enable you to meet all your deadlines and stay within a budget. With exhaustive reports on team performance, extra hours and leave time, managers have access to all the essential info at all times. Boasting over 9,000 satisfied buyers, actiTIME is perfect for freelancers, start-ups that have a few employees and larger companies. The free mobile app can be used on Android and iOS to track time and costs whether you’re in the office or on-the-go.

8. BugMuncher

Fixing a bug can take more time than necessary if you do not have direct access to the information that you need in order to sort things out. BugMuncher is a simple and efficient feedback tool that will send you detailed feedback and bug reports via e-mail. Additionally, you can use custom web hooks to integrate with other third party services such as Trello, Zendesk, Jira, GitHub and Zapier. Without any extra plugin required, BugMuncher will automatically include a screenshot of what the user sees, which is equivalent to having first-hand access to the problem. What will the BugMuncher report contain in addition to this, precisely? The answer is detailed information about the browser and operating system of your client or coworker, details of any JavaScript errors that occurred, screen size and resolution, which browser plugins they have installed, user’s language and geolocation, as well as the path they took through your website. Team members can also send reports to colleagues, leave comments on them and conceal any sensitive information. Briefly put, with BugMuncher you will be able to focus on perfecting your website instead of having to build your own feedback system.

9. Icons8

When it comes to the variety of icons you can choose from when building a website or app, it’s safe to declare “the more, the merrier”.

An excellent source for getting all the icons you will ever need for your website is the Icons8 App. With this minimal application for Windows and Mack you will get over 17,000 icons stored offline on your computer. And they have all the icons you could imagine, from social networks, operating systems, objects and computer hardware to beauty, cinema, astrology and animals. If there is an icon you’re lacking, you can just submit a request for it and Icons8 will grant it for free.

What’s more, the Icons8 App gives you access to basic editing for icons as well as fast search, Export to Photoshop, Xcode, etc., recoloring and resizing, also the possibility of choosing format (SVG, PNG, PDF or EPS) and the right style of icons for you, be it Windows 10, Windows 8, iOS9, Android 4, Android 5 Lollipop or Flat Color icons.

10. FastWebHost

In need of an efficient web hosting solution for your site? FastWebHost will meet all your expectations at affordable prices. A leader in inexpensive cloud web hosting solutions, FastWebHost is one of the superior platforms you could be using for your website. Flexible and reliable, the team behind this amazing web hosting solution is always there if you need help with any issue. Their web hosting plans are based on several criteria, so there’s something for everyone to choose from. The Value Plan is a great, cheap alternative for start-up websites. For only $ 2.99 a month, buyers receive a free domain name, 50 GB of web space and a single domain. Looking for more features? Then check out the most popular product offered by FastWebHost. Their Business Plan offers a free domain name with unlimited web space and bandwidth for only $ 3.99 per month. Enterprises can choose the $ 4.99 per month plan that comes with a free IP address, one domain name and unlimited web space.

Queness Feed


25 Light Website Designs Which Make Perfect Use of White Space

Any web designer will tell you that white space is extremely important in order to have a beautiful, clean and user-friendly website design. That is why we selected today 25 light website designs which make perfect use of white space.

Analyze these light website designs, see how white space is used in order to enhance or emphasize some characteristics, messages or graphics in a page and apply these techniques in your future work!

All of these beautiful websites have some unique details you’ll definitely like. Some are monochrome, while others use colors as well, but all of them have very clean, well-arranged layouts.

Here they are!


Repossi light website designs white space



Sam Dallyn


Stockholm Design Lab


Your Local Studio




Make Directory



NTN light website designs white space

Ben Ashman


Skidmore, Owings & Merrill


Hatch Inc.






Michaelis Boyd






Freytag Anderson




More Air


Innovation Project Canvas


Bhav Mistry




Budnitz Bicycles


Victoria Ling


Ben Trovato



5 Things You Might Not Know About the CSS Positioning Types

These days front-end developers can build complex page layouts by taking advantage of different CSS layout techniques. Some of those techniques have a long history (e.g. floats), while others (e.g. flexbox) have gained popularity over the last few years.

In this article, we’ll have a closer look at a few little-known things related to the CSS positioning layout method.

Before we get started learning about those things, let’s take a quick yet essential tour of the available positioning types.

Overview of the Available CSS Positioning Types

The position CSS property allows us to specify the positioning type of an element.

CSS Positioning Options

static is the default value of this property. At this point, we tell that an element isn’t positioned. In order to position it, we have to change its predefined type.

To do this, we set the value of the aforementioned property to one of the following:

  • relative
  • absolute
  • fixed
  • sticky

Only then, can we use the offset properties to specify the desired position for our element:

  • top
  • right
  • bottom
  • left
  • The initial value of these properties is the auto keyword.

One thing to keep in mind is that an element whose position property is set to absolute or fixed is called an absolutely positioned element. Also, note that a positioned element can take advantage of the z-index property to specify its stack order.

CSS Positioning Property Main Differences

Now, let’s briefly discuss three core differences between the available positioning types:

  • An absolutely positioned element is completely removed from the normal flow. The adjacent sibling elements occupy its space.
  • A relatively or stickily positioned element preserves its space. The adjacent elements aren’t repositioned to occupy the reserved space for this element. However, the offsets of this element don’t occupy space. They’re completely ignored from the other elements, and hence that may causes elements to overlap each other.
  • A fixed positioned element (remember that the fixed positioning is a subcategory of the absolute positioning) is always positioned relative to the viewport (it ignores its positioned parents), while a stickily positioned element is positioned relative to the nearest ancestor with a scrolling box (e.g. overflow:auto). If there isn’t such an ancestor, it is positioned relative to the viewport.

Explore how all these types work in the following demo:

See the Pen Overview of the available positioning types by George (@georgemarts) on CodePen.

Note: The sticky positioning type is still considered as an experimental technology with limited browser support. Of course, if you want, you can use a polyfill (e.g. stickyfill) to add this functionality to the browsers that don’t natively support it. Due to its limited support though, we’ll not take this type into account for the rest of the article.

Positioning Elements with Absolute Positioning Type

I’m sure many of you already know how the absolute positioning works. However, this type of positioning can be tricky and confuse new designers.

For this reason, I decided to include it in the list of the little-known concepts (along with the corresponding demo) that are covered in this article.

So, an element whose positioning type is set to absolute is positioned relative to its closest positioned ancestor. Of course, that works only if the positioning type of the parent element isn’t equal to static. With that in mind, if the element doesn’t have any positioned ancestors, it’s positioned relative to the viewport.

To demonstrate that behavior, see the following live demo:

See the Pen Little-known thing #1 – Positioning elements with absolute positioning type by George (@georgemarts) on CodePen.

In this demo, we give green box an initial positioning type of absolute with offset values bottom:0 and left:0. Moreover, we don’t specify a positioning type for its direct parent (red box).

However, we relatively positioned the outer wrapper (i.e. the element with the jumbotron class). Notice how the position of the green box changes as long as we modify the positioning type of its ancestors.

The Absolutely Positioned Elements Ignore the float Property

If an element is floated to the left or right and we set its positioning type to absolute or fixed, the value of the float property becomes none. On the other hand, if we set its positioning type to relative, the element remains floated.

Look at the relevant demo:

See the Pen Little-known thing #2 – The absolutely positioned elements ignore the “float” property by George (@georgemarts) on CodePen.

In this example, we define two different elements which are floated to the right. Notice that when the red box becomes an absolutely positioned element, it ignores the value of the float property, whereas the relatively positioned green box keeps this value.

The Inline Elements Which are Absolutely Positioned Behave as Block-level Elements

An inline element whose position is set to absolute or fixed, obtains the capabilities of the block-level elements. This table summarizes what types of elements are converted into block-level elements.

Here’s an example:

See the Pen Little-known thing #3 – The inline elements which are absolutely positioned behave as block-level elements by George (@georgemarts) on CodePen.

In this case, we define two different elements. The first one (e.g. green box) is a block-level element (i.e. div). The second one (e.g. red box) is an inline (i.e. span) element. Notice though that only the green box appears.

The red box isn’t currently visible because we give it a width and a height property which can only be applied to the block-level and inline-block elements. Plus, it’s an empty element (i.e. it doesn’t contain any nested/children element(s) like text nodes).

Keep in mind that if we set its positioning type to absolute or fixed, the element appears because it behaves as a block-level element.

The margins don’t collapse on absolutely positioned elements

By default, when two vertical margins touch each other, they collapse into a single margin whose value is specified by the larger of those margin values. This behavior is known as margin collapsing.

Similar to what happens with the margins of a floated element, the margins of an absolutely positioned element don’t collapse with any other margins.

Consider the example below:

See the Pen Little-known thing #4 – The margins don’t collapse on absolutely positioned elements by George (@georgemarts) on CodePen.

In this demo, initially the element has margins equal to 20px. In addition, its top margin collapses with the parent’s top margin, which is also 20px. As you can see, only when we absolutely position the element, the top margin doesn’t collapse with the ancestor’s relevant margin.

But, how we can prevent our margins from collapsing? Well, we have to put something that will separate them.

Let’s say, for example, a little bit of padding or a border (we should apply this rule to the parent or the child). Another option is to add the clearfix class (in our example) to the parent element.

Positioning elements with pixels and percentages

Have you ever used percentages instead of pixels to define the offsets for a positioned element? If the answer is yes, you may have noticed that the calculated offset values are different depending on the CSS units (i.e. pixels or percentages) you choose.

This seems a little confusing, right? So, let’s first see what spec says about the offsets which are declared as percentages:

The offset is a percentage of the containing block’s width (for left or right) or height (for top and bottom). For stickily positioned elements, the offset is a percentage of the flow root’s width (for left or right) or height (for top or bottom). Negative values are allowed.

That being said, as long as we define the offset values as percentages, the position of the target element depends on the width (for left or right offsets) and height (for top or bottom offsets) of its parent.

The demo below demonstrates this difference:

See the Pen Little-known thing #5 – The difference between positioning elements with pixels and percentages by George (@georgemarts) on CodePen.

In this example, we use pixels and percentages to move the element. Sure enough, when the offsets are declared as pixels, the element is moved to a position that we expect. So far, so good!

On the contrary, when we choose percentages as the desired CSS unit for our offsets, the element’s position depends on the dimensions of its parent. Here’s a helpful visualization showing how the new position is calculated (with percentages):

New Position

Note: As you probably already know, the transform property (along with the different translate functions) also let us change the position of an element. But, please note that if we use percentages as the CSS unit, the element will be positioned relative to its dimensions and not relative to its parent dimensions (unlike offsets).


I hope that this article has helped you gain a solid understanding of the CSS positioning layout method and has highlighted a few CSS concepts that might be confusing. I’d love to share your thoughts, questions, or recommendations in the comments below. Thanks for reading!


25 Useful Front-end Frameworks & Libraries

Here are 25 useful front-end frameworks & libraries to save you from having to re-invent the wheel and help alleviate some of the overhead when you’re building a new site.


A Rock Solid, Responsive HTML/CSS Framework built to work on all devices big and small.

A Rock Solid, Responsive HTML/CSS Framework


Wee, a lightweight front-end framework for logically building complex, responsive web projects.



Caramel is a simple, modern, responsive website framework. Caramel is fully responsive, meaning you only need to write code once, to have the same results across multiple platforms.



It’s a collection of 48 self contained modules that can be mixed and matched or used independently. Pick what you want, leave the rest.



A collection of CSS things.



Kraken is powered by Gulp.js, a build system that minifies and concatenates your Sass and JavaScript, auto-prefixes your CSS, runs unit tests on your scripts, optimizes your SVGs, and creates SVG sprites.



spaceBase is the front-end starter files for any new web project. It sets up your Sass architecture and normalizes your CSS and native HTML elements. It provides the structural groundwork for your application.



Blackhole is a minimalistic, semantic, modular, but powerful and flexible SASS / CSS framework with the sole purpose of offering developers a new approach on how they architect their websites / apps, aiming in making their work easy and pleasurable and giving the possibility of modifying and extending it the way they want.



If you don’t need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can also be customised and styled through the use of HTML classes.



PatternFly is a community of designers and developers collaborating to build a UI framework for enterprise web applications.

A community of designers and developers collaborating to build a UI framework for enterprise web applications.

SkyBlue CSS Framework

SkyBlue is a minimal framework that is meant to be starting point for web projects.

skyblue css framework

Picnic CSS

Unpack your meal and get coding. An invasive CSS library to get your style started.

Picnic CSS


Lost Grid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. You can think of it like the Autoprefixer of grid systems.

lost grid


CSSgram is a library for editing your images with Instagram-like filters directly in CSS.


Animate Plus

Animate Plus is a CSS and SVG animation library for modern browsers. Animate Plus is performant and lightweight, making it particularly well-suited for mobile.

Animate plus


Odometer is a Javascript and CSS library for smoothly transitioning numbers.



Tuesday is an stand-alone library you can use without any dependencies, but you can use Tuesday alongside other animation libraries as well.


Motion UI

A Sass library for creating flexible CSS transitions and animations.

Motion UI


Pure CSS icon library.



Have you ever wanted a drag and drop library that just works? That doesn’t just depend on bloated frameworks, that has great support?

dragula drag drop library


MetricsGraphics.js is a library optimized for visualizing and laying out time-series data.



Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.


Toggles & Switches

A declarative pattern for applying CSS states and animations based on user interaction.

Toggles & Switches


Buttons is a highly customizable production ready mobile web and desktop css button library. Buttons is free and open source.

button CSS library


The best HTML-driven prototyping tool for designing in browser.



20 Minimalist PSD Website Templates

Minimal design is all about white space and creating breathing room to let minimal content really shine and give the user’s eyes a place to rest. So here are 20 minimalist PSD website templates that remove all unnecessary design elements to create something usable without clutter.


IDILI - Models agency [FREEBIE]

Halcyon Days Website PSD

Freebie PSD! Halcyon Days Website PSD


Square Free PSD

Free Landing page

Free Landing page

Minimal Website

Minimal Website | Free PSD


Constellation - Tumblr Free PSD Template


Arcadia - Free PSD Landing Page














cam minimalist psd website templates











Fashion Lab

Fashion Lab


10 Fresh & Time Saving Google Chrome Extensions For Designers

Here is the list of 10 best Google Chrome plugins for the designers. There is no doubt that Google Chrome offer many useful plugins for the designers that are mostly used to enhance the design and flexibility. Many designers and developers are using Google Chrome plugins and extensions to simplify their work and improve their productivity.

For today’s session, we have put together 10 best and free Google Chrome plugins for the designers. These plugins are the main reason why Google Chrome is the preferred choice of designers and developers all across the globe. Here is the full collection. We hope that you will enjoy this assortment. Check this out and get to pick one! Do let us know what you feel about this round up.

Grammarly Spell Checker & Grammar Checker

Spell check and grammar check your writing when communicating online. Boost your productivity and credibility everywhere you write!

ExtensionScreencastify (Screen Video Recorder)

Screencastify is a simple video screen capture software for Chrome.

Handle for Gmail & Google Apps

To-do List, Inbox, and Calendar Management all in one.

Share to Classroom

Get your class on the same (web)page, instantly.


Automatically find and apply coupon codes when you shop online!


MEGA is a secure cloud storage service with 50 GB free storage space.


Replace new tab page with a personal dashboard featuring todo, weather, and inspiration.

Mini Mammoth

Your powerful research companion from Open boards, save pics, links, text. It’s not a webclipper, it’s Mini Mammoth.


Get the best price on 10 million+ products across 100+ online stores. Find more! Save more!

Sidekick by HubSpot

Sidekick by HubSpot is the easiest way to get powerful contact insight right in your inbox.


11 CSS Filter Tutorials & Examples

CSS filters can be used to create some fantastic image effects. They allow you to modify the display of images in a variety of ways, some of those ways of displaying images as black and white, grayscale, sepia, invert, saturate, hue-rotate, blur and more. Though, this feature is not yet widely supported, but you can use CSS filter polyfill as browser fallback. So to get our feet wet with CSS Filter Effects, here are some useful tutorials and examples to help us to create fantastic image effects.

Introducing CSS shaders: Cinematic effects for the web

The following video shows a more sophisticated effect: when transitioning from grayscale to color, the content “wobbles” for a short while and, simultaneously, a color-swipe goes across the content, bottom to top.


Advanced CSS filters

As a result, you’re now able to apply filters to images before using them in backgrounds. You can think of it as a polyfill for background-filter (or background-opacity, background-blur, whatever), but it’s much more powerful.


CSS Filters are awesome!

CSS Filters introduce a few useful effects and some image adjusting functions, namely blur, drop-shadow, contrast, brightness, and a few others which can be really useful if used properly.


Frosting Glass with CSS Filters

This article will examine one such effect, frosted glass, and how CSS filters provide a cleaner, more flexible solution than static images.


Getting started with CSS custom filters

CSS custom filters, on the other hand, allow to create completely new types of effects where you can control not just parameters of an existing effect but also the define the very nature of the effect using shaders. For example here a map embedded into the document was transformed into a lit textured sphere:


Cross-Browser Image Grayscale with CSS

Make an image grayscale in all browsers.



A couple CSS filter combinations to get you started.


CSS Raindrops on a Window

Eamples of great use CSS filter blur effects.


CSS Filters

Demo showing CSS Filter Effects 1.0, specifically the filter functions, which are being implemented in Webkit.


CSS Filter Glass

Examine CSS filters through fluid resizable window glass. You can drag and drop an image file from your desktop onto the glass and see the filters manipulate your image live. Available filters are: grayscale, sepia, blur, brightness, contrast, invert, hue-rotate and saturate.


Playing with CSS Filters

Using contrast() to posterise the image, in turn rounding the overlapped blurred regions of the two circles to a block colour.

playing with css filter