O que é Materialize?
Materialize é um framework front-end incrível feito para te ajudar a criar interfaces Web responsivas. Todos os elementos dele são inspirados no Material Design (estrutura que o Google usa para criar a interface do seus projetos).
Porque utilizá-lo?
Utilizando o Materialize fica ainda mais fácil criar interfaces bonitas e responsivas com um código limpo e fácil de ser reutilizado. Então se você gostar de criar interfaces usando o Bootstrap vale a pena conhecer o Materialize.
O que vamos utilizar
- Ruby
- Ruby On Rails
- Materialize-sass (gem)
- Material-icons (gem)
Passo a Passo
Criando o Projeto
1 – Rode no console:
|
1 |
rails new example |
Instalando o Materialize
1 – Coloque no seu Gemfile:
|
1 2 3 4 5 6 |
# Inclua nas versões quando rails >= 5.1 gem 'jquery-rails' # Sempre inclua gem 'materialize-sass' gem 'material_icons' |
2 – Instale rodando no console:
|
1 |
bundle install |
3 – Remova o arquivo app/assets/stylesheets/application.css
4 – Crie o arquivo app/assets/stylesheets/application.scss e coloque nele:
|
1 2 |
@import "materialize"; @import "material_icons"; |
No arquivo app/assets/javascripts/application.js coloque:
|
1 2 3 4 5 6 7 8 |
// Inclua nas versões quando rails >= 5.1 //= require jquery //= require jquery_ujs // Sempre inclua //= require turbolinks //= require materialize-sprockets //= require_tree . |
Um exemplo de uso
1 – Crie um Controller e view rodando:
|
1 |
rails g controller page index |
2 – Coloque app/views/pages/index.html.erb:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<nav class="light-blue lighten-1" role="navigation"> <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a> <ul class="right hide-on-med-and-down"> <li><a href="#">Navbar Link</a></li> </ul> <ul id="nav-mobile" class="side-nav"> <li><a href="#">Navbar Link</a></li> </ul> <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> </div> </nav> <div class="section no-pad-bot" id="index-banner"> <div class="container"> <br><br> <h2 class="header center orange-text">OneBitCode</h2> <div class="row center"> <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5> </div> <div class="row center"> <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a> </div> <br><br> </div> </div> <div class="container"> <div class="section"> <!-- Icon Section --> <div class="row"> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2> <h5 class="center">Speeds up development</h5> <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="material-icons">group</i></h2> <h5 class="center">User Experience Focused</h5> <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p> </div> </div> <div class="col s12 m4"> <div class="icon-block"> <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2> <h5 class="center">Easy to work with</h5> <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p> </div> </div> </div> </div> <br><br> </div> <footer class="page-footer orange"> <div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">Company Bio</h5> <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p> </div> <div class="col l3 s12"> <h5 class="white-text">Settings</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> <div class="col l3 s12"> <h5 class="white-text">Connect</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a> </div> </div> </footer> |
3 – Para ver o resultado rode no console:
|
1 |
rails s |
4 – E visite no browser:
http://localhost:3000/page/index
Referências:
Documentação materialize:
http://materializecss.com
Documentação Material Design:
https://material.io/guidelines/
Link para o Gihtub: https://github.com/leonardoscorza/rails_and_materialize
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
Gostou desse Screencast? Comenta aí em baixo para eu saber. 🙂
Lembrando toda Quinta às 20h30 tem OneBitTalk e toda Sexta às 19h00 tem um novo tutorial para você aqui.
Ficou com alguma dúvida? Posta no nosso fórum: los angeles dating by smell
Obrigado pela sua presença,
Grande abraço!
Leonardo Scorza
Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!
O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!
Fique por dentro de todos os conteúdos o/
Nossas redes sociais:
📹 • https://onebitcode.com/starting-a-online-dating-business/ [Live todas as terças-feiras às 19h)
💻 • dating sites that start with t
🙂 • gay gamers dating
📱 • women seeking men in craigslist
🐦 • https://twitter.com/onebitcode
Nossos cursos:
🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
⚙ • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec
Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂
Bem-vindo à família OneBitCode o/
