• Save
Responsive Webdesign - with Twitter Bootstrap & LESS
Upcoming SlideShare
Loading in...5
×
 

Responsive Webdesign - with Twitter Bootstrap & LESS

on

  • 3,002 views

 

Statistics

Views

Total Views
3,002
Views on SlideShare
2,989
Embed Views
13

Actions

Likes
5
Downloads
0
Comments
1

2 Embeds 13

http://www.linkedin.com 9
https://www.linkedin.com 4

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi friend, can you share me your slide ?
    I'm really need it for my education.

    My email : anhthien8@gmail.com
    Thank you!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Welcome, thanks for coming\nquick bioWeb developer since 1999\nusing less for just under a year - Bootstrap for a couple of projects\nI just got keynote for this presentation. Sorry if I’ve gone OTT with transitions\n
  • Welcome, thanks for coming\nquick bioWeb developer since 1999\nusing less for just under a year - Bootstrap for a couple of projects\nI just got keynote for this presentation. Sorry if I’ve gone OTT with transitions\n
  • A quick overview of what we’ll be looking at this evening\n
  • A quick overview of what we’ll be looking at this evening\n
  • A quick overview of what we’ll be looking at this evening\n
  • A quick overview of what we’ll be looking at this evening\n
  • Provide tools for rapid DRY (don’t repeat yourself) CSS development\nThey are an extra intermediate language, but I think they’re worth using\nToday, I’ll be focusing on the one know anything about: LESS\n
  • Provide tools for rapid DRY (don’t repeat yourself) CSS development\nThey are an extra intermediate language, but I think they’re worth using\nToday, I’ll be focusing on the one know anything about: LESS\n
  • Provide tools for rapid DRY (don’t repeat yourself) CSS development\nThey are an extra intermediate language, but I think they’re worth using\nToday, I’ll be focusing on the one know anything about: LESS\n
  • Provide tools for rapid DRY (don’t repeat yourself) CSS development\nThey are an extra intermediate language, but I think they’re worth using\nToday, I’ll be focusing on the one know anything about: LESS\n
  • Any valid CSS is also valid LESS\nVariables, Constants actually (but let’s not get tied up on semantics)\nMixins - essentially inheritable classes\nNest CSS rules inside each other during development, have valid CSS generated\nOperations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties.\nNo download for LESS itself, just start writing as normal CSS\n\n\n\n
  • Any valid CSS is also valid LESS\nVariables, Constants actually (but let’s not get tied up on semantics)\nMixins - essentially inheritable classes\nNest CSS rules inside each other during development, have valid CSS generated\nOperations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties.\nNo download for LESS itself, just start writing as normal CSS\n\n\n\n
  • Any valid CSS is also valid LESS\nVariables, Constants actually (but let’s not get tied up on semantics)\nMixins - essentially inheritable classes\nNest CSS rules inside each other during development, have valid CSS generated\nOperations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties.\nNo download for LESS itself, just start writing as normal CSS\n\n\n\n
  • Any valid CSS is also valid LESS\nVariables, Constants actually (but let’s not get tied up on semantics)\nMixins - essentially inheritable classes\nNest CSS rules inside each other during development, have valid CSS generated\nOperations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties.\nNo download for LESS itself, just start writing as normal CSS\n\n\n\n
  • Any valid CSS is also valid LESS\nVariables, Constants actually (but let’s not get tied up on semantics)\nMixins - essentially inheritable classes\nNest CSS rules inside each other during development, have valid CSS generated\nOperations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties.\nNo download for LESS itself, just start writing as normal CSS\n\n\n\n
  • Browsers don’t understand LESS so this is where compilers come in, so we need a way of serving them CSS.\nJS not recommended for production\nThe last three work in much the same way as each other, compiling the LESS in to CSS each time the file is saved\nexplain benefits of codekit (show websites)\n\n
  • Browsers don’t understand LESS so this is where compilers come in, so we need a way of serving them CSS.\nJS not recommended for production\nThe last three work in much the same way as each other, compiling the LESS in to CSS each time the file is saved\nexplain benefits of codekit (show websites)\n\n
  • Browsers don’t understand LESS so this is where compilers come in, so we need a way of serving them CSS.\nJS not recommended for production\nThe last three work in much the same way as each other, compiling the LESS in to CSS each time the file is saved\nexplain benefits of codekit (show websites)\n\n
  • Browsers don’t understand LESS so this is where compilers come in, so we need a way of serving them CSS.\nJS not recommended for production\nThe last three work in much the same way as each other, compiling the LESS in to CSS each time the file is saved\nexplain benefits of codekit (show websites)\n\n
  • DEMO\nShow variable demo & codekit compiling\n
  • DEMO\nShow variable demo & codekit compiling\n
  • a) It’s just like variables, but for whole classes. b)(Parametric Mixins) pass in border radius or font size for exampleLESSElements - \nDEMO\ninvert header colours\n.round\n.fs\nLessElements\n.rounded\n.gradient\n
  • a) It’s just like variables, but for whole classes. b)(Parametric Mixins) pass in border radius or font size for exampleLESSElements - \nDEMO\ninvert header colours\n.round\n.fs\nLessElements\n.rounded\n.gradient\n
  • \nMay not be as much as a time saver as it looks. Debugging specificity from generated rules can be a bugger\n\nWe’ll see some nested rules in the next demo\n
  • This is probably the area of LESS I’m least experienced with.\nI’ve never used a JS style function myself (and from looking on line I don’t think they’re used widely).\nFor an experiment I thought we’d take a look at a colour Operation that Andy Clarke wrote.\n\nDEMO\ntalk through demo less file & HTML first\nPoint out nested LESS rules\nPoint out operation\nAs for a hex colour from the audience\ndisplay HTML page\n
  • This is probably the area of LESS I’m least experienced with.\nI’ve never used a JS style function myself (and from looking on line I don’t think they’re used widely).\nFor an experiment I thought we’d take a look at a colour Operation that Andy Clarke wrote.\n\nDEMO\ntalk through demo less file & HTML first\nPoint out nested LESS rules\nPoint out operation\nAs for a hex colour from the audience\ndisplay HTML page\n
  • This is probably the area of LESS I’m least experienced with.\nI’ve never used a JS style function myself (and from looking on line I don’t think they’re used widely).\nFor an experiment I thought we’d take a look at a colour Operation that Andy Clarke wrote.\n\nDEMO\ntalk through demo less file & HTML first\nPoint out nested LESS rules\nPoint out operation\nAs for a hex colour from the audience\ndisplay HTML page\n
  • So, in a nutshell that’s LESS.\n
  • On to Bootstrap\n
  • It’s a framework developed in house at twitter - packed with features\nBootcamp makes use of some of HTML5’s new elements. \nNormalize.css preserves useful defaults rather than "unstyling" everything\n\n
  • It’s a framework developed in house at twitter - packed with features\nBootcamp makes use of some of HTML5’s new elements. \nNormalize.css preserves useful defaults rather than "unstyling" everything\n\n
  • It’s a framework developed in house at twitter - packed with features\nBootcamp makes use of some of HTML5’s new elements. \nNormalize.css preserves useful defaults rather than "unstyling" everything\n\n
  • Everything starts life as a LESS class, so it’s all configurable\nFixed or responsive layout\njQuery plugins add a bit of extra pizzaz\n
  • Everything starts life as a LESS class, so it’s all configurable\nFixed or responsive layout\njQuery plugins add a bit of extra pizzaz\n
  • Everything starts life as a LESS class, so it’s all configurable\nFixed or responsive layout\njQuery plugins add a bit of extra pizzaz\n
  • Everything starts life as a LESS class, so it’s all configurable\nFixed or responsive layout\njQuery plugins add a bit of extra pizzaz\n
  • I was going to try and talk through everything in the framework\nlooked at the Bootstrap part of my mind map & decided just to run through the twitter bootstrap website quickly\nthen we’ll move on to Demos\n
  • look at bootstrap website starting with http://twitter.github.com/bootstrap/base-css.html\nPoint out Add ons in Forms (new in 2.1)\nNew image classes\nicon glyphs\n\nThe lines get a bit blurred, but in general Base CSS is for individual elements, Components are more structured chunks\n
  • Downloading from the project homepage doesn’t include the LESS files\n
  • Downloading from the project homepage doesn’t include the LESS files\n
  • Downloading from the project homepage doesn’t include the LESS files\n
  • Talk through site structure\npoint out @includes in bootstrap.less & explain how CSS is generated from all the files\nmost things you need to change are in variables.css \n\nDemonstrate page is unstyled\nBuild Bootstrap.less\nchange button colour or something\n\nDemonstrate page is unresponsive\n\n
  • Talk through site structure\npoint out @includes in bootstrap.less & explain how CSS is generated from all the files\nmost things you need to change are in variables.css \n\nDemonstrate page is unstyled\nBuild Bootstrap.less\nchange button colour or something\n\nDemonstrate page is unresponsive\n\n
  • Talk through site structure\npoint out @includes in bootstrap.less & explain how CSS is generated from all the files\nmost things you need to change are in variables.css \n\nDemonstrate page is unstyled\nBuild Bootstrap.less\nchange button colour or something\n\nDemonstrate page is unresponsive\n\n
  • Talk through site structure\npoint out @includes in bootstrap.less & explain how CSS is generated from all the files\nmost things you need to change are in variables.css \n\nDemonstrate page is unstyled\nBuild Bootstrap.less\nchange button colour or something\n\nDemonstrate page is unresponsive\n\n
  • Talk through site structure\npoint out @includes in bootstrap.less & explain how CSS is generated from all the files\nmost things you need to change are in variables.css \n\nDemonstrate page is unstyled\nBuild Bootstrap.less\nchange button colour or something\n\nDemonstrate page is unresponsive\n\n
  • A site designed with RWD uses CSS3 media queries, an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images (according to wikipedia)\nFlexible images are a percentage of their container width generally with a min & max width.\n
  • Mobile First is a pretty straightforward idea.\n\nI’m going to explain the principles now. However I’m going to carry on building a responsive page based on the bootstrap example I’ve already shown you tonight. So this won’t be mobile first.\n\n
  • Mobile first development makes sense because it’s easier to add things to a design (for larger screens) than it is to take them away for mobile\n\n
  • A lot of the techniques for mobile development are just good practice any way.\nKeep the number of http requests as low as you can\nuse sprites\nminify & optimise\n
  • A lot of the techniques for mobile development are just good practice any way.\nKeep the number of http requests as low as you can\nuse sprites\nminify & optimise\n
  • A lot of the techniques for mobile development are just good practice any way.\nKeep the number of http requests as low as you can\nuse sprites\nminify & optimise\n
  • A lot of the techniques for mobile development are just good practice any way.\nKeep the number of http requests as low as you can\nuse sprites\nminify & optimise\n
  • A lot of the techniques for mobile development are just good practice any way.\nKeep the number of http requests as low as you can\nuse sprites\nminify & optimise\n
  • There are a number of ways to test\n\nWe’ll use the first & last on this list\nlook at the adobe shadow website\n
  • There are a number of ways to test\n\nWe’ll use the first & last on this list\nlook at the adobe shadow website\n
  • There are a number of ways to test\n\nWe’ll use the first & last on this list\nlook at the adobe shadow website\n
  • One of the biggest issues I have when building things for myself is coming up with content.\nFor tonight I decided to use a domain I already owned as inspiration\n\nShow unstyled page\ntalk through media queries in responsive stylesheets\npoint out web font\npoint out where I added the extra selector in 768 - 979 for font\nshow connecting shadow on the phone to the mac\n\nbuild \n\nshow mobile version on handset & iPad first (shadow)\nbig screen\n\nShow dashboard as an example of what can be done with Bootstrap - explain that it was knocked up very quickly as a proof of concept\n
  • One of the biggest issues I have when building things for myself is coming up with content.\nFor tonight I decided to use a domain I already owned as inspiration\n\nShow unstyled page\ntalk through media queries in responsive stylesheets\npoint out web font\npoint out where I added the extra selector in 768 - 979 for font\nshow connecting shadow on the phone to the mac\n\nbuild \n\nshow mobile version on handset & iPad first (shadow)\nbig screen\n\nShow dashboard as an example of what can be done with Bootstrap - explain that it was knocked up very quickly as a proof of concept\n
  • Hard to overstate how useful Mixins & variables are\n
  • Hard to overstate how useful Mixins & variables are\n
  • Hard to overstate how useful Mixins & variables are\n
  • Hard to overstate how useful Mixins & variables are\n
  • Hard to overstate how useful Mixins & variables are\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Responsive Webdesign - with Twitter Bootstrap & LESS Responsive Webdesign - with Twitter Bootstrap & LESS Presentation Transcript

  • @fordie
  • RESPONSIVE @fordie
  • RESPONSIVETwitter Bootstrap & @fordie
  • OVERVIEW
  • OVERVIEW• CSS Preprocessors
  • OVERVIEW• CSS Preprocessors• LESS
  • OVERVIEW• CSS Preprocessors• LESS• Twitter Bootstrap
  • OVERVIEW• CSS Preprocessors• LESS• Twitter Bootstrap• Responsive Design
  • CSS PREPROCESSORS
  • CSS PREPROCESSORS• LESS
  • CSS PREPROCESSORS• LESS• Sass
  • CSS PREPROCESSORS• LESS• Sass• Compass
  • CSS PREPROCESSORS• LESS• Sass• Compass• Turbine, Switch CSS, etc…
  • WHAT IS LESS?
  • WHAT IS LESS?•A Superset of CSS
  • WHAT IS LESS?•A Superset of CSS• Variables
  • WHAT IS LESS?•A Superset of CSS• Variables• Mixins
  • WHAT IS LESS?•A Superset of CSS• Variables• Mixins• Nested Rules
  • WHAT IS LESS?•A Superset of CSS• Variables• Mixins• Nested Rules• Functions & Operations
  • USING LESS - COMPILERS
  • USING LESS - COMPILERS• JS
  • USING LESS - COMPILERS• JS• Server side
  • USING LESS - COMPILERS• JS• Server side• Winless
  • USING LESS - COMPILERS• JS• Server side• Winless• LESS.app or Codekit
  • VARIABLES
  • VARIABLES allow properties such as colours & fonts to be• Variables declared once and referenced many times through your LESS file(s)
  • VARIABLES allow properties such as colours & fonts to be• Variables declared once and referenced many times through your LESS file(s)• Can be used for text strings too, such as file paths
  • MIXINS
  • MIXINS• Mixinsallow you to embed properties of a class into another by using the Mixin class name as a property
  • MIXINS• Mixinsallow you to embed properties of a class into another by using the Mixin class name as a property• Mixinscan also take parameters, which means that they can can produce different code for you
  • NESTED RULES
  • NESTED RULES• Nestselectors inside other selectors. Making inheritance clear and style sheets shorter.
  • FUNCTIONS & OPERATIONS
  • FUNCTIONS & OPERATIONS
  • FUNCTIONS & OPERATIONS• Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want
  • FUNCTIONS & OPERATIONS• Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want• Operationslet you add, subtract, divide and multiply. For example properties, values and colors
  • TWITTER BOOTSTRAP
  • BOOTSTRAP - WHAT’S IN IT?
  • BOOTSTRAP - WHAT’S IN IT?• Requires HTML5 doctype
  • BOOTSTRAP - WHAT’S IN IT?• Requires HTML5 doctype• Reset via Normalize
  • BOOTSTRAP - WHAT’S IN IT?• Requires HTML5 doctype• Reset via Normalize• Base styles for Typography and links
  • BOOTSTRAP - WHAT’S IN IT?
  • BOOTSTRAP - WHAT’S IN IT?• Responsive 12-column grids, layouts, and components.
  • BOOTSTRAP - WHAT’S IN IT?• Responsive 12-column grids, layouts, and components.• Fundamental HTML elements styled and enhanced with extensible classes
  • BOOTSTRAP - WHAT’S IN IT?• Responsive 12-column grids, • Dozens of reusable layouts, and components. components built to provide navigation, alerts, popovers,• Fundamental HTML and more elements styled and enhanced with extensible classes
  • BOOTSTRAP - WHAT’S IN IT?• Responsive 12-column grids, • Dozens of reusable layouts, and components. components built to provide navigation, alerts, popovers,• Fundamental HTML and more elements styled and enhanced with extensible • 13 custom jQuery plugins classes
  • FEATURES
  • GETTING STARTED
  • GETTING STARTED• Goto the project github page - https://github.com/twitter/ bootstrap
  • GETTING STARTED• Goto the project github page - https://github.com/twitter/ bootstrap• Click the download zip button (or clone) & unzip in to your website’s root
  • GETTING STARTED• Goto the project github page - https://github.com/twitter/ bootstrap• Click the download zip button (or clone) & unzip in to your website’s root• Rename the extracted folder to “assets”
  • GETTING STARTED
  • GETTING STARTED• Go to http://twitter.github.com/bootstrap/examples/fluid.html
  • GETTING STARTED• Go to http://twitter.github.com/bootstrap/examples/fluid.html• Save the source as index.htm in your website root
  • GETTING STARTED• Go to http://twitter.github.com/bootstrap/examples/fluid.html• Save the source as index.htm in your website root• Change the path to assets
  • GETTING STARTED• Go to http://twitter.github.com/bootstrap/examples/fluid.html• Save the source as index.htm in your website root• Change the path to assets• Download the latest version of jQuery.js to assets
  • GETTING STARTED• Go to http://twitter.github.com/bootstrap/examples/fluid.html• Save the source as index.htm in your website root• Change the path to assets• Download the latest version of jQuery.js to assets• Gasp in amazement when it just works
  • RESPONSIVE DESIGN• Based on media queries (Min & Max width)• Fluid containers based on percentage widths• Flexible images
  • MOBILE FIRST
  • "If you design for mobile first, you can create agreement up front on what matters most. You can then apply the same rationale to the desktop (and any other) experience of your web product. If you can agree on the most important set of features and content for your customers and business, why should that prioritization change with more screen space?"LukeWroblewski
  • MOBILE FIRST PRINCIPLES
  • MOBILE FIRST PRINCIPLES• Start with shared styles, add complexity as space permits
  • MOBILE FIRST PRINCIPLES• Start with shared styles, add complexity as space permits • One column first, add more as you go
  • MOBILE FIRST PRINCIPLES• Start with shared styles, add complexity as space permits • One column first, add more as you go • Small images for logos etc, switch to larger versions for desktop
  • MOBILE FIRST PRINCIPLES• Start with shared styles, add complexity as space permits • One column first, add more as you go • Small images for logos etc, switch to larger versions for desktop • Use CSS instead of images where possible
  • MOBILE FIRST PRINCIPLES• Start with shared styles, add complexity as space permits • One column first, add more as you go • Small images for logos etc, switch to larger versions for desktop • Use CSS instead of images where possible• Use relative units (percentages & ems) for greater flexability
  • TESTING RESPONSIVE DESIGN
  • TESTING RESPONSIVE DESIGN• Adjust browser width
  • TESTING RESPONSIVE DESIGN• Adjust browser width• Upload to server & view in various devices
  • TESTING RESPONSIVE DESIGN• Adjust browser width• Upload to server & view in various devices• Adobe Shadow
  • RESPONSIVE WEB DESIGN
  • RESPONSIVE WEB DESIGNWith Twitter Bootstrap & LESS
  • TO SUMMARISE
  • TO SUMMARISE• LESS is a powerful tool for CSS development
  • TO SUMMARISE• LESS is a powerful tool for CSS development • speeds up development time
  • TO SUMMARISE• LESS is a powerful tool for CSS development • speeds up development time • keeps things DRY (at least when developing)
  • TO SUMMARISE• LESS is a powerful tool for CSS development • speeds up development time • keeps things DRY (at least when developing) • really useful for X browser support
  • TO SUMMARISE• LESS is a powerful tool for CSS development • speeds up development time • keeps things DRY (at least when developing) • really useful for X browser support • fun to work with
  • TO SUMMARISE
  • TO SUMMARISE• Bootstrap is MASSIVE
  • TO SUMMARISE• Bootstrap is MASSIVE • speeds up development time
  • TO SUMMARISE• Bootstrap is MASSIVE • speeds up development time • lots of browser testing done
  • TO SUMMARISE• Bootstrap is MASSIVE • speeds up development time • lots of browser testing done • great for prototyping
  • TO SUMMARISE• Bootstrap is MASSIVE • speeds up development time • lots of browser testing done • great for prototyping • it does control the way you code
  • TO SUMMARISE• Bootstrap is MASSIVE • speeds up development time • lots of browser testing done • great for prototyping • it does control the way you code • if you don’t like presentational class names, it’s not for you
  • THAT’S IT!
  • THAT’S IT!• Have a look at VoiceOfTheMysterons.com for: • links • demos on git hub • slides
  • Than
  • ThanQuestions?