background preloader

Install the Compass Stylesheet Authoring Framework

Install the Compass Stylesheet Authoring Framework
Installing Ruby Compass runs on any computer that has ruby installed. For more advanced users you may want to install rvm. Setting up the ruby environment $ gem update --system$ gem install compass Looking for the next release's preview version? To install the preview version of Compass: gem install compass --pre Tell us about your project and we'll help you get it set up: I would like to set up my project named with starter stylesheets. Thanks. Terminal newbies, read the Designer’s Guide to the OSX Command Prompt first! $ gem install compass $ compass create <myproject> Note: Values indicated by <> are placeholders. Note: $ is a placeholder for your terminal's prompt. Then follow the instructions that compass provides in the output. Hate the Command Line? Try one of these Community supported GUI applications: Next Steps Related:  CSS & Sass Tita CréaWEB

The Designer’s Guide to the OSX Command Prompt The command prompt. Once the lofty domain of that guy you know with the computer science degree. Now more and more the every day domain of the hacker web designer. Perhaps you’ve mastered a little Javascript or PHP, but you are realizing that the cool kids are playing around with stuff that is only accessible to people who are comfortable with the command prompt. Or, perhaps you are just interested in upping your game. Whatever the case, I’m here to help. First things first: launching terminal The command prompt1 application on OSX is called Terminal. Applications → Utilities → Terminal Here’s a screenshot of my Finder window showing the Terminal application and the path that I took to get to it in the status bar at the bottom: Once you get there, double-click the Terminal icon to launch it. Dressing it up a bit: Terminal themes When you first open Terminal on OSX, you’ll find it a stark barren white place. Let’s dress it up a bit so that it feels like home. Terminal → Preferences pwd ls cd ~ cat

Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way By Andrey Sitnik On The following is a guest post by Andrey Sitnik, the creator of the Autoprefixer tool, a "postprocessor" for handling vendor prefixes in CSS. Why use this instead of your preprocessor or another tool? Many reasons. Andrey will explain. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed. All you have to do is add it to your asset building tool (Grunt, for instance) and you can totally forget about CSS vendor prefixes. Autoprefixer uses a database with current browser popularity and properties support to apply prefixes for you: #The Problem We can, of course, write vendor CSS prefixes by hand, but it can be tedious and error-prone. We can use services like Prefixr and text editor plugins, but it is still exhausting to work with big blocks of repeating code. We can use mixin libraries with preproccesors like Compass for Sass or nib for Stylus. #Under the Hood compiles to: #Demo a { } . #What Next?

Adaptive Images in HTML CodeKit — THE Mac App For Web Developers 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. 10 Best CSS Code Generators for Web Developers Web developers are always looking for shortcuts to save time in their routine. Many great dev tools ease the process, and it’s now easier than ever to jump in and get a finished product quickly. With the rise of browser-based IDEs it seems web development is becoming less fixed to the desktop. You can write code from any computer, and even test the result live in your browser. Free online code generators will help you iterate and build onto your code quickly. Once you know what code you need to generate, it’s just a matter of finding the right tool for the job. 1. It has never been easy to create custom repeating pauses between CSS animations. Everyone knows about CSS transitions and the animation-delay property. With WAIT! 2. CSS3 Generator is a more traditional example of code snippets you might need in everyday situations. Unfortunately the entire web app is dynamic and runs on a single page, so there are no permalinks to individual generators. 3. 4. 5. 6. 7. 8. 9. 10. Final Words

Brackets, l'éditeur spécialisé front-end Brackets est un éditeur de code open-source nouvelle génération, multi-plateformes, et tout particulièrement adapté au profil d'intégrateur et de webdesigner. L'interface de Brackets est avant tout conçue pour être agréable et ergonomique. Nul besoin d'aller fouiller dans la console ou des fichiers XML pour modifier la configuration ou installer des plugins. En outre, de nombreuses fonctionnalités sont natives sur Brackets alors qu'elles nécessitent des extensions sur d'autres éditeurs. Principaux avantages Les éditeurs récents, notamment SublimeText, Atom et Brackets, s'adaptent de plus en plus aux nouvelles contraintes du front-end et apportent des fonctionnalités toujours plus riches. Brackets est clairement moins orienté PHP et back-end que certains concurrents mais compense largement ce déficit dans le domaine du webdesign. Jugez par vous-même : Live refresh Aperçus divers en live (images, couleurs, dégradés) Édition rapide Mais aussi Raccourcis-claviers utiles Du côté des extensions Divers

Sass vs. LESS "Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In LESS, there are also some mixin libraries battling to be the best. See that?

Apple's Cell Phone Screen Resolution by Brand and Model For best result, the size (dimension) of cell phone wallpaper must match the size of cell phone screen. Whenever the wallpaper dimension is too large for the screen, it will be automatically resized by your cell phone. This automatic resizing usually results in a poor image display quality. On the other hand, if the wallpaper dimension is too small for the screen, the picture will not cover all of your screen. Why would you display small picture if your mobile phone can display a larger one? Bigger picture means clearer picture, right? Below is a list of Apple cell phone screen resolution, sorted by model.Use this list as a guide on choosing the right size of cartoon photo wallpaper for your Apple cell phone. (If you need to know which cell phones have certain screen resolution, there is also a list of cell phone screen resolution, sorted by size available) Disclaimer:

Methods for Controlling Spacing in Web Typography If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups. Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. Getting one exact headline to look right I often run into this one, especially when a design contains a highly customized web font that looks great in general, but might look funky when used in a certain context. It a lovely font! Desktop