SlideShare a Scribd company logo
1 of 56
Foundation Framework
O Foundation é um Framework CSS desenvolvido pela Zurb.
Ele foi desenvolvido para minimizar o trabalho do
desenvolvedor front-end, desde o wireframes até o
desenvolvimento final do layout front-end. Outro ponto
importante e que ele mantem um na codificação de um projeto
caso outros desenvolvedores estejam fazendo o projeto.
O Foundation tem uma séries de recursos no código fonte
baseado em em CSS e JavaScript que agiliza o
desenvolvimento do projeto, onde basta chamar a classe do
elemento desejado, para se chegar ao resultado do layout
apresentado pelo design.
O que é o Foundation Framework
• Grid
• Navigation
• Buttons
• Forms
• Typography
• CSS Components
• Javascript
O Framework conta com as seguintes
categorias de desenvolvimento:
Grid
O Foundation funciona basicamente com grids, que é um padrão de
desenvolvimento para layouts que determina as medidas que devem ser utilizadas e
como site vai se comportar em cada medida. O foundation trabalha com o padrão de
desenvolvimento “mobile-first”, no qual que determina que projeto no qual esteja
desenvolvimento seja construído para dispositivos moveis, mas não é obrigatório.
No caso do framework, os grids são usados para alinhar e organizar o conteúdo do
projeto de acordo com o layout desenvolvido pelo design.
Ao baixa o Foundation Framework padrão no site, ele vem com um grid de 12
colunas, mas na mesma página do download, o framework pode ser personalizado
de varias formas como: numero de colunas, plugins e cores padrão.
Categorias do Foundation
Grid simples
Navigation
-Pagination
É a paginação de um projeto, como a de um blog ou
uma lista de resultados de busca.
Categorias do Foundation
Exemplo de pagination
Navigation
-Side Nav
É como se fosse um menu lateral.
Categorias do Foundation
Exemplo de Side Nav
Navigation
-Sub Nav
Pode ser usada para várias coisas, mas é usado
mais para filtros, como tags.
Categorias do Foundation
Exemplo de Sub Nav
Navigation
-Top Bar
É o menu fixo do topo do Foundation.
Categorias do Foundation
Exemplo de Top Bar
Navigation
-Breadcrumbs
É a barra que faz a trilha de navegação do seu projeto,
onde são apresentadas as paginas que o usuário pode ir
e de que pagina ele veio. Isso é uma questão de
usabilidade pois o usuário se sente localizado sabendo
de onde veio e onde pode ir em um website. Parece e
pode ser usado como menu, porém não é estilizado para
tal.
Categorias do Foundation
Exemplo de Breadcrumbs
Buttons
-Buttons
O código fonte do Foundation conta com botões pré
configurados, basta digitar a class button no seu
código.
Categorias do Foundation
Exemplo de Button
Buttons
-Buttons Groups
É basicamente um grupo onde tem 2 ou mais
botões.
Categorias do Foundation
Exemplo de Button Groups
Buttons
-Dropdown Buttons
É basicamente um Dropdown de botões.
Categorias do Foundation
Exemplo de Dropdown Buttons
Forms
-Forms
O Foundation da total suporte para elaboração de
Form responsiva pois utiliza também as grids para
agrupar os elementos da form e como todos os
outros elementos que já analisamos, ele também
estiliza a form de uma forma padrão que agrada o
usuário.
Categorias do Foundation
Exemplo de Form
Exemplo de Form
Typography
-Type
O Foundation estiliza por padrão o texto apresentado na sua
página feita com o Framework, além de utilizar o Normalize.css
para padronizar os elementos de texto.
Para estilizar o texto não é necessário aplicar nenhuma classe ou
marcação especial para a maioria dos elementos bastando utilizar a
marcação padrão do HTML pois a definição CSS feita pelo
Framework está aplicada aos elementos HTML padrão com
exceção da classe “subheader” para os elementos de titulo.
Categorias do Foundation
Exemplo de Type
Typography
-Labels
Essa função é bem interessante, ela cria um fundo com cores
padrões (ou não, é customizável) para uma certa parte do texto,
não existe uma tradução exata para essa funções portanto
vamos chama-la de label mesmo.
As labels funcionam da mesma forma que os botões em
relação aos estilos pré-definidos como o round, radius, alert,
success e etc..
Categorias do Foundation
Exemplo de Labels
Typography
-Inline Lists
É basicamente links em uma linha.
Categorias do Foundation
Exemplo de Labels
CSS Components
-Alert Boxes
E uma caixa de alerta que você pode configurar para
aparecer quando algum processo é executado no
seu projeto ou por exemplo quando algum campo da
form não está correto quando clicado no botão
enviar.
Categorias do Foundation
Exemplo de Alert Boxes
CSS Components
-Panels
O Panel é um componente CSS do Foundation que da a
possibilidade de se criar, digamos, um painel para enfase
de conteúdo. É muito utilizada para transformar uma DIV
em um quadro para uma imagem por exemplo, ou um
quadro que apresenta um texto, pois estiliza os atributos
margin e padding do quadro, como na imagem:
Categorias do Foundation
Exemplo de Panels
CSS Components
-Pricing Tables
É um item que tem pouca utilização, que é uma
tabela de preço pronta, basta apenas você declarar
as informações que nela vão ser apresentadas.
Categorias do Foundation
Exemplo de Pricing Tables
CSS Components
-Progress Bar
O Foundation conta com uma forma simples e fácil de
adicionar barra de progresso a alguma função do seu
projeto. Vale ressaltar que praticamente todos os
componentes CSS do Framework seguem o mesmo
padrão de classes, o que torna cabível a configuração da
barra de progresso por parte do desenvolvedor.
Categorias do Foundation
Exemplo de Progress Bar
CSS Components
-Thumbnails
São miniaturas de imagens.
Categorias do Foundation
Exemplo de Thumbnails
CSS Components
-Flex Video
Esse componente é utilizado para corrigir problemas
de visualização de videos em dispositivos móveis,
ele torna responsivos os vídeos presentes na pagina.
Categorias do Foundation
Exemplo de Flex Video
CSS Components
-Tables
O Foundation estiliza automaticamente qualquer
tabela que você tenha configurada em sua página,
pois o estilo CSS é empresado para a tag table..
Categorias do Foundation
Exemplo de Tables
Javascript
-Abide
É o validador HTML5 de formulário.
Categorias do Foundation
Exemplo de Abide
Javascript
-Clearing
Galeria de imagem.
Categorias do Foundation
Exemplo de Clearing
Javascript
- Joyride
É usada para marcação de lugar especifico
Categorias do Foundation
Exemplo de Joyride
Javascript
-Orbit
É o slideshow ou banner do Foundation.
Categorias do Foundation
Exemplo de Orbit
Javascript
-Reval
É a modal do Foundation.
Categorias do Foundation
Exemplo de Reveal
Javascript
-Tooltips
É como se fosse uma legenda, que quando passar o
mouse, levanta um balão coma legenda do
Foundation.
Categorias do Foundation
Exemplo de Tooltips

More Related Content

What's hot (20)

Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilos
 
Edição de Artigos - Joomla!
Edição de Artigos - Joomla!Edição de Artigos - Joomla!
Edição de Artigos - Joomla!
 
Aula 07
Aula 07Aula 07
Aula 07
 
Aula 03
Aula 03Aula 03
Aula 03
 
Os meias 07.04
Os meias 07.04Os meias 07.04
Os meias 07.04
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Criação de Artigos Joomla
Criação de Artigos JoomlaCriação de Artigos Joomla
Criação de Artigos Joomla
 
Prime Faces
Prime FacesPrime Faces
Prime Faces
 
Aula 09
Aula 09Aula 09
Aula 09
 
Aula 05
Aula 05Aula 05
Aula 05
 
Aula 06
Aula 06Aula 06
Aula 06
 
Material css parte I
Material css parte IMaterial css parte I
Material css parte I
 
Wordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do PublicadorWordpress, Guia/Manual do Publicador
Wordpress, Guia/Manual do Publicador
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
WordPress 2.9: Manual do Editor
WordPress 2.9: Manual do EditorWordPress 2.9: Manual do Editor
WordPress 2.9: Manual do Editor
 
1. manual portal padrao
1. manual portal padrao1. manual portal padrao
1. manual portal padrao
 
1. manual portal_padra_yo
1. manual portal_padra_yo1. manual portal_padra_yo
1. manual portal_padra_yo
 
Guia para ativar sua loja ou site grátis no facebook
Guia para ativar sua loja ou site grátis no facebookGuia para ativar sua loja ou site grátis no facebook
Guia para ativar sua loja ou site grátis no facebook
 
Como inserir uma aba em sua fanpage do Facebook
Como inserir uma aba em sua fanpage do FacebookComo inserir uma aba em sua fanpage do Facebook
Como inserir uma aba em sua fanpage do Facebook
 
Curso de WordPress
Curso de WordPressCurso de WordPress
Curso de WordPress
 

Viewers also liked

Foundation: Prototype to Production
Foundation: Prototype to ProductionFoundation: Prototype to Production
Foundation: Prototype to ProductionZURB
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez
 
Overview certificação ITIL foundation
Overview certificação ITIL foundationOverview certificação ITIL foundation
Overview certificação ITIL foundationFernando Palma
 
Responsive with Zurb Foundation
Responsive with Zurb FoundationResponsive with Zurb Foundation
Responsive with Zurb FoundationMan Math
 
Team Foundation Server
Team Foundation ServerTeam Foundation Server
Team Foundation ServerMaira Iantas
 
Palestra Sobre o que é um Front-End
Palestra Sobre o que é um Front-EndPalestra Sobre o que é um Front-End
Palestra Sobre o que é um Front-EndLuis Fernando Mangia
 

Viewers also liked (6)

Foundation: Prototype to Production
Foundation: Prototype to ProductionFoundation: Prototype to Production
Foundation: Prototype to Production
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 
Overview certificação ITIL foundation
Overview certificação ITIL foundationOverview certificação ITIL foundation
Overview certificação ITIL foundation
 
Responsive with Zurb Foundation
Responsive with Zurb FoundationResponsive with Zurb Foundation
Responsive with Zurb Foundation
 
Team Foundation Server
Team Foundation ServerTeam Foundation Server
Team Foundation Server
 
Palestra Sobre o que é um Front-End
Palestra Sobre o que é um Front-EndPalestra Sobre o que é um Front-End
Palestra Sobre o que é um Front-End
 

Similar to Foundation 4 Framework CSS

Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressJackson F. de A. Mafra
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPressThiago Mendes
 
CORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSCORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSDaniel Paz
 
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel  - Core web vitals e WordPressWordCamp Floripa 2021 - Daniel  - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPressWordCamp Floripa
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPressMarconi Pacheco
 
Curso Enterprise Architect
Curso Enterprise ArchitectCurso Enterprise Architect
Curso Enterprise Architectrandearievilo
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web iEliene Resende
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web iEliene Resende
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marquesWillian Marques
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Eric Gallardo
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funçõesDaniel Marcos
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojofabioginzel
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao cssLéo Dias
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Sérgio Vilar
 
Apresentação blogs
Apresentação blogsApresentação blogs
Apresentação blogsluizaselis
 
Introducao ao WordPress
Introducao ao WordPressIntroducao ao WordPress
Introducao ao WordPressKennedy Lucas
 

Similar to Foundation 4 Framework CSS (20)

Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end Foundation
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
 
CORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESSCORE WEB VITALS E WORDPRESS
CORE WEB VITALS E WORDPRESS
 
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel  - Core web vitals e WordPressWordCamp Floripa 2021 - Daniel  - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
Curso Enterprise Architect
Curso Enterprise ArchitectCurso Enterprise Architect
Curso Enterprise Architect
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
 
Treinamento ASP.NET 2014
Treinamento ASP.NET 2014Treinamento ASP.NET 2014
Treinamento ASP.NET 2014
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
Como desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a ZComo desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a Z
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Html capitulo 07
Html   capitulo 07Html   capitulo 07
Html capitulo 07
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Apresentação blogs
Apresentação blogsApresentação blogs
Apresentação blogs
 
Introducao ao WordPress
Introducao ao WordPressIntroducao ao WordPress
Introducao ao WordPress
 

Foundation 4 Framework CSS