Existing WYSIWYG content editors were designed for immutable display media. In contrast, Sir Trevor is rich content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered.
No HTML is stored, only structured JSON and clean Markdown. Sir trevor content is made up of blocks. And you can easily add your own as well. Sir Trevor has been tested on the following modern browsers: IE10+, Chrome 25+, Safari 5+, Firefox 16+.
Requirements: Underscore (or LoDash), jQuery (or Zepto) and Eventable
Demo: http://madebymany.github.io/sir-trevor-js/
License: MIT License
Wrangle is a responsive, touch-friendly selection plugin for jQuery or Zepto. Wrangle offers a unique method of multiple selection: by drawing a line through items to select them. It gives your app a new way to perform multiple selections: a mouse, a finger or a stylus.
The plugin is lightweight and designed to be exstensible and adaptable. It’s also highly experimental, due in no small part to the diversity of touch implementations in various devices and browsers.
Requirements: jQuery or Zepto Framework
Demo: http://zurb.com/playground/wrangle-jquery-plugin
License: MIT License
Designers checklist advices is a personal project by Adrien Heury, french UI/UX designer at NOE interactive and working sometimes with his sister under the name Heury & Heury. You can read a lot of design related list based articles. I am sure designers will find it usefull and there will be more “checklists advices” of designers in the future.
Source: http://adrien-heury.net/designers-checklists/
Gumby Framework is a flexible, responsive CSS Framework, Powered by SASS. Create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit. It is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.
Gumby is developed following the latest standards and specs. In order to stay on the cutting edge, Gumby supports modern web browsers like: Chrome, Firefox, Opera, Internet Explorer 8 – 10.
Requirements: –
Demo: http://gumbyframework.com/
License: MIT License
An effort to make beautiful forms for web applications that make data entry less painful. Grid forms is a front-end library which handles the boiler plate necessary to build grid based forms.
Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. It’s a tiny Javascript/CSS framework that helps you make forms on grids with ease. You can also include Scott Jehl’s Respond.js if you want the form to be responsive in ie8.
Requirements: JavaScript / CSS Framework
Demo: http://kumailht.com/gridforms/
License: MIT License
Progress bars have become quite popular lately, and there are lots of plugins that can help you add one to your site. But how do you make one yourself? The problem is that there are plenty of implementations already, so Tutorialzine has published a tutorial, teaching us how to code buttons that have built in progress meters.
They will be perfect for displaying progress while submitting forms or loading content via AJAX. They will also use CSS3 styles and transitions to make them easy to customize.
Requirements: –
Demo: http://demo.tutorialzine.com/2013/10/buttons-built-in-progress-meters/
License: License Free
Designers overlook it. Developers demand it. There’s always been a need for discernible web design in Photoshop. Nobody likes inheriting muddy PSDs. PSD Validator can find out how good your PSD file is structured using some of the rules from Photoshop Etiquette.
Requirements: –
Demo: http://www.psdvalidator.com/
License: License Free
Six months ago, Ghost was revealed the public for the first time on Kickstarter. It raised more than $100,000 in the first 48 hours of funding, and went on to triple that figure within its 29 day funding period, the Ghost prototype received more attention than ever before as people finally saw the platform in action.
Ghost is a platform dedicated to one thing: Publishing. It’s beautifully designed, completely customisable and completely Open Source. Ghost allows you to write and publish your own blog, giving you the tools to make it easy and even fun to do. It’s simple, elegant, and designed so that you can spend less time messing with making your blog work – and more time blogging.
Ghost is free software released under the MIT License, which pretty much means you can do anything you want with it. The MIT License is one of the most free and open licenses in the world, and does not restrict how you use the software which it’s applied to. We believe open source software should be free. As in free.
Requirements: –
Demo: http://ghost.org/
License: MIT License
Running an online store is far not as easy as it seems at first sight. However, if you are a smart merchant, you can’t ignore the fact that we have already entered the era of e-Commerce, so ‘the game is worth the candle’.
Did you know that by 2016, more than $320 billion will be spent on online shopping according to Forrester Research? Just think about it! This is impressive.
Of course you would like to put your finger into this hot, delicious pie. The problem is that now online commerce becomes something ordinary. That is, online stores pop up like mushrooms making tough competition to each other. Even the most quality expensive design can’t guarantee high conversion rates. Moreover, even if you run a successful street store, it doesn’t mean that the same thing will happen on the net. Cyberspace requires certain changes in your business strategy, psychology, and deeper understanding of the difference between the two parallel worlds.
To make your online store stay afloat you need to keep in mind hundreds of details like replenishing products stock, driving more traffic to your store, inventing new promo campaigns, responding to unsatisfied customers, training your employees and so on.
So, the goal of our today’s blog post is to lay down some concrete tips on global e-business strategies. In other words, to share some secrets on how to make people living worldwide buy from you and bolster them with good examples of e-commerce stores that managed to become successful despite the difficulties they met on their way to popularity.
Follow these life hacks and they will help you deliver superior customer experience, boost business efficiency, expand product market and raise your income. Read the rest of this entry »
A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.
Start with Markup First
While you probably already have a design in mind that fits with the rest of your site, concentrating on HTML first, before worrying about the presentation and CSS, will help you keep your markup clean and tight. This results in better front-end performance and aids in organization as you continue your development. Figure 1 illustrates the end result.
Figure 1. Completed navigation bar
Break It Down
You’ll learn the rationale and code for each step in the build process:
- HTML structure
- Structural styles: aligning the items, padding, and margins
- Decorative styles: gradients, text color, border radius
- Special interactive styles using pseudo class selectors
HTML Structure
Solid HTML structure is the foundation of any Web page. There are many different ways to achieve the same visual result, but some structures offer advantages like semantic meaning and can help you keep your corresponding CSS stylesheets in order.
Using HTML5 Semantic Tags
Before HTML5, the tag <div> was a one-size-fits-all containing element for anything from main text sections to footers. However, new semantic tags like <header>, <nav>, <section> and <footer> better organize markup into meaningful sections and reduce the need for repetitive class names in you stylesheets. Since most modern browsers support HTML5, it’s best to take advantage of these new descriptive tags to give your markup contextual meaning. Read the rest of this entry »
