Design Responsive Websites Visually

Imagem

With Webflow you build using our powerful and intuitive UI. Export production-ready HTML & CSS.

How it works?
Responsive design that’s faster & easier.
Webflow enables you to create responsive layouts and pixel-perfect designs directly in your browser, without writing a single line of code.

Design
Drag & drop elements on the page, and style them any way you want. If you’re familiar with Photoshop, you’ll love Webflow.

Export
Webflow generates beautiful, production-ready HTML and CSS. It’s the same code that a developer would write.

Launch
Your website works across all modern browsers and devices. Push the code to your own server or let us handle the hosting for you.

Try Webflow

Advertisement

Icon Fonts for Web User Interfaces

I’m developing a layout for a web site, this time I surrendered to the icon fonts. Here are some examples.

What are Icon Fonts?

Icon fonts are font files that have symbols and glyphs (e.g. arrows, folders, magnifying glasses) instead of standard alphanumeric characters.

Icon fonts are like dingbat fonts, but are designed specifically for UIs. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

And because they’re treated like web fonts, icon fonts:

  • Have great cross-browser support (even IE6, for example, can render web fonts using the @font-face rule)
  • Can be scaled on-the-fly if the user adjusts their web browser settings
  • Can be rendered with different colors
  • Can embody font- and text-related CSS properties (like text-shadow andgradient)

See icon fonts in action by visiting my friend Chris Coyier’s icon fonts demo page.

To learn how to use icon fonts, read this tutorial on CSS-Tricks: HTML for Icon Font Usage.

Free Icon Fonts

Below are 18 excellent icon free fonts that have licenses that permit commercial use. I strongly recommend reading the license terms and conditions of any freebie you get online, just to be sure that you can use the free resource for your particular purpose.

1. Foundation Icons Fonts

Number of icons: 137. License: MIT Open Source License.

Foundation Icons Fonts

2. Sosa icon font

Number of icons: 121. License: Custom license (use in commercial projects permitted).

Sosa icon font

3. Font Awesome

Number of icons: 196. License: Creative Commons Attribution 3.0 Unported.

Font Awesome

4. Iconic Icon Set

Number of icons: 172. License: SIL Open Font License and Creative Commons Attribution-ShareAlike 3.0.

Iconic Icon Set

5. Raphaël Icon-Set

Number of icons: 116. License: MIT License.

Raphaël Icon-Set

6. PulsarJS @FontFace

Number of icons: 73. License: SIL Open Font License.

PulsarJS @FontFace

7. IcoMoon

To create a font file, you’ll need to use the IcoMoon web appNumber of icons: 316.License: Attribution-ShareAlike 3.0 Unported.

IcoMoon

8. Typicons

Number of icons: 88. License: Creative Commons Attribution 3.0 Unported.

Typicons

9. Entypo

Number of icons: 100+. License: Creative Commons Attribution 3.0 Unported.

Entypo

10. Heydings Icons

Number of icons: 60. License: Attribution-NoDerivs 3.0 Unported.

Heydings Icons

11. Heydings Controls (App Icon Font)

Number of icons: 50. License: Attribution-NoDerivs 3.0 Unported.

Heydings Controls (App Icon Font)

12. JustVector Social Icons Font

Number of icons: 62. License: Free Art License.

JustVector Social Icons Font

13. Modern Pictograms

Number of icons: 86. License: SIL Open Font License.

Modern Pictograms

14. Brandico

Number of icons: 18. License: SIL Open Font License and Attribution-ShareAlike 3.0 Unported.

Brandico

15. Signify Lite

Number of icons: 38. License: Custom license (use in commercial projects permitted).

Signify Lite

16. Web Symbols typeface

Number of icons: 78. License: SIL Open Font License.

Web Symbols typeface

17. Social Media Icons

Number of icons: 74. License: Custom license (use in commercial projects permitted).

Social Media Icons

18. ikoo

Number of icons: 65. License: Attribution-ShareAlike 3.0 Unported.

ikoo

 

For those that are out of the loop, you can think of an icon font as a grown-up version of dingbats…with an actual use-case. The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files.

Now that a ton of options have emerged as popular choices among Web designers, we’ve made this brief list of 7 typefaces to point you in the right direction. If we missed your favorite, please share it with us in the comments below!

19. Font Awesome (free)
Font Awesome is an icon font that was designed to work perfectly with Twitter Bootstrap. Above you can see the font in use to make buttons, navigation, and more.

fontawesome 7 Gorgeous icon fonts to speed up your site and your design process

20. Fontello (free)
Differing from Font Awesome, Fontello is actually a tool that lets you easily piece together your own icon font based on icons from a number of sources, including: EntypoFont AwesomeIconic and Brandico.

fontello 7 Gorgeous icon fonts to speed up your site and your design process

21. Modern Pictograms (free)
The first icon font we discovered, Modern Pictograms was designed to work on-screen at sizes down to 18 pixels, and is remarkably pixel-perfect and useful as a pictographic font.

Screen Shot 2012 01 20 at 8.17.32 PM 520x165 7 Gorgeous icon fonts to speed up your site and your design process

22. Typicons (free): Yet another set of well-made, clean icons for Webfont use.

typicons 7 Gorgeous icon fonts to speed up your site and your design process

23. Pictonic (free-$160)
A well-supported and growing collection of 2300+ icons, 230 of which are free.

Screen Shot 2012 10 12 at 2.04.04 PM 520x224 7 Gorgeous icon fonts to speed up your site and your design process

24. Pictos ($49)
Pictos is an impressive set of icons that you can host and embed yourself via CSS @font-face (like the icon fonts above), or you can take advantage of Pictos Server, available through subscriptions.

Screen Shot 2012 10 12 at 2.11.09 PM 7 Gorgeous icon fonts to speed up your site and your design process

All of the above fonts are impressive and worth a look, especially if you’re planning on embracing responsive design and supporting higher resolution screens like the Retina display. Additionally, using icon fonts enables designers to quickly adjust the size, color and shadow of their icons on the fly — saving tons of time when changes have to be made and details refined. Your toolkit is only limited to what you can achieve with CSS.

via sixrevisions.com and thenextweb.com

Frontend Development

Imagem

 

Continuar a ler

25 Essential Sass and Compass Tools

Imagem

CSS‘ simplicity is one of its defining features, and a big reason for its popularity. However, as websites and applications become more complex, the size and complexity of stylesheets also increase. CSS can quickly become verbose and repetitive.

But a preprocessor like Sass expands the capabilities of CSS by allowing you to use variables to store values, create mixins for common snippets, nest declarations and help improve the maintainability of the entire project.

Created in 2006, Sass has two syntaxes: the original (also called the “indented syntax”) and SCSS, or “Sassy CSS,” the more popular of the two, as it makes converting an existing website to Sass simple (by changing the file extension from .css to .scss). It doesn’t depend on indentation — it’s written just like CSS, making it easier to adopt.

Compass is the companion open-source CSS authoring framework for Sass. 

There are a variety of tutorialsguides, podcasts, videos, presentations and even books onSass. In this article, we’ll cover the best practical resources and applications to kickstart or advance your Sass knowledge.

Have we missed one of your preferred Sass and Compass resources? If so, please share it with our readers in the comments below.

1. The Sass Way

The Sass Way covers the latest news and topics on crafting CSS using Sass and Compass, with articles, resources and tutorials to suit both beginners and advanced users. With a team of writers and contributors, it’s regularly updated, and you can follow on RSS, Twitter andFacebook.

2. Compass.app

Compass.app is a menu bar-only app for Sass and Compass that helps to compile stylesheets easily, without resorting to a command line interface. It’s written in Java (JRuby) and is cross-platform, with no need to install a Ruby environment to use it. It boasts both LiveReload support and Compass Extensions support.

3. Scout

Scout is a cross-platform app that runs Sass and Compass in a self-contained Ruby environment, letting you manage your projects effortlessly. There’s no need to deal with setting up Ruby or learning command line. Scout does all the “heavy lifting” and aims to help improve your CSS workflow by giving you more control, organization and optimization.

4. Compass Recipes

Providing a host of CSS recipes made with Compass and Sass, all ready to use, Compass Recipes offers a wealth of backgrounds, effects, icon fonts, forms, layouts, media queries and much more. It’s also hosted on GitHub, available to fork.

5. Bourbon

Bourbon is a simple, lightweight and comprehensive library of Sass mixins designed to be simple and easy to use. No configuration is required — the mixins aim to be as vanilla as possible, which means they should be close to the original CSS syntax. The prefixes also ensure graceful degradation for older browsers.

6. Bourbon Neat

 

 

Neat is a semantic grid framework built on top of Sass and Bourbon. It’s simple yet powerful enough to handle any responsive layout. It promotes clean, semantic markup, relying entirely on Sass mixins, and does not pollute your HTML with presentation classes and extra wrapping divs.

7. Susy

Susy provides responsive grids for Compass, filling the void left when grids were stripped from Compass. You can quickly add media-query breakpoints for new layouts, or create your own math using Susy’s array of grid helpers. It has the power to help you build a site in minutes, or create a scalable grid library for use in large projects.

8. Codekit

Codekit is a powerful compiler that processes Sass, Compass, Less, Stylus, Jade, Haml, Slim, CoffeeScript and Javascript files automatically each time you save. With live browser reloads, image optimization and easy debugging, it makes working with Compass and Sass a breeze. The app also offers team collaboration and helps reduce load times by combining and minifying files.

9. Sassy Buttons

 

 

Sassy Buttons is a compass extension that helps you create customizable, attractive CSS3 buttons that are cross-browser compatible, using only a few lines of Sass. The extension gives you a set of mixins and defaults to create your custom buttons. The provided defaults can be customized, with five different gradients and three text styles to choose from.

10. LiveReload

LiveReload resides in your menu bar and monitors changes in the file system. As soon as you save a file, it is preprocessed as required, and the browser is refreshed. It ships with SASS, Compass, LESS, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML and Jade, and is controlled by two main checkboxes, so you won’t get lost.

11. Hammer

Hammer has been dubbed a “game changer” for web development. It ships with built-in support for Sass (with Bourbon), with automatic language compilation, to HTML, CSS and JavaScript. It boasts HTML includes, clever paths, variables, auto reload, to-dos and dynamic image placeholders. Also of interest is companion menu bar app Anvil, which runs local Hammer builds, and Rock Hammer, a curated project library for Hammer.

12. Forge

Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment, using front-end languages like Sass, Less and CoffeeScript. It creates a source folder with base template files, SCSS files and theme options, then automatically compiles to your local WordPress install(s) as you save changes. When you are ready to distribute your theme, Forge will build it to a folder of your choice or bundle the theme into an easily installed zip package.

13. Normalize.css (with Sass or Compass)

Normalize.css is a popular HTML5-ready alternative to CSS resets. It makes browsers render all elements more consistently and in line with modern standards, precisely targeting only the styles that need normalizing. This is the Sass/Compass port of that file, which utilizes legacy IE support variables, a CSS3 box sizing mixin and vertical rhythm mixins.

14. Sass for WordPress

Sass for WordPress is a plugin that enables the use of Sass in WordPress projects, with support for both Sass and SCSS syntax. It watches for changes to your Sass files and re-compiles your CSS when needed. We recommend you run the plugin locally when developing your theme(s) and upload the compiled CSS along with the reset of your theme, if you can’t or don’t want to install the Sass and Compass gems on your hosting environment.

15. Sassaparilla

 

 

Sassaparilla is a fast way to start your responsive web design projects, harnessing the power of Sass and Compass. Its core focus is on better, beautiful typography with the correct vertical rhythm. It allows you to work in pixels, then compiles in Ems, and works with CSS variables, keeping them all in one place for safe keeping. Setup is simple, with extensive documentation, available on GitHub to fork.

16. Sass Modular Scale

Sassy Modular Scale is a Sass-based mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio. It was inspired by and adapted from Tim Brown’s Modular Scale, and can be used as a Compass Extension or installed as a Ruby gem. Included are functions for a number of classic design and musical scale ratios, with the ability to add your own ratios, as well.

17. MVCSS

MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style, broken down into three primary sections: application, core and modules. The architecture and accompanying Styleguide and Library mesh preferred practices and other well-documented methods, such as OOCSSBEM and SMACSS, into one place.

18. Bootstrap Sass

Bootstrap Sass is a Sass-powered version of Twitter’s Bootstrap, ready to drop right into your Sass-powered projects. Installation is straightforward: Set up your Ruby On Rails installation, import Bootstrap in an SCSS file to get of all Bootstrap’s styles, mixins and variables, then include Bootstrap’s JavaScript files. Once you have installed the gem and created a new project, you will start with a styles.scss file ready for your alterations, a compiled stylesheet and a copy of the Bootstrap JavaScript and images in their respective folders.

19. Prepros

Prepros is an app dedicated to making compiling code easier. It compiles all of your Sass, Scss, Compass, Less, Jade, Haml and CoffeeScript in real time, with live browser refresh to keep your preprocessing workflow seamless. It has no dependencies and features a built-in HTTP server, background file watch, error notification and live CSS injection. There is also a Chrome Extension for Live Browser Refresh, but please note, it is a Windows-only application.

20. Assembling Sass

 

 

Assembling Sass is a free online course from Code School to learn Sass and start improving your front-end workflow, so you can use Sass for efficient, time-saving styling on large-scale applications. It boasts a solid understanding of Sass, from the foundation to variables, mixins and CSS management to simplifying and optimizing your responsive workflow.

21. Sass Style Guide

CSS Style Guides are common; however, Chris Coyier of CSS Tricks extends this idea to cover choices unique to Sass. While there are common rules you should follow for any style guide, this is a specific list to Sass, including guidelines on nesting, variables, vendor and global dependancies, partials, line mapping, comments, media queries and CSS.

22. FireSass (for Firebug)

FireSass allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles, making it useful for Sass development. To use, just download and install FireSass, then enable Sass’s “debug_info” option. Please note: It hasn’t been updated for some months, but it’s worth exploring as a useful tool in your workflow.

23. Zocial

Zocial is a CSS3 social buttons Sass framework. And the vector icons are implemented with a Sass @font-face mixin, usable as a Compass extension. The project includes buttons for Twitter, Facebook, Google+, GitHub, RSS, Smashing Magazine and many more. There is also full documentation on how to get started.

24. Breakpoint

Breakpoint makes writing media queries in Sass super simple — just create a variable using a simplified syntax, based on most commonly used media queries, then call it using the “breakpoint” mixin. Breakpoint handles all of the heavy lifting, from writing the media query itself to handling cross-browser compatibility issues.

25. Grails Sass/Scss Plugin

Grails is an open source, full stack web application framework, used by companies such as LinkedIn, Sky and Netflix. It takes advantage of the Groovy programming language to provide a productive and streamlined development experience. This plugin adds Compass, Sass and Scss support to Grails, and automatically compiles the code.

via Mashable