Navigation

Home
Search
Submit A Resource
Contact Us
About Functionn

Subscription Options


Subscribe By Email (265+)


Lists


Archives

Showing posts with label typography. Show all posts
Showing posts with label typography. Show all posts

Nov 10, 2012

Plusstrap - A Sleek, Intuitive, And Powerful Front-End Framework For Faster And Easier Web Development

Plusstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.  Forked from Twitter Bootstrap, built by @xbreaker, Plusstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Plusstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Plusstrap your own.

Requirements: None
Demo: http://xbreaker.github.com/plusstrap/
License: Apache License v2.0

Nov 5, 2012

Author: Hirvesh Posted At: 11/05/2012 Tags: , , , , , , , , , , , , , ,

Fluidity - A Modern CSS3 And HTML5 Framework For Node.js/Stylus

Fluidity is a CSS framework made for web designers who would like a CSS framework simple enough to quickly express their ideas, smart enough to help with the mundane, and lean enough to stay out of the way and let them write pure CSS3 syntax.

It's built using the awesome Stylesheet language Stylus and all the super powers it has for working with CSS. Fluidity now includes normalize.css, some base-line typography, a grid system that can be used semantically or with in-line classes to create both fluid-width and fixed-width designs, a collection of transparent mixins that gracefully handle browser pre-fixes for CSS3 properties.

Fluidity is for any web designer that knows how to use CSS and want to use CSS3 features now, a fluid semantic and responsive grid, and code their CSS in a clean and maintainable way using a powerful stylesheet language. There is a slight learning curve for designers who have never used Stylus before, so it is highly recommended that you familiarize yourself with the Stylus Stylesheet language and the Node.js environment.

Requirements: Node.js, Stylus
Demo: http://fluiditycss.com/
License: MIT License

Oct 23, 2012

Author: Hirvesh Posted At: 10/23/2012 Tags: , , , , , , , , , , , , ,

Typeset.css - A No-Nonsense CSS Typography Reset For Styling User-Generated Content

Typeset.css is a no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content. 

Typeset.css is a CSS file (typeset.css) that includes all the styles you need to ensure content on your site is styled. Styles are only applied to areas that have a parent element with the class typeset, so it can be target content-specific markup.

Common user-generated content includes anchors, bold and italic text.  Also common phrase tags are <code>, strong and emphasis (much like bold and italic).

Typeset.css is not a CSS framework for styling the layout and design of your website - just specific blocks of content (e.g., blog posts, comments, forum content) that includes paragraphs, lists, code snippets, and so on.


When to use this

Any time you have stripped a browser’s default styles or haven’t specified styles for content elements, use Typeset.css. It’s great for:

  • Blog posts
  • Articles
  • Comments
  • Helper text in web apps
  • Any other content blocks on a page

Never again add content to your web page just to find that you don’t have a consistent style for it.  Typeset was originally created for user-generated content on UserVoice feedback forums (here’s an example UserVoice forum), and then expanded to work with content generated by UserVoice-powered knowledge base articles (example article). Because users create these articles using a WYSIWYG editor with HTML-editing capabilities, we needed to make sure we had a base set of styles for any content-related markup.

Requirements: None
Demo: http://joshuarudd.github.com/typeset.css/
License: MIT License

Sep 22, 2012

Author: Hirvesh Posted At: 9/22/2012 Tags: , , , , , , , , , ,

Kube - A CSS Framework For Professional Developers

Kube is a CSS framework for professional developers.  It is minimal and enough, adaptive and responsive.  It has a revolutionary grid and beautiful typography.  Kube comes with no imposed styles and only freedom.  A LESS version is also available.


Browser Compatibility

  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Opera
  • IE 8+

Requirements: None
Demo: http://kubeframework.com/
License: Free

Jul 19, 2012

Author: Hirvesh Posted At: 7/19/2012 Tags: , , , ,

jQuery TypeButter - Allows You To Set Optical Kerning For Any Font On Your Website

TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you.


What Is Optical  Kerning (Source)?

Optical Kerning adjusts the spacing between adjacent characters based on their shapes and pays no mind to the kerning pairs.

Theoretically, Optical kerning will give you more consistent character spacing, because every character pair, even the most unlikely ones like zh or xw or gk, is kerned based on its character shapes. It's a matter of preference, but here are some things to consider:

  • If your font includes few built-in kerning pairs, you're better off with Optical Kerning. Decorative and novelty fonts are likely to have few kerning pairs.
  • When combining two typefaces in the same paragraph, the two fonts may use very different kerning metrics and may not look right side by side. This is another occasion when you'll be better served by Optical Kerning.
  • You might want to view Metrics vs. Optical Kerning as a microcosm of the timeless drama of man vs. machine. Optical Kerning will be more consistent, more mathematically correctbut will it look better? Ultimately it depends on the quality of the metrics you are comparing it against.
So basically, that's what the jQuery Kerning does.

Requirements: jQuery
Demohttp://typebutter.com/demo/
License: CC Share-Alike 3.0 License
 


Recent Posts

Popular Categories



Popular Components



Popular Licenses