background preloader

Sass: Syntactically Awesome Style Sheets

Related:  SASSCSS

Functions — Sass Documentation Methods in this module are accessible from the SassScript context. For example, you can write $color: hsl(120deg, 100%, 50%) and it will call #hsl. .css Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under. Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. Edit this on Github Powerful New CSS- and JavaScript-Techniques (2012 Edition) Advertisement Since our last round-up of useful CSS techniques1, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage. Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques.

Fluid Grids Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. How Browsers Work: Behind the scenes of modern web browsers Web browsers are the most widely used software. In this primer, I will explain how they work behind the scenes. We will see what happens when you type in the address bar until you see the Google page on the browser screen. The browsers we will talk about

Sass functions cheat sheet ##Sass Functions Cheat Sheet ####RGB Functions rgb(­$red, $green, $blue) Creates a color from red, green, and blue values. rgba­($red, $green, $blue, $alpha) Creates a color from red, green, blue, and alpha values. red(­$co­lor) Gets the red component of a color. gree­n($­col­or) Gets the green component of a color. The Shapes of CSS CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.

Keep your CSS selectors short 15 May, 2012 One thing I believe, as a very, very general rule of thumb, is that as sites get bigger, selectors should get shorter. By this I mean that if you want to create extensible and maintainable, flexible and predictable websites, you should really take care to make your CSS selectors as dev-friendly as possible; i.e. short. Keeping CSS selectors short helps with a lot of things: Increases selector efficiencyReduces location dependencyIncreases portabilityReduces chances of selector breakageDecreases specificityCan make code more forgiving

Related:  CSSWeb DevelopmentgradywatsonWEB DESIGNSensha TouchPréprocesseursmbellevilleIntégration