Tuesday, June 27, 2017

9 Exciting Open Source Sass Frameworks

Every CSS developer should know about Sass to see what it offers. This superset of CSS has revolutionized stylesheets much like jQuery revolutionized JavaScript.

And alongside many CSS UI frameworks we also have SCSS/Sass frontend frameworks. Most of these are pretty new but gaining traction quickly.

We’ve curated 9 of the best free SCSS frameworks here so if you’re a Sass user then you’ll definitely want to check these out.

1. Sierra

The Sierra framework is touted as one of the lightest and smallest SCSS frameworks on the market. Currently in v2.0 it weighs a total of 37KB.

This may not be literally the smallest option out there, but even the minified Bootstrap stylesheet totals ~120KB so Sierra is pretty light. It’s also well organized with separate files for mixins, buttons, tables, typography, and other common page elements.

This file separation is standard for Sass development and it makes your job much easier when customizing the framework.

You’ll find a complete live demo with all the main elements on Sierra’s main page along with setup documentation on GitHub. I’d rate this in the top three of all Sass frameworks so it’s definitely worth a look if you’re curious.

2. Scooter

The team at Dropbox put together their own frontend framework called Scooter. This one is a lot simpler than most since it was created for frontend prototyping.

Dropbox actually has a lot of open source stuff on GitHub which includes their own style guide for formatting CSS/SCSS code. This little resource can prove incredibly useful if you wanna dive into Scooter and tinker with the default source.

Most of the Scooter styles actually borrow ideas from Dropbox like their buttons on the components page. This offers a cool way to prototype your own webapps in Sass while using a tried & tested UI style.

3. Kickoff

For something a little more detailed you might try the Kickoff library. This runs on a Sass base and has its own naming scheme for adding new variables.

But Kickoff mixes a little bit of everything from CSS grids to more complex JS components all delivered & maintained through Gulp.js.

If you don’t already use Gulp then this framework has a bit of a learning curve. But the entire codebase is very future-centric with a focus on ES2016 and flexbox.

This is exceptionally lean with a CSS stylesheet of only 8.6KB and a measly 2KB of JavaScript. Kickoff is meant as a boilerplate where it’s merely a starting point, so you can build out something as slim or detailed as necessary for any project.

Take a peek at their online demo to see how this looks in the browser.

4. Materialize

Everyone knows about Google’s material design and how fast it spread across the web. This led to many developers creating their own stylesheets to mimic Google’s guidelines and some of those stylesheets are online for free.

Materialize is one example of a CSS/Sass framework built specifically on Google’s guidelines. The framework is still technically in beta version 0.9 as of this writing.

But I’d argue it’s complete enough for production websites and there’s a Sass option right on the intro page. So you can either download the basic CSS/JS files or get the CSS+Sass for further development.

This is so popular that it’s available on CDNs so you don’t even need to download the CSS locally.

Anyone conforming to Google’s material styles should absolutely start with the Materialize library. You’ll find complete documentation on the website along with a showcase of websites running Materialize.

5. Hocus-Pocus

The Hocus-Pocus framework doesn’t consider itself a framework, but rather a starter’s kit for designing new projects.

This UI kit restyles all the default HTML elements on a webpage and it comes with a nice responsive grid to align those elements. Naturally the whole thing relies on Sass which makes the dev process a lot simpler.

Hocus Pocus feels more like the antithesis to Bootstrap. You wouldn’t use this directly on a live website. But you would use this as a starting point to prototype and build ideas quickly. Although it can work well as a base too since it runs on Normalize.

From pre-styled tables to buttons and custom form elements, Hocus Pocus adds a minimalist touch to all default browser styles.


6. Gridle

The Gridle framework is one of the most customizable SCSS grid frameworks you’ll find. It’s powered by Sass and it comes with dozens of custom mixins and functions made specifically for this grid system.

You’ll find a live preview on the demo page here hosted for free on GitHub. There’s also a complete setup guide on the main repo that covers how to define grids from very simple to more complex.

Note that Gridle does require some existing knowledge of grid systems and it’s certainly not a magic bullet.

But it’ll save you hours of time hand-crafting a grid from scratch, not to mention it’s reusable for pretty much any project you design.

7. iotaCSS

One of the best methods for structuring CSS is the OOCSS style. This follows an object structure where you design for more classes & relationships rather than nested specificity.

iotaCSS is one of the few OOCSS frameworks and it’s real easy to use. You can browse through a mini preview of the source code to see naming conventions and how this uses BEM/OOCSS syntax.

One unique difference about iota is that it’s not specifically a UI kit. Instead it’s a framework to help you create a UI kit solely through Sass. This means it’s not a plug & play solution, but it also offers far more customization.

The online documentation is phenomenal so this is a fantastic framework to build out your own Sass-powered stylesheet from scratch.

8. Bulma

Modern CSS is moving towards a modular and flexible structure with flexbox. This seems to be the new normal and Bulma is leading the charge.

This free Sass framework lets you work solely with flexbox to create fully responsive grid systems from scratch. This means easy vertical + horizontal centering, fixed-height grid boxes, and a whole bunch of default styles.

You can find live demos on the main page along with install instructions on GitHub.

By default Bulma is just a CSS file and it’s even hosted on CDNs for free. But developers are encouraged to download the Sass files and work with variables to add your own features.

9. Susy

Susy is a responsive Sass toolkit for building layouts from scratch. It’s a unique library because it doesn’t come with a default grid setup or a stylesheet ready to launch.

Instead Susy offers a series of tools with tutorials that you can follow to create your own grid layouts.

These various tools let you define variables for custom breakpoints, custom grid/gutter settings, and toss in a variety of mixins for good measure. You can style nested elements quickly and target very specific page elements with just a few lines of code.

Since this doesn’t come with a default stylesheet it’s not a ready-to-go solution. But if you’re a Sass developer looking to save time then skim through Susy’s docs and see what you think.

800 High-Resolution Retro/Vintage Style Photos from Cruzine – only $14!

This content was first posted here:
9 Exciting Open Source Sass Frameworks

Monday, June 26, 2017

10 Ways to Design Menus That Don’t Suck

There are definite right and wrong ways to design navigation menus. This basic part of a website is often overlooked in the design process and it shows in terms of usability.

Clunky, overcrowded or missing navigation are the most common issues and quite frankly they can make your website simply suck. Don’t be that guy (or girl). Use these tips to ensure that you are using modern navigation patterns in your website projects for cool, creative navigation elements that don’t suck. (And are highly usable.)

1. Ditch the Mega Menus

Mega menus was a design fad that clients loved—even when designers hated it. The oversized menu style that includes “everything but the kitchen sink” is overwhelming to users and doesn’t provide any real value.

Only a handful of major retailers can really get away with using mega menus, and the purpose there is to show scale of inventory. The usefulness of the overloaded navigation element is questionable.

Often, a mega menu option is selected because it is too hard to narrow down what to put in the navigation. Make the tough choices. Dig in analytics to see what users are looking for. Honestly, most users who want a very specific thing will find it using search anyway.

2. Make Search Prominent

And speaking of search: Make it prominent. Search should be on every page. It should in in the main navigation. And it should be large and easy to access.

Superb search functionality is the link that will keep users on a website. If what they are looking for isn’t readily available, the next option is likely to search for it. (You can thank Google for this search-first thought process.)

Don’t try to fight it. Work with users and include search as part of the main navigation. (And make sure the box is big enough to type, and fully see, common phrases into.)

3. Limit the Number of Navigation Choices

It’s your job to anticipate what content users will want to access next. Limit navigation choices to the most popular pages and information in the website design.

Almost every navigation menu should include search, an about or contact page and e-commerce sites should always include a cart or buy now button. After that navigation elements should be driven by site content.

4. Develop Smart Navigation Menus

Good navigation will help users move from one bit of content to the next logical point. This content is often different on different parts of the website.

Create multiple navigation configurations so that users have easy access to the content that is the next logical step in their path around the design. While some elements might overlap, others assist users and help them move deeper into the design.

We are in an age where users have come to expect certain levels of personalization. Amazon does a great job of this with navigation elements that even call users by name. Take a close look at the navigation next time you log in to see [Your Name Here]’s Amazon.com. The secondary navigation includes information such as the user’s annual donation for Smile users, recent order history and even credits to other Amazon services. (Everything thereafter is pretty personalized, too.)

5. Order Nav Elements Purposefully

The order of navigation elements is just as important as the decision to use them. Items at the beginning and end of the navigation element will be most effective, most seen and most clicked. User these positions carefully.

There’s even some science to back this up. The serial position effect is the tendency of a person to recall the first and last items in a list most consistency. Further, users tend to recall the most recent items best (recency effect) and the first few items in a list are recalled better than middle elements (primacy effect).

Look at user flow patterns in your website analytics to help determine exactly what pages and elements should be front and center. Include pages that users are going to from the homepage and content that you want users to connect with. Eliminate navigation elements that aren’t driving user flow.

6. Use Sticky Navigation for Long-Scrolling Pages

Don’t let users lose track of navigation. Whether it sticks to the top, or bottom or side of the screen, any page with a long-scrolling format should include a sticky menu. The reason behind this is simple: Don’t make users work to keep interacting with your website.

The easier it is to move around and experience content, the more likely users are to do just that. The more time a user spends on your website with your design, the more likely they are to convert on a desired user action.

7. Don’t Hide the Navigation

Tiny menu items, links tucked away at the bottom of the screen or only in the footer, and pop-out navigation hidden behind oddball icons and lack of navigation on interior pages will only keep users from clicking. Don’t hide website navigation. It should be front and center. It should be on every page.

Users can get to your website in any number of ways. Make sure that there’s a navigational element waiting form them when they arrive.

8. Use Descriptive Labels

From navigation words to icons, every element should tell users exactly what will happen with a click. Use commonly accepted icons, such as a shopping card to check out or magnifying glass for search or even a hamburger icon for pop-out menu styles.

Then take it a step further and use text labels that tell the user exactly what information is contained therein. Try to avoid overly generic labels such as services or offerings, if there’s a word that better explains the content.

9. Consider Full-Page Nav

Sometimes the design is the navigation. If there are a few key elements that are vital for users, showcase them with full-screen navigation.

While this won’t be appropriate for every project, it can be effective for smaller websites, portfolios or project work.

10. Go Vertical

Vertical navigation is trendy right now, and for good reason. It is easy to see and draws the eye because it is somewhat different.

Side, vertically-oriented navigation is a good option for websites that need a little more space for number of navigation elements. With a deeper menu, the design can accommodate more nav elements without feeling cluttered and maintaining adequate space between elements. 

Quickly and Easily Remove Image Backgrounds with Super PhotoCut – only $9!

This content was first posted here:
10 Ways to Design Menus That Don’t Suck

Sunday, June 25, 2017

Popular Design News of the Week: June 19, 2017 – June 25, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

CoolHue – Coolest Gradient Hues and Swatches


Google Introduces Spectral, a New Web Font


Web Developer Portfolios – Templates for Developers and Programmers


What is the ROI of Design?


How the Internet Killed Squares


Site Design: Tesla Autopilot


Finalists in Canada 150 Logo Contest Fail to Impress


The Expert Guide to Working from Home


The Modern Web Design Process: Setting Goals


Google for Jobs is Now Open to all Job Search Sites & Developers


The Buzzfeed Redesign: UK Art Director Tim Lane Talks Us Through his Seven-month Overhaul


Moths are Eliminating Screen Glare Once and for all


A Beginner’s Guide to Designing Interface Animations


Mollie — Better Payments


Qlone – 3D Scan any Object with your iPhone or iPad


Proofreading Marks for Typographers


How to Create a Side Project that Customers Actually Want


Scrapbox – A New Style of Note-taking Where Ideas Connect


Inly: Beautiful Invoicing that Gets You Paid Quick


Clean Todo – An Efficient and Elegant To-do App


Google VR 180


How to Build your own Alexa Service


Twist, a Rival for Slack?


The Importance of Cognitive Bias in Experience Design


How Big Data is Stopping Us Taking Risks


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: 20 Fabulous Handwritten Fonts from Area Type Studio – Only $19!

This content was first posted here:
Popular Design News of the Week: June 19, 2017 – June 25, 2017