CSS Sprites: What They Are, Why They're Cool, and How To Use Them. By Chris Coyier On This article has been revised and re-written several times since its very first publication in 2007, to keep the information current.
The most recent revision was done by Flip Stewart in January 2015. #What are CSS Sprites? Spoiler alert: they aren't fairies that write your stylesheets for you. I wish. To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games. CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it. #Why use CSS Sprites? It may seem counterintuitive to cram smaller images into a larger image. Let's look at some numbers on an actual example: That adds up to a total of 14.38KB to load the three images. While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request. Thus, sprites are important for the same reasons that minifying and concatinating CSS and JavaScript are important.
Base · Twitter Bootstrap. Twitter Bootstrap. Components · Twitter Bootstrap. Javascript · Twitter Bootstrap. Foundation: Grid System. Foundation Icons Fonts - ZURB Playground - ZURB.com. Settings heart star plus minus checkmark remove mail calendar page tools globe cloud error right-arrow left-arrow up-arrow down-arrow trash add-doc edit lock unlock refresh paper-clip video photo graph idea mic cart address-book compass flag location clock folder inbox website smiley search phone General Enclosed Set.
Off Canvas Layouts CSS - Foundation 3 - ZURB Playground - ZURB.com. Off Canvas What Now?
If you've used Facebook's iPhone app (or Path, or any number of apps that now follow this convention) then you've seen an off canvas panel in a native app. You hit a button and a panel slides in from the left (or depending on how you look at it, the main panel slides out of the way). Luke Wroblewski, author of Mobile First, mentioned this style of layout in his roundup of mobile layout patterns. He and Jason Weaver then worked to create a batch of layouts, which they published to demonstrate how layouts like this could work on the Web. We were so impressed that we wanted to make that style of layout available for Foundation users, and the four layouts below are a few different examples of off-canvas layouts created specifically for Foundation. Four Layouts, No Waiting. Orbit: jQuery Image Slider Plugin from ZURB - ZURB Playground - ZURB.com. 1.3.0 (1/25/2012): Add custom events to allow control via custom JavaScript.
Scaffolding · Twitter Bootstrap. Need reasons to love Bootstrap?
Look no further. By nerds, for nerds. Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web. Made for everyone. Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!) Reuze.me - A Generator of lightweight semantic HTML/CSS for content-driven sites. Sass - Syntactically Awesome Stylesheets. Sass - Syntactically Awesome Stylesheets. Before you can use Sass, you need to set it up on your project.
If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Preprocessing CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.
The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. Sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. Sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. Variables SCSS Syntax. File: SASS_REFERENCE. Sass is an extension of CSS that adds power and elegance to the basic language.
It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library. Features Fully CSS3-compatible Language extensions such as variables, nesting, and mixins Many useful functions for manipulating colors and other values Advanced features like control directives for libraries Well-formatted, customizable output Firebug integration Syntax. Responsive Web Design. The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence.
Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Creative decisions quite literally shape a physical space, defining the way in which people move through its confines for decades or even centuries. 960 Grid System.