Quantity Queries – A Tool to Help Build Quantity Queries

So I guess you already know the base id, class and descendant selectors. And this is quite enough for you to get the job done. If so, you’re missing out on a lot of stuff and most likely your code is pretty messy. I know that sometimes it’s hard to remember all of them so lets go through the ones that are quite interesting, rare and most importantly really useful. Technically, CSS doesn’t have the ability to count an element’s siblings.

However, Heydon recently showed us what he calls Quantity Queries: a clever combination of :nth-last-child(), :first-child, and ~ to style elements based on how many elements are in a single parent. Quantity Queries is a tool designed to help build and understand Quantity Queries.

Read Post

Create Pixel Perfect Grids for the Web with Grid Guide

People at Big Bite found it really annoying to have to calculate grid widths — especially within nested spaces — within his designs without ending up with crazy numbers of vertical guides or guide shapes. After not finding a tool that worked exactly how he wanted it too, they at Big Bite created Grid.Guide. Guide to solve the problem. It uses a max width and column count to calculate possible whole pixel column and gutter width combinations. It generates PNGs so you can drag or copy them straight into your designs. It’s free to use!

Read Post

Open Source CMS Built on Node.js and MongoDB

Apostrophe is a design-driven, in-context CMS built on Node.js and MongoDB. It provides the tools to develop both simple and complex content-driven websites through simple templating and modular functionality. The editing experience is designed around the idea that content mangement should be easy, and therefore editors can create and manage their content right on the page itself.

Apostrophe is built on an accessible technology stack that focuses on ease of use as well as performance. Node.js provides an easy entry point for front-end Javascript developers and a playground for experienced back-end developers. The Nunjucks templating language allows for easily including data and editable content on any page. And MongoDB provides the necessary speed to serve Apostrophe’s content-driven pages.

Read Post

jQuery.my – Complex Two-way Data Binding in Real Time

jQuery.my is a plugin for real time two-way data binding. It mutates object given as data source, reflecting interactions between user and UI. Data bindings, facade appearance and CSS styling of an app are all defined using single manifest, which is standard javascript object. Manifests are JSONable.

jQuery.my recognizes both standard HTML controls and complex composites created using rich ui plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile are supported out of the box. jQuery.my provides comprehensive validation, conditional formatting, complex dependencies, runtime form structure manipulation. $.my forms can run nested, each jQuery.my instance can be a composite control for parent form.

Read Post

Bonsai – Contracts, Simple e-Signing, Integrated Escrow

Whenever you start a new project you should have a contract that outlines things like the scope of work, payment schedule and terms, timeline, and intellectual property ownership. The contract should describe what happens in bad situations, such as cancellation of work, late payment, etc. Bonsai is there for you.

Bonsai is a tool for freelancers and consultants to create, sign, and store work contracts, as well as accept payments and escrow for their work. The contracts component is available today, while the payments and escrow component is currently in private beta. Right now Bonsai supports work contracts for creative professionals. These contracts cover things like payment terms, intellectual property ownership, etc.

Read Post

Open Source Lightning Design System by Salesforce

Lightning Design System helps you create the world’s best enterprise app experiences. With the Design System you can build custom applications with a look and feel that is consistent with Salesforce core features — without reverse engineering our styles! Simply download our platform-agnostic CSS framework and get started today.

You can utilize the detailed guidelines to confidently design excellent apps that fit right into the Salesforce ecosystem. With the Design System, you get access to all of the Salesforce core visual and interaction design patterns so that you can follow established best practices and build apps that have a consistent look and feel with the Salesforce user experience.

Read Post

A Lightweight, Customizable CSS Lightbox Gallery Plugin

jQuery LightGallery is a lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery. It uses CSS-only approach for resizing images and videos. So it will be extremely flexible, and considerably faster than using the JavaScript approach. Lightgallery comes with a few built in modules, such as thumbnails, full screen, zoom, etc. It is easy to create your own modules, as well as detach modules that you don’t want to use.

Lightgallery supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag. You also have the option to enable animated thumbnails from the settings. otherwise normal thumbnail will be used. You can also make thumbnails automatically load for your YouTube or vimeo videos. LightGallery uses Hardware-Accelerated CSS3 transitions for faster animation performance. This plugin comes with numerous number of beautiful inbuilt animations.

Read Post

Create Beautiful and Complete Style Guides with Frontify

Frontify lets yous create your complete and beautiful style guide in less than 5 minutes! It’s simple, fast and fun. Document and maintain your brand or design guidelines with an online tool. Forget about the time consuming manual creation of PDF style guides. Frontify Style Guide makes professional style guide creation a fast and fun experience.

Frontify Style Guide is build to be usable without learning, so that you can get started instantly. Our educational material, tutorials and documentations are meant to provide best practices, deeper insights and help inspire our users. Start instantly from scratch, choose between own or various predefined style guide templates. Templates do not only contain editable structure, but also helpful content suggestions and style guide best practices.

Read Post

UpUp Makes Sure Your Site is Always There for Your Users

UpUp is a tiny javascript library that makes sure your users can always access your site’s content, even when they’re on a plane, in an elevator, or 20,000 leagues under the sea. Mobile-First has become the de-facto standard for building modern sites. But in a world where everyone is mobile, an always-on connection isn’t something we can rely on. It’s time to start thinking Offline First. With UpUp you control the content your users see, even when they are offline. And you can do it with just a single JavaScript command.

Read Post

Hovercards – Chrome Extension for Preview Social Links

HoverCards is a chrome extension that lets you preview social links from youtube, twitter, reddit, soundcloud, imgur, & instagram. So next time your friend sends a video you’re too lazy to click, just hover for cards. HoverCards is a browser extension that gives you more context to links when you hover over them. It’s similar to how PH shows a preview of people when you hover over their images.

Read Post

Javvy – 150+ Bite-sized, Interactive Java Tutorials

Learn how to code in Java: Whenever, wherever. With Javvy and its 150+ bite-sized, interactive tutorials, getting started with programming has never been so easy and so much fun. Javvy is the easiest and most entertaining way to make your first steps in programming. Javvy picks you up at the very beginning and allows you to learn at your own pace. With bite-sized tutorials, no break or subway ride is too short for a little coding. Javvy has a ready tongue and is packed with jokes and references to popular culture.

Read Post

Chocolat.js – jQuery Responsive Lightbox Plugin

Chocolat.js enables you to display one or several images staying on the same page. The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails. The viewer may appears full-page or in a block. Chocolat comes with an API and multiples CSS classes which make it very handy to use for advanced users, and very easy to use for newbies. Chocolat works well with all major browser. It has been tested on : IE7+, firefox, chrome, opera, safari.

Read Post

Telepat – Real Time, Open Source Data Sync Backend Stack

Telepat is an open-source backend stack, designed to deliver information and information updates in real-time to clients, while allowing for flexible deployment and simple scaling. Telepat empowers modern apps for the real-time age.

Classic Web APIs deliver on-demand, static information snapshots to clients. Data soon gets outdated, and cannot be synced between multiple clients. Instead of working with data snapshots that get stale, Telepat pushes all new information from the central node to all subscribed devices, instantly.

Read Post

Jets.js – A Native CSS Search Engine

Imagine a situation – your HTML markup renders at backend side, it contains some list of data. At one point you need to implement search by this list. It can be easily achieved by using Jets.js with a browser’s native search speed.

The main idea is not to affect attributes of each tag in the list while filtering. Instead apply dynamic CSS rule in only <style> tag and browser will decide which item of list to show or hide. Since it’s just CSS – Jets.js may be applied to any tag, whether it’s a table or UL, OL, DIV… Jets.js is a native CSS Search Engine.

Read Post