Skip to main content

Home/ CSS Evangelist/ Group items tagged smashing

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

An introduction to LESS, and comparison to Sass | Smashing Coding - 0 views

coding.smashingmagazine.com/...to-less-and-comparison-to-sass

less sass css comparison webdesign css3 preprocessor

shared by Vernon Fowler on 25 Feb 14 - No Cached
  • The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.
  • With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.
  • Parametric Mixins Like having functions in your CSS (*swoon*), these can be immensely useful for those seemingly redundant tasks of modern-day CSS.
  • ...8 more annotations...
  • .border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
  • The syntax in Sass is very similar to that of LESS. Just use the $ for variables, and call the mixins with the @mixin and @include method mentioned earlier.
  • Selector Inheritance Here’s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format. .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* will render like so: */ .menu, .footer { border: 1px solid #ddd; }
  • With LESS, you can nest ids, classes and elements as you go.
  • You can also refer in element styles to their pseudo-elements by using the &, which in this case functions similar to this in JavaScript.
  • Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units.
  • Sass seems to have a lot more color options — not that I would need them all. Lighten and darken are the only ones that I see myself using often.
  • Conditionals and Control This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use if { } else { } conditional statements, as well as for { } loops. It supports and, or and not, as well as the <, >, <=, >= and == operators.
Vernon Fowler

Learning To Use The :before And :after Pseudo-Elements In CSS | Smashing Coding - 0 views

coding.smashingmagazine.com/...d-after-pseudo-elements-in-css

css css3 pseudo selectors before after webdesign

shared by Vernon Fowler on 02 Jan 14 - No Cached
  • The content that’s injected will be child content in relation to the targeted element
  • First, you can include a URL that points to an image, just as you would do when including a background image in the CSS
Rajan Datta

10 Useful Techniques To Improve Your User Interface Designs | How-To | Smashing Magazine - 0 views

www.smashingmagazine.com/...ve-your-user-interface-designs

design css

shared by Rajan Datta on 16 Dec 08 - Cached
  • Rajan Datta on 16 Dec 08
     
    Nice article
Gary Edwards

12 Principles For Keeping Your Code Clean | CSS | Smashing Magazine - 0 views

www.smashingmagazine.com/...es-for-keeping-your-code-clean

HTML-CSS

shared by Gary Edwards on 13 Nov 08 - Cached
  • Gary Edwards on 13 Nov 08
     
    Chris Coyier on writing good HTML-CSS
Frederik Van Zande

5 Principles And Ideas Of Setting Type On The Web | How-To | Smashing Magazine - 0 views

www.smashingmagazine.com/...eas-of-setting-type-on-the-web

design font fonts inspiration typography web webdesign

shared by Frederik Van Zande on 25 Apr 08 - Cached
  • Frederik Van Zande on 25 Apr 08
     
    here are many ways to approach Web typography in order to create effective and expressive results. Let's take a closer look at some principles, rules and ideas for approaching Web typography decisions - you can use them as a starting point for learning how to achieve effective type setting on the Web.
Frederik Van Zande

Style Switchers Are Back: Ideas, Examples and a Contest | Design Showcase, Events | Sma... - 0 views

www.smashingmagazine.com/...k-ideas-examples-and-a-contest

css fontsize javascript layout styleswitch usability

shared by Frederik Van Zande on 06 Jun 08 - Cached
  • Frederik Van Zande on 06 Jun 08
     
    examples of css styleswitchers
Joel Liu

Free Design Templates | Smashing Magazine - 0 views

www.smashingmagazine.com/...free-design-templates

css templates

shared by Joel Liu on 14 Feb 07 - Cached
  • Free design templates don’t have to be unattractive, inaccurate and boring. Some web-sites offer high quality templates for the best price you would ever get - for free. You can download Flash-based templates as well as CSS-based layouts absolutely free; furthermore, you can use them for your personal and commercial projects without any restrictions whatsoever. Still, before using some of the templates, throw a glance at the license agreements - they’re changing all the time.
  • ...3 more annotations...
  • swan lin on 14 Feb 07
     
    cool
yc c

53 CSS-Techniques You Couldn't Live Without | Smashing Magazine - 0 views

www.smashingmagazine.com/...iques-you-couldnt-live-without

cheatsheet css reference

shared by yc c on 14 Feb 07 - Cached
igmuska . liked it
  • yc c on 09 Mar 09
     
    Below you'll find a list of techniques we , as web-architects, really couldn't live without. They are essential and they indeed make our life easier.
Rajan Datta

Using the LESS CSS Preprocessor for Smarter Style Sheets - Smashing Magazine - 8 views

www.smashingmagazine.com/...essor-for-smarter-style-sheets

web design css

shared by Rajan Datta on 13 Dec 10 - No Cached
  • anonymous on 16 Jun 11
     
    The templates are useful. And the step wise description is good.
1 - 20 of 22 Next ›
Showing 20▼ items per page