background preloader

CSS Style Guides

CSS Style Guides
As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Let's round up some existing ones. But first... I love pattern libraries. The List I'll list some excerpts from each that I like below. GitHub GitHub CSS Style Guide → As a rule of thumb, don't nest further than 3 levels deep. Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. Google Google HTML/CSS Style Guide → Use ID and class names that are as short as possible but as long as necessary. E.g. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability. E.g. .demo-image not .demoimage or .demo_image Idiomatic CSS Nicolas Gallagher's Idiomatic CSS → More?

web services - Understanding REST: Verbs, error codes, and authentication How to Customize Browser Scrollbars Using CSS We`re all using web browsers to navigate on internet. Most of you(to be more specific, 65% according to my analytics) are using Chrome and Safari to navigate through this website. These 2 browsers have something in common: they are both built on the WebKit platform, or in other words, they are WebKit browsers. Did you know that you can customize the way a scrollbar looks? Customizing scrollbars is easy, being based on a pure CSS solution, but there`s a glitch: custom scrollbars works only for WebKit browsers. Let`s write some code: As you noticed already, each element has the custom prefix ::-webkit-.

RESTful Web services: The basics The basics REST defines a set of architectural principles by which you can design Web services that focus on a system's resources, including how resource states are addressed and transferred over HTTP by a wide range of clients written in different languages. If measured by the number of Web services that use it, REST has emerged in the last few years alone as a predominant Web service design model. REST didn't attract this much attention when it was first introduced in 2000 by Roy Fielding at the University of California, Irvine, in his academic dissertation, "Architectural Styles and the Design of Network-based Software Architectures," which analyzes a set of software architecture principles that use the Web as a platform for distributed computing (see Resources for a link to this dissertation). This article suggests that in its purest form today, when it's attracting this much attention, a concrete implementation of a REST Web service follows four basic design principles: Back to top

Performance & Organization - An Advanced Guide to HTML & CSS Having the ability to write HTML and CSS with a solid understanding is a great expertise to have. As a website’s code base and traffic grows, a new skill set comes into play, one that is extremely important to both development time and user experience. Knowing the fundamentals of website performance and organization can go a long way. The organization and architecture of a code base can greatly affect not only the speed of development, but also the speed at which pages render. Both of which can be sizeable concerns not only for developers but also users. Additionally, taking a few small steps to improve the performance of a website can pay off in dividends. Strategy & Structure The first part to improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Style Architecture The architecture outlined above includes three directories, all with individual groups of styles. Object Oriented CSS Choosing a Methodology

Simple example - Node.js, Restify, MongoDb and Mongoose - Backbone.js Tutorials Before I start, the Backbone.js parts of this tutorial will be using techniques described in "Organizing your application using Modules to construct a simple guestbook. Getting started To easily understand this tutorial you should jump straight into the example code base. Example Codebase Example Demo This tutorial will assist you in saving data(Backbone.js Models) to MongoDb and retrieving a list(Backbone.js Collections) of them back. The technologies This stack is great for rapid prototyping and highly intuitive. Node.js "Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Restify "Restify is a node.js module built specifically to enable you to build correct REST web services. MongoDb "MongoDB (from "humongous") is a scalable, high-performance, open source NoSQL database." Mongoose "Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment." Building the server Restify configuration Mongoose Schema

Code a Spinning Circular Menu With CSS Don’t be a square, break outside your boring box and try on a circle for size. Today we’re going to build a circular navigation menu that spins to different points as the user hovers over an anchor. Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works. Launch Demo – Download Files Step 1: Structural HTML Before we write a single character of HTML, we have to figure out the structure of what it is that we’re building. Basically, each of the rectangles at the top are tied to one of the four little circles inside of the big circle. Every time I try to pull off a remote hover, it takes me a few tries to get the structure just right. Let’s say that we put this structure into place with the idea that we wanted a hover over the anchor to change the color of the paragraph. As it turns out, this simply doesn’t work. So what do we do? Application Take a Look!

RESTful API Design: Teach a Dog to REST | Apigee UPDATED November 2011: Check out the second edition of the webinar - RESTful API Design. It's been 10 years since Roy Fielding first defined REST in his dissertation on Architectural Styles and the Design of Network-based Software Architectures. Since then, REST is often held as the standard for usable, well-designed, easy-to-integrate APIs. At the Cloudstock hackathon, I presented "Teach a Dog to REST," asking the question: where are all the elegant REST APIs we'd all hoped to see? While many claim REST has arrived, many APIs in the wild exhibit arbitrary, productivity-killing deviations from true REST. Slides + Audio: Architectural Styles and the Design of Network-based Software ArchitecturesSo, where are all the elegant REST APIs?

All About Cubic Bezier Curves & Transitions In the last post, we looked at the basics of CSS transitions, including how to use easing to control how your animation flows. In this post, I want to look deeper at a very powerful easing feature; cubic bezier curves. In short, they let you define exactly what path your animation will take, and thanks to some awesome community tools, they are extremely easy to use (No maths required at all). This gives you total flexibility with your transitions. One of the best tools is the free Cubic-Bezier.com by Lea Verou. It lets you make new curves and see them in action just by dragging the handles. The syntax is simple too. The linear part is actually a shortcut though. For now, you could rewrite that line to use the cubic-bezier function and get the exact same animation: That one line can now be used in any transition, and to tweak the animation, all you need to do is change those 4 bracketed values. What Is This Graph? Let’s take a look at the linear graph, and see what it means. The Ease Graph

Related: