Rapid prototyping front end libraries

•Als KEY, PDF herunterladen•

2 gefällt mir•896 views

Michal Taberski

Short compression between Twitter bootstrap and Zurb foundation.

Technologie

Rapid prototyping
front end libraries
Michał Taberski

Poznań Ruby User Group 26.10.2011

What is it?

Skeleton of CSS, HTML, and JS code you will probably need at
your project

examples

reset.css

common well known UI design patterns

basic form styling

basic JS features plugins

Who is playing this game?

There are two players

Bootstrap (by Twitter)

Foundation (by Zurb)

bootstrap
by

http://twitter.github.com/bootstrap/

foundation
by

http://foundation.zurb.com/

so... what is common for both

Grid

form, buttons, table etc. styles

modal window

image girds

popular UI patterns already done

drop down menu, horizontal menu, pagination, info, alert box

free for commercial usage

are there any significant differences?

BOOTSTRAP: more CSS3 with sweetie transitions, looks more
like a ready product

FOUNDATION: raw, not as beauty as bootstrap, but...

is a “foundation” for page, prepared to be extended by the
final graphics, custom style

you won`t need to write once again front end code for
production version

prepared for mobile browsers

Weitere ähnliche Inhalte

Andere mochten auch

「情報社会と人間」2010年11月10日講義資料Toshiyuki Kanamaru

Modern web application modelMichal Taberski

Coffee ScriptMichal Taberski

Strengthening Families 101Center for the Study of Social Policy

Team 3shan1388

2017Negotiation Bootcamp

Results-Based Public Policy FrameworkCenter for the Study of Social Policy

CSSP Well-Being Frame Center for the Study of Social Policy

Andere mochten auch (9)

「情報社会と人間」2010年11月10日講義資料

Modern web application model

Coffee Script

Strengthening Families 101

Team 3

2017

Results-Based Public Policy Framework

CSSP Well-Being Frame

Ähnlich wie Rapid prototyping front end libraries

CSS3 and a brief introduction to Google Maps API v3 Jeffrey Barke

BootstrapSimon Smith

Beginning CSS.dhruvgairola

Rails camp '15 presentation - Bootstrap v. Foundation v. Bourbonezytiger

Responsive web-design through bootstrapZunair Sagitarioux

Web DesignPRAJAKTA GHARE

basic information about web designPrajakta Ghare

The A to Z of Building a Responsive SharePoint Site with BootstrapThomas Daly

Bootstrap for BeginnersD'arce Hess

Build a Bootstrap WordPress themeDimitri Dhuyvetter

STEAMy AI and NLP VWMOOC23.pdfCynthia Calongne

BootstrapAtul Adhikari

Scalable front-end architecture with Bootstrap 3 + Atomic CSSHayden Bleasel

Web design v roku 2013vibration.sk

Bootstrap seminar presentationPratikDoiphode1

Design Systems are Coming... Are you Ready?Vernon Kesner

Bootstrap presentationsergeyloysha

Introduction to Twitter's Bootstrap 2Julien Renaux

Web dev-101Andrew Pottenger

Twitter bootstrap and DrupalSujith Nara

Ähnlich wie Rapid prototyping front end libraries (20)

CSS3 and a brief introduction to Google Maps API v3

Bootstrap

Beginning CSS.

Rails camp '15 presentation - Bootstrap v. Foundation v. Bourbon

Responsive web-design through bootstrap

Web Design

basic information about web design

The A to Z of Building a Responsive SharePoint Site with Bootstrap

Bootstrap for Beginners

Build a Bootstrap WordPress theme

STEAMy AI and NLP VWMOOC23.pdf

Bootstrap

Scalable front-end architecture with Bootstrap 3 + Atomic CSS

Web design v roku 2013

Bootstrap seminar presentation

Design Systems are Coming... Are you Ready?

Bootstrap presentation

Introduction to Twitter's Bootstrap 2

Web dev-101

Twitter bootstrap and Drupal

Kürzlich hochgeladen

04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Automating Google Workspace (GWS) & more with Apps Scriptwesley chun

The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Histor y of HAM Radio presentation slidevu2urc

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Artificial Intelligence: Facts and MythsJoaquim Jorge

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

A Domino Admins Adventures (Engage 2024)Gabriella Davis

What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco

Kürzlich hochgeladen (20)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx

Finology Group – Insurtech Innovation Award 2024

Handwritten Text Recognition for manuscripts and early printed texts

Automating Google Workspace (GWS) & more with Apps Script

The Codex of Business Writing Software for Real-World Solutions 2.pptx

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

CNv6 Instructor Chapter 6 Quality of Service

Boost Fertility New Invention Ups Success Rates.pdf

Powerful Google developer tools for immediate impact! (2023-24 C)

Boost PC performance: How more available memory can improve productivity

Presentation on how to chat with PDF using ChatGPT code interpreter

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Histor y of HAM Radio presentation slide

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Artificial Intelligence: Facts and Myths

IAC 2024 - IA Fast Track to Search Focused AI Solutions

Factors to Consider When Choosing Accounts Payable Services Providers.pptx

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...

A Domino Admins Adventures (Engage 2024)

What Are The Drone Anti-jamming Systems Technology?

Rapid prototyping front end libraries

1. Rapid prototyping front end libraries Michał Taberski Poznań Ruby User Group 26.10.2011

2. What is it? Skeleton of CSS, HTML, and JS code you will probably need at your project examples reset.css common well known UI design patterns basic form styling basic JS features plugins

3. Who is playing this game? There are two players Bootstrap (by Twitter) Foundation (by Zurb)

4. bootstrap by http://twitter.github.com/bootstrap/

5. foundation by http://foundation.zurb.com/

6. I hope you noticed, I switched ZURB and Twitter logo to check your attention!

7. so... what is common for both Grid form, buttons, table etc. styles modal window image girds popular UI patterns already done drop down menu, horizontal menu, pagination, info, alert box free for commercial usage

8. are there any significant differences? BOOTSTRAP: more CSS3 with sweetie transitions, looks more like a ready product FOUNDATION: raw, not as beauty as bootstrap, but... is a “foundation” for page, prepared to be extended by the final graphics, custom style you won`t need to write once again front end code for production version prepared for mobile browsers

9. What do you think? Discussion time...

10. Thanks... @michaltaberski

Rapid prototyping front end libraries

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie Rapid prototyping front end libraries

Ähnlich wie Rapid prototyping front end libraries (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Rapid prototyping front end libraries

Hinweis der Redaktion