After over a month since the last article of this kind I decided to post a new one with, of course, new tools new toolsthat could make your work easier and better. Some of these tools have made a big buzz the last month in social media and also on various newsletters that are targeting web designers.
The most popular one that has been insanely shared is screensiz.es which offers a really nice overview of the devices that you have to build responsive websites for. Besides this one, Pure and Joel Glovier’s Microframe Template were also received very well by the community.
The other items that are in this article, besides the ones already mentioned, haven’t received the exposure they deserved and instead of submitting them individually to various websites, I’d rather put them all in one place to be easier to find.
I hope these tools and resources will be useful to you and will make things easier for you.
Pagekit
Pagekit is a modular and lightweight CMS built with Symfony components. No matter if it’s a personal blog or your company’s website. With Pagekit you can create powerful content for the web that works perfectly on every device.
Pagekit’s clean and intuitive interface allows you to focus on what matters most, managing your content.
Phonon Framework
A light weight, scalable, flexible and customizable HTML5 Web – Hybrid Mobile App Framework. Working with a page manager / router inspired by Android Activities.
jQuery DrawSVG
jQuery DrawSVG is a lightweight, simple to use jQuery plugin to animate SVG paths.
Mobile Angular UI
Mobile Angular UI is a mobile UI framework just like Sencha Touch or jQuery Mobile. If you know Angular JS and Twitter Bootstrap you already know it.
FontBase
FontBase is a blazing fast, beautiful and free font manager for Windows. Simply change the color, background, font size, line height and align of your fonts. Apply styles to the whole collection or just to individually selected fonts.
Neutron
A Sass framework that empowers you to create flexible, clear, and semantic website layouts. Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require.
This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project.
AntiModerate
Reduce loading time of page to less than a second on slow connections by loading and rendering nicely blurred micro images on the page while loading full sized images in background which replace as they finish.
Has a nice blur effect thanks to StackBlur so you have a good looking page while it is loading.
roll.js
A little js library (~8kb min, 3kb gzip, no dependencies) to help you keep track of position, scrolling, and pagination.
Workbench
Workbench is a frontend boilerplate build for faster development. Out of the box it includes responsive typography, some basic styling and a paragraph system.
Workbench is not a frontend framework, it is a starting point for new projects to be customized to the need of your project.
Concise CSS
Concise CSS is a framework written in SASS carefully crafted by Keenan Payne and James Kolce, it provides all the basics without the bloat.
notie.js
A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.
smartcrop.js
Smartcrop.js implements an algorithm to find good crops for images.
Popmotion: JavaScript motion engine
MOTION UI
A Sass library for creating flexible CSS transitions and animations. Motion UI’s built-in effects make animating your UI a snap.
clipboard.js
Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.
ESLint
ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.
GistBox
GistBox uses GitHub’s backend but adds its own layer of label and search functionality. It was designed to be a curated, personal snippet library – like long term memory for the practicing software engineer.
screensiz.es
Microframe Template
Microframe is a micro (200px wide), grid based wireframe PSD template for mocking up website and app layouts.
Chart.js
JSHint
JSHint is a tool to detect errors and potential problems in JavaScript code and can be used to enforce coding conventions.
Progression.js
A jQuery plugin that gives users real time hints & progress updates as they complete forms
Pure
A set of small, responsive CSS modules that you can use in every web project.
CollagePlus
This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height.
Pico
A stupidly simple & blazing fast, flat file CMS. Making the web easy.
Selectize.js
Selectize is a jQuery-based custom select UI control. It’s useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). The goal is to provide a solid & usable user-experience with a clean and powerful API.
Clipping Magic
Easily remove the background from your photos to create masks, cutouts, or clipping paths, all done instantly online with ClippingMagic.com
WideArea
WideArea is simple and lightweight JavaScript and CSS library (2KB JS and 4KB CSS) which helps you to write better, simpler and faster.
Sylius is modern e-commerce solution for PHP, based on framework Symfony2.
Flatdoc
Flatdoc is the fastest way to create a site for your open source project.
Swiper
Mobile touch slider & framework with hardware accelerated transitions
Cardinal
Cardinal is a small, “mobile first” CSS framework with some useful default styles, scalable typography, reusable modules, and a simple responsive grid system.
Jekyll
Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through Markdown (or Textile) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.
FlipClock.js
So why use this library when there are many others with the same name? Well, this library was created because the other solutions weren’t abstract enough to provide a deep level of customization without rewriting the code.
Mason
Mason was created to solve a problem with most grid system currently available. Gaps. When using Masonry, Isotope or any of the other grid plugins out there sometimes your grid will contain gaps or ragged edges. Mason was made to fill those gaps in.
Built on the idea of true masonry when a grid is constructed there are bound to be holes, so Mason calculates where those holes are fills them in.
Pingendo
Quickly create rich layouts, with a clear DOM tree-editor, and dozens of ready-to-use snippets. Inspect and edit all CSS rules visually, producing clean, standardized CSS3. Enjoy simplified input for complex values such as colors, gradients and 2D transformations.
Secrets of the Browser Developer Tools
Over the last few years there has been one tool that has helped out every web developer more than any other – the browser developer tools. Working in harmony with the web browser, the developer tools allow us to manipulate DOM elements; gauge performance and debug JavaScript from within the browser window in real time.
Chrome Logger
Chrome Logger is a Google Chrome extension for debugging server side applications in the Chrome console.Most languages include their own logging capabilities, but sometimes it is easier to see your logs right in the browser. Chrome Logger used to be known as ChromePHP.
Picksum Ipsum
Do you love movies as much as you love making cool websites? Then, boy – have we got the lorem ipsum for you! Our badass text generator will give you the best lines from some of the hardest Hollywood legends – we’re talking Eastwood, Caine, Carrey and Freeman – and mix them up ready to work their magic on your new website.
Forecast Font
Forecast Font is a web-font for creating multi-layered weather icons. It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style.
Source: http://ift.tt/1m1AlSC
No comments:
Post a Comment