SlideShare a Scribd company logo
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

Understanding sass
Understanding sassUnderstanding sass
Understanding sass
Mario Hernandez
 
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
Lizzie Hodgson
 
intro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxintro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptx
AsrithaKorupolu
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
Doris Chen
 
Portfolio
PortfolioPortfolio
Portfolio
Priya Reddy Sama
 
Sudheendra (1)
Sudheendra (1)Sudheendra (1)
Sudheendra (1)
SudheendraM1
 
Sudheendra (1)
Sudheendra (1)Sudheendra (1)
Sudheendra (1)
SudheendraM1
 
Sudheendra (1)
Sudheendra (1)Sudheendra (1)
Sudheendra (1)
SudheendraM1
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
Vineel sai
Vineel saiVineel sai
Vineel sai
Vineel Sai Bezgam
 
CSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent ResultsCSS Frameworks: Faster Layout, Consistent Results
CSS Frameworks: Faster Layout, Consistent Results
Steve Hong
 
Media queries and frameworks
Media queries and frameworksMedia queries and frameworks
Media queries and frameworks
Nicole Ryan
 
Sanketh ppts
Sanketh pptsSanketh ppts
Sanketh ppts
SudheendraM1
 
Sanketh ppts
Sanketh pptsSanketh ppts
Sanketh ppts
SudheendraM1
 
Responsive web designing
Responsive web designingResponsive web designing
Responsive web designing
Aanand Bohara
 
Portfolio intern
Portfolio internPortfolio intern
Portfolio intern
Gayathri Thanner
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
Blueprint css framework
Blueprint css frameworkBlueprint css framework
Blueprint css framework
Techsailor
 

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
 
intro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxintro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptx
 
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
 

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.5
Man Math
 
Web Responsive Design
Web Responsive DesignWeb Responsive Design
Web Responsive Design
Man Math
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Man Math
 
LESS CSS
LESS CSSLESS CSS
LESS CSS
Man Math
 
Benefit of doing Internship
Benefit of doing InternshipBenefit of doing Internship
Benefit of doing Internship
Man Math
 
Angkor charity trip partnership proposal
Angkor charity trip partnership proposalAngkor charity trip partnership proposal
Angkor charity trip partnership proposal
Man 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

CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
Scholarhat
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
DeeptiGupta154
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
Atul Kumar Singh
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
Sandy Millin
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
EverAndrsGuerraGuerr
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
thanhdowork
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
SACHIN R KONDAGURI
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Atul Kumar Singh
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
vaibhavrinwa19
 
Chapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdfChapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdf
Kartik Tiwari
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Thiyagu K
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
Vivekanand Anglo Vedic Academy
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
Jisc
 
Normal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of LabourNormal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of Labour
Wasim Ak
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
DhatriParmar
 
Biological Screening of Herbal Drugs in detailed.
Biological Screening of Herbal Drugs in detailed.Biological Screening of Herbal Drugs in detailed.
Biological Screening of Herbal Drugs in detailed.
Ashokrao Mane college of Pharmacy Peth-Vadgaon
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
Peter Windle
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
ArianaBusciglio
 

Recently uploaded (20)

CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
 
Overview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with MechanismOverview on Edible Vaccine: Pros & Cons with Mechanism
Overview on Edible Vaccine: Pros & Cons with Mechanism
 
Language Across the Curriculm LAC B.Ed.
Language Across the  Curriculm LAC B.Ed.Language Across the  Curriculm LAC B.Ed.
Language Across the Curriculm LAC B.Ed.
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
 
Thesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.pptThesis Statement for students diagnonsed withADHD.ppt
Thesis Statement for students diagnonsed withADHD.ppt
 
A Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptxA Survey of Techniques for Maximizing LLM Performance.pptx
A Survey of Techniques for Maximizing LLM Performance.pptx
 
"Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe..."Protectable subject matters, Protection in biotechnology, Protection of othe...
"Protectable subject matters, Protection in biotechnology, Protection of othe...
 
Guidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th SemesterGuidance_and_Counselling.pdf B.Ed. 4th Semester
Guidance_and_Counselling.pdf B.Ed. 4th Semester
 
Acetabularia Information For Class 9 .docx
Acetabularia Information For Class 9  .docxAcetabularia Information For Class 9  .docx
Acetabularia Information For Class 9 .docx
 
Chapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdfChapter -12, Antibiotics (One Page Notes).pdf
Chapter -12, Antibiotics (One Page Notes).pdf
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
The French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free downloadThe French Revolution Class 9 Study Material pdf free download
The French Revolution Class 9 Study Material pdf free download
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...How libraries can support authors with open access requirements for UKRI fund...
How libraries can support authors with open access requirements for UKRI fund...
 
Normal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of LabourNormal Labour/ Stages of Labour/ Mechanism of Labour
Normal Labour/ Stages of Labour/ Mechanism of Labour
 
The Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptxThe Accursed House by Émile Gaboriau.pptx
The Accursed House by Émile Gaboriau.pptx
 
Biological Screening of Herbal Drugs in detailed.
Biological Screening of Herbal Drugs in detailed.Biological Screening of Herbal Drugs in detailed.
Biological Screening of Herbal Drugs in detailed.
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
 

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