Sassaparilla: Sass & Compass Grid System
11 Tools to Instantly Code Faster
Twice a month, we revisit or update some of our readers’ favorite posts and sessions from throughout the history of Nettuts+. This tutorial was first published last September. Doesn't the title say it all? There are a wide variety of tools and techniques which can drastically improve the speed at which we code. Particularly during time-sensitive settings, even a savings of a few seconds per iteration can add up substantially over the course of the month. I'll show you eleven of my favorite tools in this article. 1. Combine the power and specificity of CSS selectors with HTML mark-up, and you get Zen Coding. ...convert to: In this last year, the Zen Coding project has gained considerable attention, and has been expanded to support a wide variety of code editors, including Espresso, Vim, Netbeans, TextMate, and Komodo Edit. "Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. Alternatives Sparkup 2. Alternatives 3. 4. Pro Tip 5.
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 set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. 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. 💡 Fun fact: Sass has two syntaxes! VariablesVariables permalink
High speed Coding with Zen & SASS - Web Design & Frontend Developement
The Power of Awesome Frontend Development is experiencing golden times these days. With the hype on HTML5, CSS3, a brighter focus on JavaScript and sophisticated workflows, the process of creating great stuff on the web has never been more rewarding. In this series I'd like to give you a little taste of what it's like to save time and get even more efficient at coding HTML and CSS. We're gonna use two amazing quick-to-learn and easy-to-use tools that will help us to ease the development of great Websites and WebApps. In this first part we will learn about these two plugins, how they work and what they're capable of. Ladie's and Gents: Introducing Zen-Coding and Sass. Let me tell you up first: What you're about to learn will most likely become a part of your daily base equipment. Zen-Coding Zen is a way of creating whole blocks of HTML Markup Structure with just one simple line of code. So for example, lets say you want to create a <div> with the ID of "container". Fairly easy right? Sass ul {
LESS « The Dynamic Stylesheet Language
5 Mac Apps That Make CSS Preprocessors Easier to Use
This post is part of a series that revisits some of our readers’ favorite articles from the past that still contain awesome and relevant information that you might find useful. This post was originally published on December 20th, 2011. If you’re a fan of CSS preprocessors, then you know that despite their usefulness, they can be a bit of a pain to work with at times. Most of them require some sort of Terminal voodoo to compile, which immediately scares off a good portion of potential users. As always, the Mac development community has come to the rescue with some amazing tools that completely take the effort out of the process. What Is a CSS Preprocessor? A CSS preprocessor is a tool that makes writing CSS easier, more flexible and arguably even more fun. Typically, a CSS preprocessor adds some interesting functionality to CSS such as variables, mixins, functions, nesting, etc. Five Apps to Process Your Files LESS.app Price: Free Supported Languages: LESS LESS.app Crunch! Crunch! LiveReload
Initializr - Start an HTML5 Boilerplate project in 15 seconds!
Can’t Get Into Preprocessors? Try Zen Coding
A ton of discussion lately has been given to preprocessors. These incredibly useful tools make coding easier, faster and more maintainable, but they’re certainly not for everyone. Whether or not you’ve jumped on the preprocessor bandwagon, you should give a fresh look to an old favorite that helps you dramatically cut your coding time without reinventing your workflow with compilers and other complications: Zen Coding. With Zen Coding, you can type a little and output a lot, just like with a preprocessor like Jade or Haml, only it expands instantly into the vanilla HTML that you love. Zen Coding vs. Zen Coding has been around for a number of years, so several of you reading this are bound to think that this is too old school to merit a discussion in 2012, but I’m willing to bet that lots of new coders have never given it a shot. I’ll start by saying what Zen Coding isn’t: it isn’t a preprocessor in the same vein as LESS, Sass, Stylus, Jade, Haml and the like. How Does It Work? Zen CSS
Initializr: With Great Templates Comes Great Responsivity! | @verekia's blog
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? 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 intermediate view The wide view The maximum-width view
Sass vs. Stylus: Who Wins the Minimal Syntax Battle?
Today we’re going to pit two CSS preprocessors head to head. You’ve no doubt seen lots of discussion about how SCSS compares to LESS, but where does Stylus, the new kid on the block, factor in? Can it possibly match the power and versatility of SASS? We’ll jump head first into both syntaxes and compare them side by side to see which is more logical and versatile. We’ll also talk about features and give you a clear argument for why one preprocessor is more powerful. Sass, Not SCSS One little detail needs to be addressed before we dive into this any further. However, for the sake of comparison, Sass is actually much closer to Stylus than its sibling SCSS. Alas, this is not an article on the merits of Sass vs. Basic Syntax Let’s start with a direct comparison of both syntaxes at their most basic level. As you can see, they’re almost identical. Flexibility One thing that I’ve always appreciated about LESS and SCSS is that I can still write plain old vanilla CSS within my stylesheet. Nesting
DomainTools
