Thursday Roundup # 11
Font Stack Builder: Build And Preview Your CSS Web Font Stacks
Cascade of typefaces in the CSS font-family property specify your choices, and your visitors see whatever they have available, in order of your specified importance:
font-family: Arial, Tahoma, Times New Roman, Times, serif;
Font Stack Builder helps to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts are displayed on Windows, Mac and Linux Web browsers.
ColrGrabr makes it easy to scrape the colors of a specific website by simply entering the URL of the website or using its bookmarklet.
Bootswatch is a collection of free themes for Twitter Bootstrap. Very simple to use, download a CSS file and replace the one in Bootstrap, no messing around with hex values.
Pagify is a simple jQuery plugin that simply replaces the contents of a div with content from other html files. This free plugin is lightweight and far less than 100 lines of code, well commented and easy to understand and extend! Get started by only specifying a list of pages or customize animations, default pages and caching!
Image compression is found in every native media format. However the difference between GIF, PNG, and JPEG is how the information is compressed and display on-screen. There are so many tips for composing great image media published on the web, and yet many designers still do not understand some of the fundamentals.
In this guide author shares a few ideas for proper JPEG compression. You want to optimize your images to decrease webpage load times while also holding a decent level of quality. It’s all about finding balance between file sizes and screen depiction. There is no perfect solution for designers to follow. It takes some initial practice, but once you understand JPEG compression it becomes much easier developing websites in the future.
EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readibly and they work nicely with version control systems.
With the advent of high DPI device screens like Apple’s retina display, creating high resolution apps has become a standard for native app developers. But what about us mobile web folks? Most elements like text and images are automatically handled for us by the browser and display in the highest resolution possible. But when we use CSS styles like borders and shadows, 1px really ends up becoming 2px (at least on the retina display). So in order to create a higher resolution experience we need a way to set less than 1px borders.
cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth!
It support many CSS3 properties including Border radius, box shadow, flex box, RGBA, gradients, multiple columns, border image, transforms, transitions, opacity, inline-block and ellipsis.
Mni HTML vCard is a free HTML jQuery vCard portfolio template. It is a jQuery powered single-page, mini website that can be used to display personal porfolio for user and show case products for startups.
- Image Gallery for Portfolio with Pagination and Lightbox Support
- Fully-functional PHP Contact Form with Validation
- Cross Browser Compatible
- Easy to Customize – Very Little HTML Knowledge Required
Recline supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).
HubInfo is a jQuery plugin to show information about your GitHub repo. HubInfo is handy if you want to showcase all your GitHub repos in one page.
A set of beautifully designed 133 small UI PSD icons. Very handy for web sites and web applications. This PSD icon set comes with 16×16 size.
Easy pie chart is a lightweight jQuery plugin that uses HTML5 canvas element to render and animate simple pie charts for single values. These chars are highly customizable and very easy to implement.
You can pass number of options to the initialize function to set a custom behavior and look for the plugin.
Responsive Layouts – this is perhaps one of the most discussed topics on web design forums and communities. In fact, responsive layout has become de facto standard for modern web designs. It is majorly because of huge proliferation of hand held devices like tablets and smartphone, and availability of display screens of all sizes and resolutions (I myself use Internet on as big as my 23 inches LED display and as small as 3 inches display screen of my Xperia X10 mini).
jsShare is a jquery plugin that helps you easily share your contents with popular social media applications easily, all social media like Facebook, Twitter provide APIs for applications to share contents from other applications. jsShare encapsulates the internal sharing logic and provides you neat and compact interface to add social media sharing functionality to your web pages and applications easily.
jsShare is rendered as compact button by default, width is toggled upon clicking. jsShare also has a cool fish eye animation effect for social media buttons, which can be turned off by setting value of animate parameter to false.
- jQuery Social Media Share and Bookmark Plugin: jsShare
- Thursday Roundup # 7
- Thursday Roundup # 6
- Thursday Roundup # 9
- Thursday Roundup # 10