Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI Libraries

UI Libraries

Avatar for Jacopo Ghisolfi

Jacopo Ghisolfi

May 28, 2013

Other Decks in Programming

Transcript

  1. UI Libraries Frameworks for creating websites and web applications They

    contains styles for common HTML elements like typography, code, tables, forms, and buttons and styles for common interface components like tabs and menus, navigation bars, etc Also they offers JS plugins for things like tooltips, popovers, modals, and more They make use of CSS preprocessors. They are languages that add more abstraction to CSS. They Extends the capabilites of CSS.
  2. “Sleek, intuitive, and powerful front-end framework for faster and easier

    web development.” Twitter Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development.
  3. “The most advanced responsive front-end framework in the world.” Zurb

    Foundation The most advanced responsive front-end framework in the world.
  4. Benefits of using Front-end Frameworks - Consistency Across Browsers and

    Platforms - The Result of our work will work (mostly) across all Browsers * Normalize.css better then CSS Reset (The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.) - Grid Layouts & Responsive Design with no pain - Modular Components - All components live together in a perfect ecosystem - Time Saving - They are awesome for a small project or for starting a big ones.
  5. But ... They are awesome for a small project and

    rapid prototyping. But the risk is that everything could look like the same.
  6. Twitter Bootstrap http://twitter.github.io/bootstrap Bootstrap was developed in August 2011 by

    Twitter Developers as a framework to encourage consistency across internal tools. The first deployment happened during Twitter's first Hackweek. Since February 2012, it is the most popular GitHub development project.
  7. Compiled and minified version contains: - CSS stylesheets - JS

    plugins - Icon Set Compiled and minified version contains: - CSS stylesheets (bootstrap.css and bootstrap-responsive.css) - JS plugins (based on jQuery) - Icon Set (Glyphicons)
  8. CSS written with LESS LESS: LESS is a dynamic stylesheet

    language. The Goal of LESS was designed to be closer to CSS than other CSS preprocessors so valid CSS is valid LESS code. In fact has influenced the "SCSS" syntax of Sass. LESS provides mechanisms like variables, nesting, mixins, color functions and basic arithmetic LESS doesn't provide selector inheritance. the main difference between other CSS preprocessors that it allows real-time compilation via LESS.js by the browser.
  9. Grid System Fixed or Fluid Grid System - 12 cols

    - 940px wide - No responsive Design by default - Fluid Grid System uses percentes instead of pixels for column widths - With the Responsive Design Feature enabled the grid adapts to the viewport, below the 767px the cols become fluid and stack vertically.
  10. Foundation foundation.zurb.com Foundation was developed in September 2011 by ZURB,

    its golas was to develop front-end code faster and better. Zurb is a web design company based in California. Zurb designed some important websites as Ebay, Facebook etc
  11. Compiled and minifeid version contains: - CSS Stylesheets - JS

    Plugins - Index.html - humans.txt - robots.txt Compiled and minifeid version contains: - CSS Stylesheet (foundation.css) - JS Plugins (based on Zepto.js + modernizr.js and jquery for backup ) - No Images. but there's a directory for them :) - Index.html - sample structure for page content - humans.txt – for description purposes - robots.txt – For web robots
  12. CSS written with Sass Sass: Sass is a scripting language

    that is interpreted into CSS. SassScript is the scripting language itself. Sass consists of two syntaxes. "The indented syntax" (.sass files) uses indentation to separate code blocks and newline characters to separate rules. "SCSS syntax", uses block formatting like CSS. SassScript provides mechanisms: variables, nesting, mixins, selector inheritance, color functions and basic arithmetic Thanks to these mechanisms Sass extends CSS capabilities SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved. Sass is simply syntactic sugar for CSS.
  13. Grid System Grid System - Fluid Grid by Default -

    12 cols - customizable till 16 - As for bootstrap the columns can be nested - also offset is present
  14. Audience: Bootstrap ~ 50000 ⋆ and 15000 Forks Foundation ~

    11500 ⋆ and 2000 Forks - Bootstrap on Github ~ 50000 Stars and 15000 Forks - Foundation on Github ~ 11500 Stars and 2000 Forks