The beginner’s guide to Sass

Imagem

sass

You may have heard of CSS preprocessing and be wondering what all the buzz is about. You may even have heard of Sass or LESS.

In short, preprocessing your CSS allows you to write more concise stylesheets which are formatted nicely and require less repetitive techniques commonly found when writing CSS code. The result is more dynamic styling and ample amounts of time saved when developing websites or applications.

If you already write CSS, then you can easily learn to preprocess your CSS. Once you understand the scope of Sass, you’ll wonder why you didn’t switch sooner.

How is Sass different to CSS?

Sass looks similar to CSS but has its obvious differences once you dive in. There are two ways of writing Sass and it’s ultimately up to you which style you prefer. I use the indented and bracketed style (.scss) in my projects because I like to really visualize where a block ends and begins when a lot of code becomes nested. Once processed the Sass code compiles to traditional CSS automatically using a preprocessing engine.

There are many apps available which allow precompiling your Sass to be seamless and downright easy. To install, you can use the command line as long as you have Ruby installed on your machine. If you’re not comfortable with the command line there are other options (more on this below) and if this is over your head visit Sass-lang.com to learn how to do this in an easy step-by-step format. In the end, using any method be it command line or app, the Sass installation will watch your changes and automatically compile down to traditional CSS for you.

I highly recommend using apps such as CodekitLiveReload, or Mixture which help you set up a Sass project on a Mac from scratch or if you’re a Windows user I recommend PrePros. Codekit, my choice of preprocessor, helps me by preprocessing my Sass as well as validating and minifying your code to allow your website to run quickly and effectively. (The ability to create Compass or Bourbon based projects within Codekit is also an awesome feature but is beyond the scope of this article.) After you get more comfortable with Sass be sure to check out how to use Compass and Bourbon in your Sass projects.

So what is Sass?

Sass stands for Syntactically Awesome Stylesheets and was created by Hampton Catlin. Sass introduces new concepts like variables, mixins, and nesting into the CSS code you already know and love. These concepts ultimately make your CSS awesome, easier to write and more dynamic. All of these features combined, speed up any designer’s or developer’s workflow.

What commonly confuses people is the alternative ways to write Sass. You will see other tutorials or explanations of Sass using the .SCSS or the .Sass extension for their Sass files. This is apparent because there are two ways of writing the code which produce the same output. The most common I’ve seen, and the method I currently use is the bracketed version known as .SCSS. Another method is the .Sass extension which relies more heavily on indentation rather than punctual elements and is white space dependent. With this syntax there’s no need for semi-colons or brackets as you see in CSS and the .SCSS syntax.

Check out the example below.

.CSS

#container {
        width:960px;
        margin:0 auto;
}
#container p {
        color: black;
}

.SCSS

/* Same as CSS but has variables and nesting. */
$black: #000000;
#container {
        width:960px;
        margin:0 auto;
        p {
                color :$black;
        }
}

.Sass

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */
$black: #000000
#container
        width:960px
        margin: 0 auto
                p
                        color:$black

Structure

Okay so now you’re probably wondering how to get Sass setup for your own projects. The process is pretty easy, especially if you use Codekit or a similar application to help you along the way.

A typical file structure of a Sass project looks like the outline below. This may look daunting but I promise that your workflow will improve once you wrap your head around how things work together. In the end all of your Sass gets compiled down to one CSS file which will be the file you include inside your working documents be it HTML, PHP, etc…

stylesheets/
|
|-- modules/ # Common modules
| |-- _all.scss # Global level styles
| |-- _utility.scss # Basic utility styles
| |-- _colors.scss # Global Colors
| ...
|
|-- partials/ # Partials - use these to target specific styles and @import on _base.scss
| |-- _base.scss # imports for all mixins + global project variables
| |-- _buttons.scss # buttons
| |-- _figures.scss # figures
| |-- _grids.scss # grids
| |-- _typography.scss # typography
| |-- _reset.scss # reset
| ...
|
|-- vendor/ # CSS or Sass from other projects
| |-- _colorpicker.scss
| |-- _jquery.ui.core.scss
| ...
|
|-- main.scss # primary Sass file - where your main Sass code will likely be.

How you set your structure up ultimately depends on you. Start with a basic structure and fine tune to your own needs and workflow.

@Import

Sass extends the CSS @import rule to allow it to import Sass and SCSS files. All imported files are merged into a single outputted CSS file. In addition, any variables or mixins defined in imported files carry over into the main file which means you can virtually mix and match any file and be certain all of your styles will remain on a global level.

@import takes a filename to import. As a last resort Sass or SCSS files will be imported via the file name of your choosing. If there is no extension, Sass will try to find a file with that name and the .scss or .Sass extension and import it.

If you have a typical Sass project setup you’ll notice some @import rules within a base file. This simply allows you to have multiple files which sync effectively once they are compiled, for example:

@import "main.scss";

or:

@import "main";
@Partials

If you have a SCSS or Sass file that you want to import but not compile to CSS, you can add an underscore to the beginning of the filename, which is otherwise known as a Partial. As the code is compiling Sass will ignore partials when processing to CSS. For example, you might have _buttons.scss, no _buttons.css file would be created and you can then @import “buttons”;

Best practice is to create a partials directory and place all of your partial Sass files inside it. Doing this insures you won’t have any duplicate file names which Sass will not permit, for example, the partial _buttons.scss and the file buttons.scss can’t exist in the same directory. Using partials is a great way to stay organized at a global level. As long as you @import the file, the Sass you write is usable throughout the entire project. Typically inside partials I create mixins or variables to use throughout my project. I name them based on their contents and the elements they are styling.

Variables

Variables in CSS are a breakthrough in modern web development. With Sass you can create variables for things such as fonts, colors, sizes, margin, padding, etc… The list is endless. If you write JavaScript or PHP the concept is fairly similar in terms of defining variables and conventions.

So why use variables? Easy, variables allow you to use an element more than once, similar to a class in HTML or a variable in JavaScript. For example, say you define multiple divs with a specific background color. You can use the variable which is easier to remember instead of the traditional hex code or RGB calculation. Making a variable with an easy to remember name allows for less copy and pasting and a more productive workflow. The same concept applies whenever a variable can be implemented, and with Sass that is virtually anywhere, for example this .scss:

#container {

        /* Here we define our variables */
        $basetextsize: 12px;
        $container-space: 10px;
        $red: #C0392B;

        /* Variables are applied */
        font-size: $basetextsize;
        padding: $container-space;
        color : $red;
}

will result in this .css file:

#container {
        font-size: 12px;
        padding: 10px;
        color: #C0392B;
}

Operations and functions

The cool part about variables is that they are extremely similar to those used in scripting languages. Variables inside Sass can be used inside both operations and functions. The standard math operations (+, -, *, / and %) are supported for numbers. For colors there are functions built into Sass which target lightness, hue, saturation, and more.

Having this functionality makes your code more dynamic than ever. For example, If you wanted to change the overall link color of your site you could simply change the variable, re-compile, and your site will update dynamically throughout. Check out another example below for a reusable navigation list, this .scss:

nav 
{
        $nav-width: 900px;
        $nav-links: 5;
        $nav-color: #ce4dd6;
        width: $nav-width;
        li 
        {
                float: left;
                width: $nav-width/$nav-links - 10px;
                background-color:
                lighten($nav-color, 20%);
                &:hover
                {
                        background-color:
                        lighten ($nav-color, 10%);
                }
        }
}

will result in this .css:

nav {
        width: 900px;
}
nav li {
        float:left;
        width: 170px;
        background-color: #E5A0E9;
}
nav li:hover {
        background-color: #D976E0;
}

Nesting

Nesting is a huge reason why I love Sass. You write fewer lines of code in the end and all of your code is easy to read due to the nested formatting. (The same concept of nesting is also found in LESS.)

There are two types of nesting:

Selector nesting

Selector nesting in Sass is similar to how you would nest HTML:

<div id="container">
        <div class="main">
                <h1>Main Content</h1>
        </div>
        <aside class="sidebar">
                <h3>Sidebar Content</h3>
        </aside>
</div>

The Sass version of nesting:

#container {
        .main {
                width:600px;
                h1 {
                        color: $red;
                }
        }
        .sidebar {
                width: 300px;
                h3 {
                        margin: 0;
                }
        }
}

would result in the following CSS:

#container .main {
        width: 960px;
}
#container .main h1 {
        color: #C0392B;
}
#container .sidebar {
        width: 300px;
}
#container .sidebar h3 {
        margin: 0;
}

Property nesting

The second type of nesting is property nesting. You can nest properties with the same prefix to better target elements which results in less lines of code, for example this:

#container {
        .main {
                font:
                        weight: bold;
                        size: 12px;
                .intro {
                        font:
                        size: 20px;
                }
        }
}

would result in this CSS:

#container .main {
        font-weight:bold;
        font-size: 12px;
}
#container .main .intro {
        font-size:20px;
}

Mixins

Of all of the Sass features Mixins have to be the most powerful. Mixins are similar to a variable but on steroids. You can define a complete style of an element and re-use those styles throughout your project.

Mixins are defined using the @mixin directive, which takes a block of styles you created before and applies it to the selector of your choice using the @include directive. Below is a common CSS pattern used for creating a horizontal navigation menu. Instead of writing the same code for every navigation instance, just use a mixin and later include it where necessary. This concept can be done for anything you use over and over such as buttons, typography, gradients, etc…

/* Here we define the styles */
@mixin navigate {
        list-style-type:none;
        padding:0;
        margin:0;
        overflow:hidden;
        > li {
                display:block;
                float:left;
                &:last-child{
                margin-right:0px;
                }
        }
}

And here we include the mixin with one line of code:

ul.navbar {
        @include navigate;
}

which results in this compiled CSS:

ul.navbar {
        list-style-type: none;
        padding:0;
        margin:0;
        overflow: hidden;
}
ul.navbar li {
        display: block;
        float: left;
}
ul.navbar li:last-child {
        margin-right: 0px;
}

You can even go as far as creating customizable mixins which use arguments to update dynamically. On top of that you can include mixins within other mixins or create functions using mixins and more. The power behind these is absolutely huge.

There are some popular pre-defined mixin collections in which I mentioned earlier called Compass and Bourbon. With a simple @import in your project you can have access to already generated mixins commonly used throughout the web. There are so many options that it’s hard to cover everything available but it is definitely fun to experiment and get your hands dirty developing custom animations or transitions with a few lines of code rather than a screen full. Mixins make cross browser development a breeze if you don’t feel like typing browser defined prefixes over and over inside your CSS.

For example, here we create a mixin with arguments allowing it to be customized.

@mixin my-border($color, $width) {
        border: {
                color: $color;
                width: $width;
                style: $dashed;
        }
}
p { @include my-border (blue, lin); }

which gives us this CSS when it’s compiled:

p {
        border-color: blue;
        border-width: lin;
        border-style: dashed;
}

Summary

While Sass has a learning curve, I truly believe that once you understand the methods and syntax, you’ll never want to go back to writing standard CSS again.

Sass is extremely powerful and I have only covered the basics here. With traditional CSS, we’ve all encountered the copy and pasting or find and replacing tasks which waste so much time in the development stage of your project. Give Sass a try and discover how to build an effective workflow in your future projects.

via Webdesigner Depot

15 free ebooks for web designers

There’s plenty of free advice and tuition out there for web designers. Get your teeth into these great free ebooks.

Looking for a little expertise in HTML5, coding or going it alone? Well, to need to get bogged down in hefty hardbacks – there’s a huge range of digestible ebooks for you to get your teeth into. And most importantly, many of them are free. Here we list of 10 of the best.

01. Getting Real

 Getting Real
Getting Real

Getting Real explains how to go about building a web application and covering everything from the basics to the more advanced. Written by leading agency 37Signals – who are well known for both their blunt, no-nonsense blogging and their gung-ho, “you can do it” attitude, this is very far from a dry, technical text. And best of all, you can download a PDF version for free!

02. The elements of typographic style applied to the web

 The Elements of Typographic Style Applied to the Web
The Elements of Typographic Style Applied to the Web

This very readable manual and reference on modern typography, explores the art and history of the field as well as technical details. The free online version includes a new chapter on digital typography, plus expanded information on typefaces and designers.

03. Just Ask: Integrating Accessibility Throughout Design

 Integrating Accessibility Throughout Design
Just Ask: Integrating Accessibility Throughout Design

Written by Shaun Henry, Just Ask cover the basics of including accessibility in design projects, with shortcuts for involving people with disabilities in your project. There are tips for comfortable interaction with people with disabilities and details on accessibility in each phase of the user-centered design process.

04. Graphic Design for Non-profit Organisations

 Graphic Design for Non-profit Organisations
Graphic Design for Non-profit Organisations

The book focuses on design and best prac­tices for non-profit orga­ni­za­tions, but the con­tent is a great resource in gen­eral and the teach­ings can be applied pretty much any­where.

05. Scalable and Modular Architecture for CSS

 Scalable and Modular Architecture for CSS
Scalable and Modular Architecture for CSS

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. And this great free book by top designer Jonathan Snook explains it all in easy-to-follow language.

06. Learning Web Design

 Learning Web Design
Learning Web Design

A beginner’s guide to web design, this free ebook from Jennifer Niederst Robbins starts with the very basics of how web pages work, and goes on to take you through to CSS layouts and optimised graphic files.

07. HTML5 Quick Learning Guide

 HTML5 Quick Learning Guide
HTML5 Quick Learning Guide

Rather than trail through heavy texts on HTML5, this Quick Learning Guide provides a round up of everything you need to know in no time. The guide covers the main elements of HTML5 and focuses on the basics to help get you started, quickly.

08. How To Be Creative

 How To Be Creative
How To Be Creative

Advertising executive and creative Hugh MacLeod provides 26 ‘tried-and-true tips’ to help guide your creative self through the business world. Famous for drawing cartoons on the back of business cards, each of his tips is brilliantly presented by a cartoon drawing with advice ranging from ‘ignore everybody’, ‘put the hours in’ and ‘keep your day job’.

09. Web Designer’s Success Guide

 Web Designer’s Success Guide
Web Designer’s Success Guide

A designer’s ebook staple, Keven Airgid’s ‘Web Designer’s Success Guide’ is a comprehensive narrative on how to set up as a freelancer, and profit. Covering topics such as making the transition to self-employment, marketing your design skills and knowing what to charge, this ebook has all the answers you’re looking for when choosing to go it alone.

10. Pixel Perfect Precision handbook

 Pixel Perfect Precision handbook
Pixel Perfect Precision handbook

The guys at London design studio ustwo love pixels. So much so that they induct all new designers into the school of pixels with their very own Pixel Perfect Precision™ (PPP™) handbook. The aim? To give pixels the care and attention they deserve, to make sure they get the simple things right before moving onto the detail.

The 165 page guide is available in iBook format for both desktop and iPad, and also a straightforward PDF. And best of all it’s still free!

11. Design Your Imagination

 Design Your Imagination
Design Your Imagination

Another for the rookie, ‘Design Your Imagination’ is a complete beginner’s guide to web design, although it includes great tips for old-timers, too. The book uses examples to guide the reader through its 28 chapters, ranging from the history of web design, to design principles, planning and so much more.

12. The Nature of Coding

 The Nature of Coding
The Nature of Coding

A professor of the Interactive Telecommunications Program at New York University, Daniel Shiffman’s ebook focuses on the programming strategies and techniques behind computer simulations of natural systems. However, bear in mind that ‘The Nature of Code’ is not one for beginners, and you’re likely to need a background in coding to understand it completely.

13. Web Design and Mobile Trends for 2013

 Web Design and Mobile Trends 2013
Web Design and Mobile Trends 2013

A compilation of interviews with notable industry figures such as Jeffrey Zeldman (A List Apart), Karen McGrane, and Aarron Walter, and agencies like B-Reel, Unit9 and Ultranoir, this ebook outlines predictions for the future of web technologies and design for different devices. Also available to download and read on your iPad, Kindle and a wide range of devices and ereaders.

14. 50 Ways to Please Your Customers

 50 Ways to Please Your Customers
50 Ways to Please Your Customers

Following mobile’s phenomenal growth in 2012, this ebook provides tips on how to build amazing websites for mobile devices. It spans problems to consider when designing the user experience, 50 strategic approaches to create multi-screen designs and 50+ best practices to streamline your mobile design skills.

15. The Woork Handbook

 The Woork Handbook
The Woork Handbook

The Woork Handbook is a collection of Antonio Lupetti’s blog posts,  after receiving requests by some of his four million website visitors in 2008 for a printable version. Topics cover CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other aspects about web design.

via creative bloq

Sia Aperitivos – Site of the Day

Imagem

E aqui temos nós mais um prémio para Portugal. A Bürocratik empresa sediada em Coimbra foi autora no novo site da SIA Aperitivos que recebeu o prémio de “Site of the Day” pela prestigiada AWWWARDS.

Parabéns à Bürocratik pelo trabalho desenvolvido e à SIA Aperitivos por acreditar na criatividade das empresas nacionais.

website premiado

14 Free CSS/HTML UI Kits

You can finds hundreds of free ui kits around the web in PSD form but there aren’t too many coded(CSS/HTML) ui kits.

In today’s post we have gathered free CSS/HTML coded user interface(UI) kits for designers and developers.The below ui kits are all handcoded to use freely in your design projects.
The list contains buttons,sliders,forms,search bars etc.
Although all of them are free please check for license agreements for commercial use.

ui.css

free css html ui kit
Source

CSS3 UI Kit (PSD+CSS)

free css html ui kit
Source

Pure CSS UI Kit

free css html ui kit
Source

CSS3 UI Kit

free css html ui kit
Source

Metro UI CSS

free css html ui kit
Source

Light UI Kit in CSS & HTML

free css html ui kit
Source

Futurico UI HTML

free css html ui kit
Source

Designer CSS UI Kit

free css html ui kit
Source

Yet Another UI Kit

free css html ui kit
Source

CSS User Interface UI Kit

free css html ui kit
Source

Free PSD/HTML Web UI Elements

free css html ui kit
Source

Lion CSS UI Kit

free css html ui kit
Source

Flat UI Free – PSD&HTML User Interface Kit

free css html ui kit
Source

CSS3 Button Styles

css html ui kit
Source

via designbeep.com

Brackets open-source code editor built with the web for the web

Imagem

About Brackets

Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.

 

Guiding Ideas
FOR THE WEB, BY THE WEB

Brackets is built using HTML, CSS and JavaScript. If you can code in Brackets, you can code on Brackets.

OPEN DEVELOPMENT WORKS
Brackets, is a fully open-source, community-driven project. Want to influence its direction? Join the developer list and start contributing.

TOOLS SHOULDN’T GET IN YOUR WAY
Rather than clutter your workspace with floating panels, toolbars and icons, Brackets focuses on providing “Quick Edit” in-line views that provide context-sensitive access to your content, without taking you away from your code.

WORKS WITH YOUR BROWSER
The browser is your design view. Brackets hooks up directly to the browser, allowing you to design and develop in the same environment that you deploy.

 

An experiment in extracting content from a Photoshop design comp from within a code editor. NOTE: This is just a prototype. It’s not yet included in Brackets or Edge Code.

 

See also the Brackets YouTube channel which has some great intro videos of Brackets.

Download Brackets