SlideShare a Scribd company logo
1 of 10
Zurb Foundation
CSS Framework
by
Man Math
Support Developer
097 847 0 847
man@web-essentials.asia
@manmath4
What is CSS?
• Cascading Style Sheets (CSS) is a style
sheet language used for describing the
presentation semantics (the look and
formatting) of a document written in a
markup language.
August 24, 2013 Copy (c) right by Man Math 3
What is DCSS?
• Dynamic CSS, or DCSS, is an umbrella
term for a collection of technologies used
together to create dynamic style sheets,
by using a combination of any server-
sided programming language and
Cascading Style Sheets.
August 24, 2013 Copy (c) right by Man Math 4
What is RWD?
• Responsive web design (RWD) is a web
design approach aimed at crafting sites to
provide an optimal viewing experience a
wide range of devices (from mobile
phones to desktop computer monitors).
August 24, 2013 Copy (c) right by Man Math 5
August 24, 2013 Copy (c) right by Man Math 6
Foundation
The most advanced responsive front-end framework in the world.
by
Zurb Company
August 24, 2013 Copy (c) right by Man Math 7
Why we chose Foundation 4?
• Designed for Mobile First!
• Flexible 12-column grid
• Mobile visibility elements
• Mobile navigation – toggle or off-canvas
• Powerful jQuery and Zepto libraries
• Existing Word Press theme
• Foundation is developed in Sass
August 24, 2013 Copy (c) right by Man Math 8
References
• http://foundation.zurb.com
• http://zurb.com
• https://github.com/zurb/foundation
• http://en.wikipedia.org/wiki/Responsive_web_design
• http://en.wikipedia.org/wiki/Cascading_Style_Sheets
August 24, 2013 Copy (c) right by Man Math 9
Thanks You!
August 24, 2013 Copy (c) right by Man Math 10

More Related Content

Similar to Responsive with Zurb Foundation

Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerLizzie Hodgson
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsSteve Hong
 
Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworksNicole Ryan
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designingAanand Bohara
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Blueprint css framework
Blueprint css frameworkBlueprint css framework
Blueprint css frameworkTechsailor
 
Tailwind CSS.11.pptx
Tailwind CSS.11.pptxTailwind CSS.11.pptx
Tailwind CSS.11.pptxHarish Verma
 

Similar to Responsive with Zurb Foundation (20)

Css introduction
Css   introductionCss   introduction
Css introduction
 
Understanding sass
Understanding sassUnderstanding sass
Understanding sass
 
Digibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David WalkerDigibury: Getting your web presence mobile ready - David Walker
Digibury: Getting your web presence mobile ready - David Walker
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Portfolio
PortfolioPortfolio
Portfolio
 
Sudheendra (1)
Sudheendra (1)Sudheendra (1)
Sudheendra (1)
 
Sudheendra (1)
Sudheendra (1)Sudheendra (1)
Sudheendra (1)
 
Sudheendra (1)
Sudheendra (1)Sudheendra (1)
Sudheendra (1)
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
Vineel sai
Vineel saiVineel sai
Vineel sai
 
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent Results
 
Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworks
 
Sanketh ppts
Sanketh pptsSanketh ppts
Sanketh ppts
 
Sanketh ppts
Sanketh pptsSanketh ppts
Sanketh ppts
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designing
 
Portfolio intern
Portfolio internPortfolio intern
Portfolio intern
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Blueprint css framework
Blueprint css frameworkBlueprint css framework
Blueprint css framework
 
Tailwind CSS.11.pptx
Tailwind CSS.11.pptxTailwind CSS.11.pptx
Tailwind CSS.11.pptx
 

More from Man Math

Introduction TYPO3 Version 6.1.5
Introduction TYPO3 Version 6.1.5Introduction TYPO3 Version 6.1.5
Introduction TYPO3 Version 6.1.5Man Math
 
Web Responsive Design
Web Responsive DesignWeb Responsive Design
Web Responsive DesignMan Math
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesMan Math
 
Benefit of doing Internship
Benefit of doing InternshipBenefit of doing Internship
Benefit of doing InternshipMan Math
 
Angkor charity trip partnership proposal
Angkor charity trip partnership proposalAngkor charity trip partnership proposal
Angkor charity trip partnership proposalMan Math
 

More from Man Math (6)

Introduction TYPO3 Version 6.1.5
Introduction TYPO3 Version 6.1.5Introduction TYPO3 Version 6.1.5
Introduction TYPO3 Version 6.1.5
 
Web Responsive Design
Web Responsive DesignWeb Responsive Design
Web Responsive Design
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
LESS CSS
LESS CSSLESS CSS
LESS CSS
 
Benefit of doing Internship
Benefit of doing InternshipBenefit of doing Internship
Benefit of doing Internship
 
Angkor charity trip partnership proposal
Angkor charity trip partnership proposalAngkor charity trip partnership proposal
Angkor charity trip partnership proposal
 

Recently uploaded

The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room servicediscovermytutordmt
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docxPoojaSen20
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpinRaunakKeshri1
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfchloefrazer622
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeThiyagu K
 
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...anjaliyadav012327
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 

Recently uploaded (20)

The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
9548086042 for call girls in Indira Nagar with room service
9548086042  for call girls in Indira Nagar  with room service9548086042  for call girls in Indira Nagar  with room service
9548086042 for call girls in Indira Nagar with room service
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
mini mental status format.docx
mini    mental       status     format.docxmini    mental       status     format.docx
mini mental status format.docx
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Student login on Anyboli platform.helpin
Student login on Anyboli platform.helpinStudent login on Anyboli platform.helpin
Student login on Anyboli platform.helpin
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
JAPAN: ORGANISATION OF PMDA, PHARMACEUTICAL LAWS & REGULATIONS, TYPES OF REGI...
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 

Responsive with Zurb Foundation

  • 1.
  • 2. Zurb Foundation CSS Framework by Man Math Support Developer 097 847 0 847 man@web-essentials.asia @manmath4
  • 3. What is CSS? • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. August 24, 2013 Copy (c) right by Man Math 3
  • 4. What is DCSS? • Dynamic CSS, or DCSS, is an umbrella term for a collection of technologies used together to create dynamic style sheets, by using a combination of any server- sided programming language and Cascading Style Sheets. August 24, 2013 Copy (c) right by Man Math 4
  • 5. What is RWD? • Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience a wide range of devices (from mobile phones to desktop computer monitors). August 24, 2013 Copy (c) right by Man Math 5
  • 6. August 24, 2013 Copy (c) right by Man Math 6
  • 7. Foundation The most advanced responsive front-end framework in the world. by Zurb Company August 24, 2013 Copy (c) right by Man Math 7
  • 8. Why we chose Foundation 4? • Designed for Mobile First! • Flexible 12-column grid • Mobile visibility elements • Mobile navigation – toggle or off-canvas • Powerful jQuery and Zepto libraries • Existing Word Press theme • Foundation is developed in Sass August 24, 2013 Copy (c) right by Man Math 8
  • 9. References • http://foundation.zurb.com • http://zurb.com • https://github.com/zurb/foundation • http://en.wikipedia.org/wiki/Responsive_web_design • http://en.wikipedia.org/wiki/Cascading_Style_Sheets August 24, 2013 Copy (c) right by Man Math 9
  • 10. Thanks You! August 24, 2013 Copy (c) right by Man Math 10