background preloader

Front-end

Facebook Twitter

Tools and tutos for modern front-end programming.

Modusagency. Bootstrap 3 Tutorial. Better CSS Drop Caps With “initial-letter” Drop caps are a form of decoration sometimes used at the beginning of a block of text; the initial letter running several lines deep and indenting the body text within these lines.

Better CSS Drop Caps With “initial-letter”

It’s a typographic tradition as old as the history of typesetting itself, and these days we can emulate it with CSS using the ::first-letter pseudo element. Styling that first letter, however, is notoriously clumsy, but the proposed initial-letter property aims to fix that. Let’s examine what it is, what we can do with it, and what we can expect in the future. Let’s begin with a demo; a paragraph of text. This isn’t bad, and can be further tweaked with line-height, positioning and so on. The initial-letter property, currently being discussed as an Editor’s Draft by the W3C (about as early on in the standardising process as it’s possible to be), aims to give us the precise typographic control we want. The first value it takes determines the size of the initial letter, in terms of how many lines it occupies. Responsive Design With Viewport Control. When it comes to implementing responsive design, css media queries seem to get all the attention.

Responsive Design With Viewport Control

Although admittedly all the leg work is done with media queries, a site is not responsive without viewport control. When we want to alter the layout of a site depending on screen size, we typically write something like this: When testing the responsiveness of the site by resizing the browser, everything seems to work fine. Unsplash It. Download Builder. How to Localize a WordPress Theme and Make it Translation Ready. Localizing WordPress themes isn’t something developers should simply dismiss.

How to Localize a WordPress Theme and Make it Translation Ready

And if you’re a developer who doesn’t know how to localize a theme, then you should definitely read on. This is the second post in a series on translating WordPress. Flexbox in 5 minutes. Learning / Tuto (Node.js) CSS Guidelines – High-level advice and guidelines for writing sane, manageable, scalable CSS. Taxonomies Filter Widget. Taxonomies Filter Widget is a robust but powerful WordPress plugin that creates a widget which acts as a filter for your categories, tags, taxonomies and numerical custom fields.

Taxonomies Filter Widget

Visitors will then be able to do faceted searches on your site to filter posts and pages by taxonomies and numerical custom fields, using drop-downs, checkboxes, radio buttons, multiselect and range sliders. While built especially for sites with a variety of categories, custom taxonomies and custom posts (eg: shops, directories, tutorials, job boards or listings), this plugin will also do a great job at filtering the WordPress posts and pages by categories, tags and even post format. Check a video demonstration here or use the live preview to see it in action. WooCommerce demo using this plugin to filter products by multiple categories and by a price range slider! You can filter: Regular posts, Pages and Custom Posts By the following: Categories, Tags, Taxonomies , Numerical Custom Fields Using any of these: Features. How to Customize the Breadcrumb Appearance in WooCommerce.

WooCommerce is a great plugin for enabling eCommerce within your WordPress website.

How to Customize the Breadcrumb Appearance in WooCommerce

It provides great functionality and easy-of-use. One great feature are breadcrumbs. Out of the box, WooCommerce has breadcrumbs that look pretty nice. Depending on the site you are building you may want to customize them. By default, they look something like this: Create a Cool Website with Fancy Scrolling Effects. I’m sure we’re all familiar with the popular parallax effect in web design.

Create a Cool Website with Fancy Scrolling Effects

It has become a great tool to create a fun browsing experience that responds to the user’s controls as they scroll up and down the page. In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects. This tutorial will be a walkthrough of my design process for a simple portal site that presents all of my websites and social profiles.

Each website has its own individual section in a series of ‘slides’ laid out vertically. With the help of some cool jQuery plugins clever scrolling and parallax illusions are added to inject an element of fun and novelty to the site. View the final fancy scrolling website Before jumping into any code flesh out your design in Photoshop and develop each individual slide. Begin exporting all the required imagery ready for creating the design in HTML and CSS. Parallax Tutorial using CSS and jQuery. How to implement parallax effects on scroll using CSS & jQuery Ever wondered how to achieve parallax effects on scroll?

Parallax Tutorial using CSS and jQuery

I'll show you how simple it can be, using CSS & a bit of jQuery. A Simple Parallax Scrolling Technique. Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth.

A Simple Parallax Scrolling Technique

As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it. In this tutorial, I'll teach you the simplest parallax scrolling technique you've ever came across, so let's dig in! This technique revolves around controlling the speed of background image. So let's begin with the HTML markup, creating two sections along with the required attributes: "data-type" and "data-speed".

How to create a parallax scrolling website using Skrollr.js. Today’s parallax website tutorial is a detailed explanation of the Parallax Scrolling Effect using Skrollr.js published a few weeks ago.

How to create a parallax scrolling website using Skrollr.js

You will learn how to create a simple parallax scrolling website using Skrollr.js plugin. If you haven’t seen the demo already, go and check it out. Cross-browser Web Fonts part 3: Hyphens, Text Rendering, and Font Feature Settings. Widespread browser support for @font-face has done wonders for web typography, allowing us the freedom to use custom fonts wherever we want.

Cross-browser Web Fonts part 3: Hyphens, Text Rendering, and Font Feature Settings

But different fonts are not the whole story with web typography. There are other things that the web has long been weak at, such as proper hyphenation of long words, and usage of open type font features such as ligature and stylistic swashes that often get locked away inside font files and never see the light of day. In this article we will look at some of these new CSS font features. hyphenation This section could also be named something like “solving the problem of justified text/long words looking awful in text columns” … but that would sound really terrible too, so I just stuck with plan A.

Fortunately there are now ways to deal with the problem, which work across most browsers you might have in your support matrix. TweakStyle - Your next Code Editor. Crowdfunding campaign ended The crowdfunding campaign have now reached its deadline. Thanks to all of you, we have raised more than $8000.We're extremely grateful for that and we're going to do everything in our power to deliver the very best product for you all. BookBlock: A Content Flip Plugin.

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages. View demo Download source BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism. Favicon Generator - Generate favicon pictures and HTML. Building Responsive Websites Using Twitter BootStrap. Before we start, there are a few things that you should know.

This is a sequel to my previous article, Twitter Bootstrap Tutorial – Handling Complex Designs, which showcased many basics about building websites using Twitter Bootstrap from scratch. I highly recommend you read the previous article before jumping into the responsive nature of Twitter BootStrap. I am very thankful to our readers who praised my previous article and encouraged me to write the sequel to it. I hope you take away some useful knowledge from this article, too! While the Release Candidate 1 of Twitter Bootstrap 3 is already out, we will be using version 2.3.2, which was their last most stable framework version. CSS3 : Transformations 2D.

CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. The Ultimate Guide to Social Media Image Sizing. In this day and age of what seems like endless social networks it can be a pain to find out what size images to upload for each site. Most sites have their own sizes that they utilize and as such it can be a real pain trying to figure all of that out. until now…. LunaMetrics has released this awesome infographic detailing the correct size for most of the popular social networks. This includes sites such as FAcebook, Twitter, Google Plus, Pinterest, Youtube and Linkedin.

If you have been having trouble trying to size your image correctly then this is the image you need to check out. Pin It. jQuery Boilerplate. Collecting all the cheat sheets. OverAPI.com Collecting All Cheat Sheets Python jQuery NodeJS. A touchable jQuery lightbox.

Transitions

25 Tutorials of Advanced User Interface CSS3 Effects. We all know that technology is evolving like anything and since web browsers are constantly making changes and improving their standards, web developers have to become shrewd and they, too, are constantly trying to adopt the changes. I personally believe that all these changes are positive and this will definitely lead to enhanced support and of course making frontend development time a lot more convenient. Since new techniques are being introduced every now and then, I think the best way to learn new stuff is through online tutorials. Extending HTML5 — Microformats. While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn’t an element with the right meaning. What we want are ways to extend what we’ve got, to add extra semantics that are machine-readable — data that a browser, script, or robot can use. Native ways to extend HTML. Transitional Interfaces, Coded.

Pasquale D’Silva’s article Transitional Interfaces has really been making the rounds. Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better. Twitter Feed for WordPress : Afficher vos derniers tweets. How To Display Your Last Tweet Using Javascript And The Twitter API.

Create a new Fiddle - jsFiddle. Infinite Scroll avec jQuery sur WordPress. jQuery – Effet smooth scroll (défilement fluide) - Tutoriels. Minimalistic ScrollSpy. Comment faire un « infinite scroll » en jQuery. Drag and drop font testing. 10 Useful jQuery Lightbox Plug-ins. We are certain that you are already familiar with the concept of jQuery LightBox plugins. Dig deep into CSS linear gradients. Creating a Filterable Portfolio with WordPress and jQuery. 8 ressources jQuery pour vos prochains sites. Un e-mail en HTML responsive multi-clients.

Pens picked by the Editors of CodePen. A Filtering Portfolio with Quicksand & Custom Taxonomies - Zoe Rooney. Learn HTML5, CSS3, Javascript - video style tutorials. jQuery.BlackAndWhite - Gianluca Guarini. Implementing Off-Canvas Navigation For A Responsive Website. Build a smart mobile navigation without hacks. Expanding Overlay Effect. Responsive Boilerplate Framework. Fixing IE onChange event for checkboxes and radio buttons.

Un background animé avec jQuery Parallax. Form Follows Function. Dropzone.js. Centurion - A CSS Web Framework. JsPerf: JavaScript performance playground. A simple guide to responsive typography. Getting to Know CSS3 Selectors: Structural Pseudo-Classes.

Canvas

Focal Point: Intelligent Cropping of Responsive Images. Un arrière-plan extensible intelligent. Disable Autocomplete, Autocapitalize, and Autocorrect. Jcrop - Deep Liquid. Gmap3 : A jQuery plugin to use google maps. Any List Scroller - Un plugin jQuery pour faire slider des listes HTML. 4 Solutions for Full-Screen Background Images. Perfect Full Page Background Image.

Skrollr, script JS de défilement parallaxe (et plus) Pretty HTML5 multiple file upload with Bootstrap, jQuery, Twig and Silex. CSS Design: Going to Print. The Facebook Loading Animation in CSS. Les microdonnées par l’exemple. Rhinoslider. One% CSS Grid - 12 Columns Fluid CSS Grid System.

LESS

Sprites. Loading CSS spinners and bars generator for AJAX & JQuery. Mozilla/pdf.js @ GitHub. Making a jQuery Countdown Timer. ColorBox. Circular, Responsive jQuery Carousel - CarouFredSel. jQuery API. jQuery UI.