1 / 31

StyleSheet Management Systems

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

dagmar
Download Presentation

StyleSheet Management Systems

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. StyleSheet Management Systems For Happier Designers & Developers 06 June 2014 Alexander Futekov, Front End Developer at Telerik

  2. About Me 1 Front End Developer

  3. About Me 2 Work with lots of designers LOVE working with designers Admire their work Amazed by how different their job is

  4. Hands up if you have: • Coded a website • Designed a website

  5. Working together is hard.What is the solution?

  6. Communication!

  7. All of these suggest the solution! Communication!

  8. Communication is important… …but without proper collaboration tools… …important information can get lost.

  9. 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

  10. A nice thought

  11. Collaboration = communication + tools

  12. 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.

  13. Preprocessors are a tool,easy enough for bothDesigners and Developers

  14. 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

  15. 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

  16. Demo time • Headings typography example

  17. 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

  18. Palettes Analogous Monochromatic Triad Tetrad Complementary Compound Shades

  19. Harmonious Colors $hue-rotate = 120deg $color-1 = #00008b $color-2 = $color-1 + $hue-rotate $color-3 = $color-1 - $hue-rotate

  20. Extract Color Components • red(#4d65d0) • green(#4d65d0) • blue(#4d65d0) • hue(#4d65d0) • saturation(#4d65d0) • lightness(#4d65d0) • alpha( rgba(128, 128, 128, 0.5) )

  21. Logic based on color components Useful for elements with many variations Real-life example from Telerik

  22. Color Systems • Hex • RGB • HSL • HSB • Pantone

  23. Easier for everybody

  24. You already know how to use it.

  25. Demo time • Animation example • Responsive typography - list • Responsive typography - proportional

  26. 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

  27. A Templating System Preprocessors are used with files like: _settings.scss _variables.styl …that contain only single variables

  28. Content/StyleSheet Management System Frameworks that allows us to: • Create new content • Edit/modify existing content • Alter logic • Maintain everything • Be accessible to everyone

  29. Tool creation Creative use of existing tools

  30. Thank You

  31. Q & A

More Related