image-4885.jpg
Web design

8 Ways Twitter Bots Are Actually Helping Us

Depending on your experience on Twitter, you may have encountered your fair share of annoying and spammy Twitter bots that keep following you. And unfollowing you when you don’t follow back. That said, not all Twitter bots are the ones that you normally find selling questionable goods or sending you suspicious links.

These ones are normally made by programmers playing around with code and algorithms. Some even call themselves Internet artists like Darius Kazemi who comes up with strange and interesting bots. Out of these experiments, actual helpful Twitter bots have emerged. So we scoured the Twitterverse to compile and categorize 8 things Twitter bots can do.

Natural Disaster Alert

Perhaps one of the most useful bots, these accounts tweet natural disasters such as storms, earthquakes, and tsunamis as they happen. They normally draw their information from an official source like the earthquake one below which gets its data from the US Geological Survey. The bot is further programmed to tweet earthquakes that are at 5.0 and above on the Richter scale.

Some go a step further by being interactive such as Wave Glider Holoholo. The account is linked to a robot that collects data from the ocean around the Big Island of Hawaii. By asking it certain questions, it can tell you the weather report which can help you prepare for the weather.

Online Conversations/Debates

Twitter bots can also be made to pose as humans. No, we’re not talking about the bot that just followed you because you tweeted about eating pizza. What we are referring to is Olivia Taters, the bot who tweets uncannily like a teenage girl. So life-like is she that other Twitter users end up talking to her without realizing she’s a bot.

How the bot works is that the algorithm picks words used around the Twitterverse. Using that same premise, DevOps engineer Randi Harper built a bot that helps her debate with GamerGate supporters when she got tired of them harrassing her on the microblogging site. The bot does this by plucking randomly assembled phrases from her main account.

Monitoring Censors

When MH17 was shot out of the sky, many pointed fingers at the Ukrainian pro-separatist group and the Russians. Suspicions were further raised when reports of the exchanges between the leader were revealed. But what really sealed the deal that the proceedings were fishy was when Twitter bot @RuGovEdits exposed that the Russian government has been editing Wikipedia.

It even has an English version for the rest of us who can’t read Russian.

The bot works by tracking Wikipedia anonymous edits made by Russian government IPs. It is not the first of its kind as the US counterpart @congressedits came before it and there are others like the UK’s @parliamentedits. All these bots however aim to do the same thing which is to keep the government in check and inform them that the people are watching them too.

Generate Poetry

It’s amazing that despite the 140 character limit Twitter imposes, users are creatively coming up with short stories and poetry. Even bots are getting in on the game with their algorithms searching high and low the Twitterspace to retweet tweets accidentally written in iambic pentameter which is what @pentametron does.

Or even like this account that finds tweets that were accidentally (or coincidentally) written in haiku structure.

Generate Art

Twitter bots don’t just dabble in poetry, they make pieces of artwork too. These bots are pretty interactive as well as their algorithms will transform any image you tweet to it. Take for example @a_quilt_bot which turns your images into quilt or as quilt-like as it can.

Then there’s @pixelsorter which sorts a line of pixel from an image to generate abstract fuzzy images.

Sometimes, the various bots interact with one another whether by programming or by direct manipulation from their creators like this incident where @pixelsorter and @badpng were pitted against each other. The bots continuously mesh the images over and over before the creator stepped in to stop the never-ending exchange.

Teach English/Educate

The Internet needs more of these bots with the amount of grammar and spelling faux pas it always commits. These bots save the day (and irritate the offenders) by correcting their English like the now defunct @StealthMountain which tweets back at people who misspelled the phrase “sneak peek”. However @_grammar_ goes one step further by personally correcting improper grammar in tweets.

Some are relatively simple although no less uninformative such as the ever-celebrated @everyword which tweets a word from the dictionary everyday. It recently completed its cycle on June 7, 2014 after faithfully performing its task for 7 years. I’m puzzled why this is the last word though.

Send Notifications

Similar to the weather Twitter bots and the ones monitoring Wiki edits, these bots can be used for any basic alerts that would make life easier. One good example is the Netflix account. Yes, it is a bot and it tells you when a show is available for viewing. You know, when you are expecting that latest episode or for your binge watching needs.

Now that may seem like a relatively simple bot but sometimes the simplest of things are the most useful. Such as this bot which sends out announcements on whether a school is closed or delayed in Central Ohio. No more frustrations for parents and students!

Respond

Much like the Wave Glider Holoholo, these bots are interactive. The best example would be @DearAssistant which answers questions that you direct at it. It is considered as a “mini version of Siri” by its creator as it is based on the same data source.

There are various less complex bots that merely respond to a certain catchphrases or key words like @Betelgeuse_3 (it’ll respond if you type Beetlejuice 3 times) and @DBZNappa (which tweets back “WHAT?! NINE THOUSAND?!” anytime someone tweets “over 9000″). @RedScareBot however responds to any tweet that contains the word “socialist” or “communist” in the spirit of Joseph McCarthy because politics.

Have you come across other interesting Twitter bots? Let us know in the comments below!

Standard
image-4884.jpg
Web design

CSS Transitions, Transforms & Animations – Flipping Card Tutorial


This is part 1 of a series of tutorials about practical use cases of CSS transitions, transforms, and animations. In this tutorial, we’ll look at a “flipping card” scenario, and implementation variations.

flipping-card-feat-img

The Flipping Card

Flipping cards or tiles can be very useful these days. First of all, the provide users with a bit of interactivity, keeping them engaged, and these days engagement is key. The most common use-case for flipping cards and tiles that I can think of would be including some kind of imagery on the front, and some info on the back. We will ultimately need two different element wrappers contained inside a parent element, but the elements you decide is up to you. For the sake of this tutorial, I’ll be using generic divs. First, let’s look at the three effects we’ll implement:

  1. On hover – flip transition induced when a user hovers on the card.
  2. On click – flip transition induced when a user clicks on the card.
  3. Random – flip transition induced randomly.

Now, let’s dig in.

The Markup

As I mentioned above, the markup generally consists of a parent element and two child elements. Each child represents the front and back of the card. Here’s the markup we’ll use for each card:

[html]

front
back


[/html]

Notice the “EFFECT” text in the parent element. This will be either hover, click, or random depending on the effect we’re trying to achieve. Let’s first discuss the layout, the CSS we’ll want to achieve, and the available properties that we can leverage.

How To Achieve What We Want To Achieve

In order to have an effective flipping card animation/transition, the front-card element needs to initially be stacked on top the back-card element. The back-card element also needs to be initially hidden from view. When the transition is induced, the front and back of the cards need to simultaneously rotate in and out of view around the y-axis. CSS transforms can happen in any of the 3-dimensions we’re familiar with. If you’re looking at your computer screen, place an imaginary point in the centre of it. Here’s the axis orientation:

  • x-axis: drawn from that point horizontally
  • y-axis: drawn from that point upwards
  • z-axis: drawn from that point into the screen.

Rotating around the x- or y-axis will give us the desired flipping effect, but for the safe of this tutorial, we’ll use the y-axis.

For the cards to be stacked, we’ll have to leverage absolute positioning. To keep them pinned to our parent container, we’ll have to use relative positioning on it. With that in mind, we’ll need to explicitly set widths and heights, or let at least one card’s dimensions be dictated by some media (like an image). In the case of the card dimensions being governed by an image object, only one of the cards would need to be absolutely positioned.

Another thing to note is that if there is any transparency in the cards (i.e. no solid backgrounds, images, or colours), we will need to hide the “backs” of cards, so that a flipped version of it doesn’t show up on the one in front of it. For this, we’ll use the CSS property backface-visiblity and set it to hidden.

Finally, for this tutorial, I’ll use the padded-parent technique to achieve some perfectly square tiles.

Some Common CSS

Let’s take a look at some common CSS that will be applicable across all three implementations:

CSS 3.0

I’ll be using four tiles per row, hence the width of 25%. To make a perfectly square tile container, I’ll also set the bottom padding to 25%. This will allow us to position the fronts and backs absolutely, and any content underneath with follow the document flow. Also of importance is the transition property. We’re applying a transition to the transform, as the transform property is what changes. The back is initially set to be rotated –180 degrees around the x-axis, and the front stays as default. Now, let’s look at each of the implementations.

Effect 1 – Transition On Hover

This one is simple, and we can use the CSS pseudo-class :hover to achieve the effect. When we hover over the card, the front should transition to –180 degrees, and the back should transition to 0. Here’s the CSS used to achieve that:

CSS 3.0

Pretty simple, huh? On to number 2.

Effect 2 – Transition On Click

This time, we want the transition induced on click. We’ll leverage a little javascript to achieve this, because we’ll need to check classes and whatnot to make sure we can actually un-flip the card on a second click. Here’s the CSS:

CSS 3.0

And here’s the JavsScript used:

[js]
(function()
var cards = document.querySelectorAll(“.card.effect__click”);
for ( var i = 0, len = cards.length; i < len; i++ )
var card = cards[i];
clickListener( card );

function clickListener(card)
card.addEventListener( “click”, function()
var c = this.classList;
c.contains(“flipped”) === true ? c.remove(“flipped”) : c.add(“flipped”);
);

)();
[/js]

Nice! Now, onto the third implementation.

Effect 3 – Randomly Inducing The Transition

This one is sort of a bonus, and requires some extras. Because we’re going to randomly induce the transition at random times, we’re going to need multiple unique timeouts in out JavaScript. For this, we’ll use some data-attributes in our markup too. Here’s the markup:

[html]

front
back


[/html]

The CSS is pretty much the same as before too, but here it is anyway:

CSS 3.0

And now, for some nifty JavaScript. I set up a range between 1 and 3 seconds, which will randomly generate a time delay for cards to flip. The timeout will get cleared each time, and reset, creating a purely visual effect. Here’s the JavaScript:

[js]
(function()

// cache vars
var cards = document.querySelectorAll(“.card.effect__random”);
var timeMin = 1;
var timeMax = 3;
var timeouts = [];

// loop through cards
for ( var i = 0, len = cards.length; i < len; i++ )
var card = cards[i];
var cardID = card.getAttribute(“data-id”);
var id = “timeoutID” + cardID;
var time = randomNum( timeMin, timeMax ) * 1000;
cardsTimeout( id, time, card );

// timeout listener
function cardsTimeout( id, time, card )
if (id in timeouts)
clearTimeout(timeouts[id]);

timeouts[id] = setTimeout( function()
var c = card.classList;
var newTime = randomNum( timeMin, timeMax ) * 1000;
c.contains(“flipped”) === true ? c.remove(“flipped”) : c.add(“flipped”);
cardsTimeout( id, newTime, card );
, time );

// random number generator given min and max
function randomNum( min, max )
return Math.random() * (max – min) + min;

)();
[/js]

Fun stuff!

Flipping Cards In Action

There’s a lot of flipping card implementations around the web. In particular, I’ve seen a lot of gallery layouts and portfolio sites using variations of it. But it’s not limited to just things like this. A few weeks ago, I built an HTML5 memory game, and made heavy use of this technique. You can check out the game here, and the source code is also available on GitHub.

Browser Support

This technique makes heave use of CSS transitions and transforms, so take that into account when building your site or app. Modernizr is a great feature detection tool, so provide a suitable fallback when transitions / transforms aren’t available. Think along the lines of swapping z-index values depending on whether front or back is being shown.

Wrap Up

And that’s a wrap! We covered some important features here, and took a little plunge into the world of CSS3 transitions and transforms, and looked at a real-world use case for them. Don’t forget, you can view the demo and download the source by clicking the links below, and if you have and questions, comments, or feedback, you can also leave them below.


The post CSS Transitions, Transforms & Animations – Flipping Card Tutorial appeared first on Speckyboy Web Design Magazine.

Standard
image-4883.jpg
Web design

8 Ways Twitter Bots Are Actually Helping Us

Depending on your experience on Twitter, you may have encountered your fair share of annoying and spammy Twitter bots that keep following you. And unfollowing you when you don’t follow back. That said, not all Twitter bots are the ones that you normally find selling questionable goods or sending you suspicious links.

These ones are normally made by programmers playing around with code and algorithms. Some even call themselves Internet artists like Darius Kazemi who comes up with strange and interesting bots. Out of these experiments, actual helpful Twitter bots have emerged. So we scoured the Twitterverse to compile and categorize 8 things Twitter bots can do.

Natural Disaster Alert

Perhaps one of the most useful bots, these accounts tweet natural disasters such as storms, earthquakes, and tsunamis as they happen. They normally draw their information from an official source like the earthquake one below which gets its data from the US Geological Survey. The bot is further programmed to tweet earthquakes that are at 5.0 and above on the Richter scale.

Some go a step further by being interactive such as Wave Glider Holoholo. The account is linked to a robot that collects data from the ocean around the Big Island of Hawaii. By asking it certain questions, it can tell you the weather report which can help you prepare for the weather.

Online Conversations/Debates

Twitter bots can also be made to pose as humans. No, we’re not talking about the bot that just followed you because you tweeted about eating pizza. What we are referring to is Olivia Taters, the bot who tweets uncannily like a teenage girl. So life-like is she that other Twitter users end up talking to her without realizing she’s a bot.

How the bot works is that the algorithm picks words used around the Twitterverse. Using that same premise, DevOps engineer Randi Harper built a bot that helps her debate with GamerGate supporters when she got tired of them harrassing her on the microblogging site. The bot does this by plucking randomly assembled phrases from her main account.

Monitoring Censors

When MH17 was shot out of the sky, many pointed fingers at the Ukrainian pro-separatist group and the Russians. Suspicions were further raised when reports of the exchanges between the leader were revealed. But what really sealed the deal that the proceedings were fishy was when Twitter bot @RuGovEdits exposed that the Russian government has been editing Wikipedia.

It even has an English version for the rest of us who can’t read Russian.

The bot works by tracking Wikipedia anonymous edits made by Russian government IPs. It is not the first of its kind as the US counterpart @congressedits came before it and there are others like the UK’s @parliamentedits. All these bots however aim to do the same thing which is to keep the government in check and inform them that the people are watching them too.

Generate Poetry

It’s amazing that despite the 140 character limit Twitter imposes, users are creatively coming up with short stories and poetry. Even bots are getting in on the game with their algorithms searching high and low the Twitterspace to retweet tweets accidentally written in iambic pentameter which is what @pentametron does.

Or even like this account that finds tweets that were accidentally (or coincidentally) written in haiku structure.

Generate Art

Twitter bots don’t just dabble in poetry, they make pieces of artwork too. These bots are pretty interactive as well as their algorithms will transform any image you tweet to it. Take for example @a_quilt_bot which turns your images into quilt or as quilt-like as it can.

Then there’s @pixelsorter which sorts a line of pixel from an image to generate abstract fuzzy images.

Sometimes, the various bots interact with one another whether by programming or by direct manipulation from their creators like this incident where @pixelsorter and @badpng were pitted against each other. The bots continuously mesh the images over and over before the creator stepped in to stop the never-ending exchange.

Teach English/Educate

The Internet needs more of these bots with the amount of grammar and spelling faux pas it always commits. These bots save the day (and irritate the offenders) by correcting their English like the now defunct @StealthMountain which tweets back at people who misspelled the phrase “sneak peek”. However @_grammar_ goes one step further by personally correcting improper grammar in tweets.

Some are relatively simple although no less uninformative such as the ever-celebrated @everyword which tweets a word from the dictionary everyday. It recently completed its cycle on June 7, 2014 after faithfully performing its task for 7 years. I’m puzzled why this is the last word though.

Send Notifications

Similar to the weather Twitter bots and the ones monitoring Wiki edits, these bots can be used for any basic alerts that would make life easier. One good example is the Netflix account. Yes, it is a bot and it tells you when a show is available for viewing. You know, when you are expecting that latest episode or for your binge watching needs.

Now that may seem like a relatively simple bot but sometimes the simplest of things are the most useful. Such as this bot which sends out announcements on whether a school is closed or delayed in Central Ohio. No more frustrations for parents and students!

Respond

Much like the Wave Glider Holoholo, these bots are interactive. The best example would be @DearAssistant which answers questions that you direct at it. It is considered as a “mini version of Siri” by its creator as it is based on the same data source.

There are various less complex bots that merely respond to a certain catchphrases or key words like @Betelgeuse_3 (it’ll respond if you type Beetlejuice 3 times) and @DBZNappa (which tweets back “WHAT?! NINE THOUSAND?!” anytime someone tweets “over 9000″). @RedScareBot however responds to any tweet that contains the word “socialist” or “communist” in the spirit of Joseph McCarthy because politics.

Have you come across other interesting Twitter bots? Let us know in the comments below!



Standard
image-4882.jpg
Web design

How to Get More Work Without Working More

For those of you thinking of trading your 9-to-5 job for a more relaxed and independent work routine, there’s never been a better time to take the leap to working for yourself. Freelance writers, photographers, designers, illustrators, and all kinds of entrepreneurs are now going solo with great success. What’s more, they seem to be getting more clients and more work without having to work longer hours. Some work half the time that a full-time 9-to-5 job would require, making double the profit as well as a name for themselves in today’s highly competitive, but rewarding, market. What are their secrets? Let’s have a look.

Collaboration

Getting more work doesn’t have to mean working more, as long as you collaborate wisely. Why not combine talent and energy with other artists and freelancers that have that certain something you might be missing? At times, working alone can prove quite the struggle, not to mention the expense of having to constantly invest in education or new tools. Even established artists often need to collaborate in order to save money off printing, promoting or showcasing their work.

Keep in mind, it pays to be wise when you’re looking to collaborate. Instead of going around asking your friends to join forces with you, think long and hard about what your specific vision, goals, style and budget is. Just because you like someone, doesn’t mean you would enjoy working together. Choose someone whose work you really admire, someone whose style matches your own, someone who shares the same goals as you and, of course, someone who could add to your knowledge and skill. Do some research and get in touch with artists you admire—this will not only lead to a successful collaboration, but it will also offer you free exposure, deeper linking to your website and more effective marketing overall.

Resources

The right resources can go a long way when looking to get more work without working more. Your first stop should be Timothy Ferriss’ The 4-Hour Work Week: Escape the 9-5, Live Anywhere and Join the New Rich. Published in 2007, Ferriss’ book was featured on The New York Times Best Seller List for more than four years and has sold millions of copies for a good reason. The information found here is useful to anyone thinking of going independent, from bloggers to artists.

ux-book

You may also want to have a look at Susan Weinschenk’s 100 Things Every Designer Needs to Know About People (Voices That Matter). It’s a great resource for increasing effectiveness and usability of your work, as well as finding answers to questions regarding your audience.

Networking

One of the secrets when it comes to getting more work without working more is effective networking. Social media allows you to become an overnight sensation, as long as you go about it the right way. Get in touch with other designers you know and admire, organize events, set up a blog, submit guest posts to respected blogs and blogs in your niche. Market yourself efficiently, fatten up your portfolio and link to it from everywhere.

Also, ask your clients to mention you in their newsletters and to link to your website or Facebook page. Having a strong online presence and a good reputation among clients will generate more work down the line that will be better-paid, less demanding and specific to what you do best. However, you need to stay organized when new projects start streaming in. Delivering orders on time is crucial to maintaining your business.

Get Out There

Collaborate wisely, make good use of all your available resources and network as much as you can. Market your services and deliver top quality design, on time and with a smile, and your goals will become reality in no time.


Header image created using Flat Design Office Desk 02 by Blue Lela Illustrations.


Standard
image-4881.jpg
Web design

A Simple And Easy Guide To Understand Sass

A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started).

In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want:

Tools Of The Trade

Thoriq showed you how you can use Sass from the command line using the sass --watch command.

If you prefer GUI tools, you can go with my personal favourite app, Codekit, a web developer tool for compiling Sass, concatenating, autoprefixing and much more. Prepros is another very capable application which can be used on all systems. Both are paid applications but are well worth it if you’ll be using them in the long run.

If you just want to try out Sass without paying for anything you can use the terminal, or Koala (here’s our review), a free cross-platform feature-rich app, which can hold its ground against premium counterparts.

Variables

One of the first things you’ll need to wrap your head around is variables. If you come from a PHP or other similar coding language background this will be second nature to you. Variables are for storing bits and pieces of reusable information, like a color value for example:

$primary_color: #666666;

.button 
    color: $primary_color;


.important 
    color: $primary_color;

This may not seem that useful here, but imagine having 3,000 lines of code. If your color scheme changes you would need to replace each color value in CSS. With Sass you can just modify the value of the $primary_color variable and be done with it.

Variables are used for storing font names, sizes, colors and a host of other information. For larger projects it may we worth extracting all your variables into a separate file (we’ll take a look at how this is done soon). What this allows you to do is recolor your whole project and change fonts and other key aspects without ever touching actual CSS rules. All you need to do is modify some variables.

Nesting

Another basic feature Sass gives you is the ability to nest rules. Let’s assume that you’re building a navigation menu. You have a nav element which contains an unordered list, list items and links. In CSS you may do something like this:

#header nav 
    /* Rules for the nav area */


#header nav ul 
    /* Rules for the menu */


#header nav li 
    /* Rules for list items */


#header nav a 
    /* Rules for links */

In the selectors, we are repeating ourselves a lot. If elements have common roots, we can use nesting to write our rules in a much cleaner way.

Here’s how the above code could look in Sass:

#header 
    nav 
        /* Rules for the nav area */
    

    ul 
        /* Rules for the menu */
    

    li 
        /* Rules for list items */
    

    a 
        /* Rules for links */
    

Nesting is extremely useful because it makes stylesheets (a lot) more readable. By using nesting together with proper indentation you can achieve highly legible code structures, even if you have a fair amount of code.

One drawback of nesting is that it can lead to unnecessary specificity. In the example above I’ve refered to links with #header nav a. You could also use #header nav ul li a which would probably be too much.

In Sass, it is much easier to be very specific since all you need to do is nest your rules. The following is far less readable and quite specific.

#header 
    nav 
        /* Rules for the nav area */
        ul 
            /* Rules for the menu */
            li 
                /* Rules for list items */
                a 
                    /* Rules for links */
                
            
        
    

Extending Rulesets

Extending will be familiar if you’ve working with object oriented languages. It is best understood through an example, let’s create 3 buttons which are slight variations of each other.

.button 
    display: inline-block;
    color: #000;
    background: #333;
    border-radius:4px;
    padding:8px 11px;


.button-primary 
    @extend .button;
    background: #0091C2


.button-small 
    @extend .button;
    font-size:0.9em;
    padding:3px 8px;

The .button-primary and .button-small classes all extend the .button class which means that they take on all its properties and then define their own.

This is immensely useful in many situations where variations of an element can be used. Messages (alert / success / error), buttons (colors, sizes), menu types and so on could all use the extending functionality for great CSS efficiency.

One caveat of extends is that they won’t work in media queries as you would expect. This is a bit more advanced but you can read all about this behavior in Understanding Placeholder Selectors – placeholder selectors are special kind of extend which we’ll talk about soon.

Mixins

Mixins are another favorite feature of preprocessor users. Mixins are reusable rulesets – perfect for vendor-specific rules or for shorthanding long CSS rules.

How about creating a transition rule for hover elements:

@mixing hover-effect 
    -webkit-transition: background-color 200ms;
    -moz-transition: background-color 200ms;
    -o-transition: background-color 200ms;
    transition: background-color 200ms;


a 
    @include hover-effect;


.button 
    @include hover-effect;

Mixins also allow you to use variables to define the values within the mixin. We could rewrite the example above to give us control over the exact time of the transition. We may want buttons to transition a tiny bit slower for example.

@mixin hover-effect( $speed ) 
    -webkit-transition: background-color $speed;
    -moz-transition: background-color $speed;
    -o-transition: background-color $speed;
    transition: background-color $speed;


a 
    @include hover-effect(200ms);


.button 
    @include hover-effect(300ms);

Placeholder Selectors

Placeholder selectors were introduced with Sass 3.2 and solved a problem which could cause a bit of bloat in your generated CSS code. Take a look at this code which creates error messages:

.message 
    font-size:1.1em;
    padding:11px;
    border-width:1px;
    border-style:solid;


.message-danger 
    @extend .button;
    background: #C20030;
    color:#fff;
    border-color: #A8002A;


.message-success 
    @extend .button;
    background: #7EA800;
    color:#fff;
    border-color: #6B8F00;

It is most likely that the message class will never be used in our HTML: it has been created to be extended, not used as is. This causes a little bit of bloat in your generated CSS. To make your code more efficient you can use the placeholder selector which is indicated with a percentage sign:

%message 
    font-size:1.1em;
    padding:11px;
    border-width:1px;
    border-style:solid;


.message-danger 
    @extend %button;
    background: #C20030;
    color:#fff;
    border-color: #A8002A;


.message-success 
    @extend %button;
    background: #7EA800;
    color:#fff;
    border-color: #6D9700;

At this stage you may be wondering what the difference between extends and mixins are. If you use placeholders they behave like a parameter-less mixin. This is true, but the output in CSS differs. The difference is that mixins duplicate rules while placeholders will make sure that the same rules share selectors, resulting in less CSS in the end.

Operations

It’s hard to resist the pun here, but I’ll refrain from any medical jokes for now. Operators allow you to do some math in your CSS code and can be pretty darn helpful. The example in the Sass guide is perfect for showcasing this:

.container  width: 100%; 

article 
  float: left;
  width: 600px / 960px * 100%;


aside 
  float: right;
  width: 300px / 960px * 100%;

The example above creates a 960px based grid system with minimum hassle. It will compile down nicely to the following CSS:

.container 
  width: 100%;


article 
  float: left;
  width: 62.5%;


aside 
  float: right;
  width: 31.25%;

One great use I find for operations is to actually mix colors. If you take a look at the success message Sass above it’s not clear that the color of the background and the border have some sort of relationship. By subtracting a shade of gray we can darken the color, making the relationship visible:

$primary: #7EA800;

.message-success 
    @extend %button;
    background: $primary;
    color:#fff;
    border-color: $primary - #111;

The lighter the subtracted color, the darker the resulting shade will be. The lighter the added color, the lighter the resulting shade.

Functions

There are a great number of functions to use: Number functions, string functions, list functions, color functions and more. Take a look at the long list in the developer documentation. I’ll take a look at a couple here just to show you how they work.

The lighten and darken function can be used to change the lightness of a color. This is better than subtracting shades, it makes everything even more modular and obvious. Take a look at our previous example using the darkening function.

$primary: #7EA800;

.message-success 
    @extend %button;
    background: $primary;
    color:#fff;
    border-color: darken( $primary, 5 );

The second argument of the function is the percentage of darkening required. All functions have parameters; take a look at the documentation to see what they are! Here are a few other self-explanatory color functions: desaturate, saturate, invert, grayscale.

The ceil function, just like in PHP, returns a number rounded to the next whole number. This can be used when calculating column widths or if you don’t want to use a lot of decimal places in the final CSS.

.title 
    font-size: ceil( $heading_size * 1.3314 );

Overview

The features in Sass give us great power to write better CSS with less effort. The proper use of mixins, extends, functions and variables will make our stylesheets more maintainable, more legible and easier to write.

If you’re interested in another similar CSS preprocessor I suggest taking a look at LESS (or check out our beginner’s guide) – the underlying principal is much the same!

Standard
image-4880.jpg
Web design

Prepare for 2015 with 1000s of New Artistic Resources!

Prepare for the creative challenges you might encounter in 2015 with some incredible new design resources. This fresh bundle from Design Cuts features 1000s of all-new artistic resources that allow you to create realistic watercolour effects, retro effects, gold effects, glitter effects, and many more creative effects in a matter of seconds. These kinds of design effects are typically really difficult to create from scratch, and so this bundle is a great opportunity to save yourself a lot of time and stress in your creative work this year! The bundle also contains a nice selection of mockup templates and artistic scene creators, which are the ideal tools for revamping your portfolio with stunning presentations of your work.

The Artistic Design Bundle

All the items in the Gorgeous Artistic Design Bundle are shortcuts to create impressive design effects. These resources allow you to create everything from watercolour effects, to wintery graphics, photo manipulations and retro print designs in a matter of seconds, rather than days. Best of all, this bundle is available at 93% off and includes the all important extended licenses so you can use the items in your design projects and work you intend to sell. Most of these best-selling resources don’t have an extended license available anywhere else, so it’s a really special offer.

There’s two different types of resource in this collection; items that help you make cool effects, and items that help you beautifully show off your creations. Here’s an overview of some of the resources that stand out to me:

Best-Selling Custom Scene Creation Packs

Custom Scene preview

Easily create trendy desktop scenes to show off your work without the need for expensive photography equipment! There’s two editions of Custom Scene included in this bundle; Artistic Edition and Designer Edition. Both contain isolated objects, smart objects and dynamic shadows to compose unique scenes.

The Glitz Shoppe

The Glitz Shoppe preview

There’s never been an easier (or cleaner) way to make glamourous glitter effects than The Glitz Shoppe Photoshop kit. It’s a fantastic collection of Photoshop Styles, Textures and Brushes that add sparkle to your designs in seconds. No glue required!

Watercolor Sketch Mock Up

Watercolor Sketch Mockup preview

If you’re a traditional artist, your work will look fantastic when it’s presented alongside real brushes and paints in these watercolour sketch mockups. Prefer not to get your hands dirty? This pack also contains a watercolour effect generator, so you can paste in your digital art and create realistic paintings in seconds.

Stationery Mock Up

Stationery Mockup preview

Branding projects always involve designing loads of small stationery items. Wow your client and present your work in your portfolio with two comprehensive stationery packs included in the bundle. Each object can be moved around to create any composition you desire.

Texture:ON Photoshop Action

Texture:ON preview

Texture:ON is the perfect solution to add non-destructive textures to your artwork. With a click of a button your designs will be given lovely worn and distressed effects to achieve the character and charm of retro art.

Loads more artistic goodies included!

The Artistic Design Bundle

This is just a sample of some of the items that are included in the Gorgeous Artistic Design Bundle. You have to browse the full overview to really get a sense of the immense value of this collection. At 93% off it’s already a steal, but the real clincher is the extended licensing, making it the perfect toolkit to tackle any design job that comes your way this year.

Check out the Gorgeous Artistic Design Bundle

The post Prepare for 2015 with 1000s of New Artistic Resources! appeared first on Blog.SpoonGraphics.

Standard