Compass. Initializr: With Great Templates Comes Great Responsivity! Today I'm proud to announce that a "Responsive template" is now available on Initializr!
It will help you dealing with all the various devices used to display your site. Mobiles, tablets, netbooks, laptops, desktop monitors, HUGE desktop monitors... Making your site work correctly on all these devices is a real nightmare. Well guess what? This nightmare is... absolutely not over! About responsive web design For those who have been living in a cave for the last few months (understand: for those who have a life and don’t spend days reading tweets and blogs) you probably need a short update about what a "responsive" design is.
To design a responsive layout, we have to forget about the usual static 960px width layouts and go fluid with percentage widths and media queries. A fluid layout with percentage widths The first thing our page needs is a "fluid" layout. Mobile-first approach media queries The mobile view Here is the very simple mobile display of the responsive template. The wide view. Initializr - HTML5 Boilerplates. Less: CSS Pre-Processor. LESS « The Dynamic Stylesheet Language. ProCSSor - Advanced CSS Prettifier. Sass: CSS Pre-Processsor. 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 Sass Syntax CSS Output Nesting. Sassaparilla: Sass & Compass Grid System. 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? Sublime Prefixr – a Sublime Text 2 Package by wbond.