26. VARIABLES
allow properties such as colours & fonts to be
• Variables
declared once and referenced many times through your LESS
file(s)
27. 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
29. MIXINS
• Mixinsallow you to embed properties of a class into another
by using the Mixin class name as a property
30. 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
35. FUNCTIONS & OPERATIONS
• Functions
map one-to-one with JavaScript code, allowing you
to manipulate values however you want
36. 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
44. BOOTSTRAP - WHAT’S IN IT?
• Responsive 12-column grids,
layouts, and components.
45. BOOTSTRAP - WHAT’S IN IT?
• Responsive 12-column grids,
layouts, and components.
• Fundamental HTML
elements styled and
enhanced with extensible
classes
46. 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
47. 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
52. 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
53. 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”
56. GETTING STARTED
• Go to http://twitter.github.com/bootstrap/examples/fluid.html
• Save the source as index.htm in your website root
57. 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
58. 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
59. 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
60. RESPONSIVE DESIGN
• Based on media queries (Min & Max width)
• Fluid containers based on percentage widths
• Flexible images
63. "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
66. MOBILE FIRST PRINCIPLES
• Start with shared styles, add complexity as space permits
• One column first, add more as you go
67. 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
68. 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
69. 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
79. TO SUMMARISE
• LESS is a powerful tool for CSS development
• speeds up development time
80. TO SUMMARISE
• LESS is a powerful tool for CSS development
• speeds up development time
• keeps things DRY (at least when developing)
81. 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
82. 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
87. TO SUMMARISE
• Bootstrap is MASSIVE
• speeds up development time
• lots of browser testing done
• great for prototyping
88. TO SUMMARISE
• Bootstrap is MASSIVE
• speeds up development time
• lots of browser testing done
• great for prototyping
• it does control the way you code
89. 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
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
