stylesheet management systems n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
StyleSheet Management Systems PowerPoint Presentation
Download Presentation
StyleSheet Management Systems

Loading in 2 Seconds...

play fullscreen
1 / 31

StyleSheet Management Systems - PowerPoint PPT Presentation


  • 61 Views
  • Uploaded on

StyleSheet Management Systems. For Happier Des i gners & Developers. 06 June 2014. Alexander Futekov , Front End Developer at Telerik. About Me 1. Front End Developer. About Me 2. Work with lots of designers LOVE working with designers Admire their work

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'StyleSheet Management Systems' - dagmar


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
stylesheet management systems

StyleSheet Management Systems

For Happier Designers & Developers

06 June 2014

Alexander Futekov, Front End Developer at Telerik

about me 1
About Me 1

Front End Developer

about me 2
About Me 2

Work with lots of designers

LOVE working with designers

Admire their work

Amazed by how different their job is

hands up if you have
Hands up if you have:
  • Coded a website
  • Designed a website
communication is important
Communication is important…

…but without proper collaboration tools…

…important information can get lost.

they talk differently so information is lost
They talk differently, so information is lost

Developer

  • Give me the hex for that color
  • Give me the size in pixels
  • …for everything

Designer

  • Keep things consistent
  • Keep it proportional and harmonious
  • Use these ratios
  • Use this color scheme
slide12

CSS Preprocessors – a tool for Designers and Devs

These are simple, easy-to-learn languages that are processed to CSS.

Front End Developers use them for convenience and efficiency

They have nothing to do with your processor.

designers love proportions
Designers LOVE proportions
  • Proportions
  • Ratios
  • Baselines
  • Vertical rhythm

“Make the <h1> 35px,

the <h2> 22px,

the <h3> 17px,

and the <h4> 13px.“

— said no designer ever

reusing and manipulating numbers
Reusing and manipulating numbers

$base-font-size = 16px

$golden-ratio = 1.618

p

font-size: $base-font-size

h1

font-size: $base-font-size * 2.5

.text-small

font-size: $base-font-size / $golden-ratio

demo time
Demo time
  • Headings typography example
color manipulations
Color Manipulations

lighten(#dc2323, 20%)

darken(#dc2323, 20%)

desaturate(#dc2323, 20%)

saturate(#dc2323, 20%)

grayscale(#dc2323)

tint(#dc2323, 20%)

shade(#dc2323, 20%)

invert(#dc2323)

complement(#dc2323)

#dc2323+ 180deg

#dc2323 + rgb(0, 210, 100)

$color-1 = red

$color-2 = lighten($color-1, 10%)

.button-1

background: $color-1

&:hover

background: $color-2

palettes
Palettes

Analogous

Monochromatic

Triad

Tetrad

Complementary

Compound

Shades

harmonious colors
Harmonious Colors

$hue-rotate = 120deg

$color-1 = #00008b

$color-2 = $color-1 + $hue-rotate

$color-3 = $color-1 - $hue-rotate

extract color components
Extract Color Components
  • red(#4d65d0)
  • green(#4d65d0)
  • blue(#4d65d0)
  • hue(#4d65d0)
  • saturation(#4d65d0)
  • lightness(#4d65d0)
  • alpha( rgba(128, 128, 128, 0.5) )
logic based on color components
Logic based on color components

Useful for elements with many variations

Real-life example from Telerik

color systems
Color Systems
  • Hex
  • RGB
  • HSL
  • HSB
  • Pantone
demo time1
Demo time
  • Animation example
  • Responsive typography - list
  • Responsive typography - proportional
they talk differently so information is lost1
They talk differently, so information is lost

Developer

  • Give me the hex for that color
  • Give me the size in pixels
  • …for everything

Designer

  • Keep things consistent
  • Keep it proportional and harmonious
  • Use these ratios
  • Use this color scheme
a templating system
A Templating System

Preprocessors are used with files like:

_settings.scss

_variables.styl

…that contain only single variables

content stylesheet management system
Content/StyleSheet Management System

Frameworks that allows us to:

  • Create new content
  • Edit/modify existing content
  • Alter logic
  • Maintain everything
  • Be accessible to everyone
slide29

Tool creation

Creative use of existing tools