Mở đầu

Semantic-UI là một frontend css framework cho phép designer và developer có thể chia sẻ UI thông qua một ngôn ngữ chung. Semantic-UI cung cấp các UI dựng sẵn với thiết kế phẳng và kiểu dáng đẹp, là một trong top những framework front-end tốt nhất hiện nay.

Cài đặt

Phần cài đặt các bạn có thể tham khảo tại đây. Trong phần hướng dẫn này mình cài đặt trên mac.

cài đặt các thành phần cần thiết cho Semantic

brew install node
npm install -g gulp

cài đặt Sematic

npm install semantic-ui --save
cd semantic/
gulp build

gulp sẽ compile các css và javascript cần thiết cho project. Từ đây bạn có thể sử dụng css của Sematic bằng cách khai báo như dưới đây.

link href="semantic/dist/semantic.min.css" rel="stylesheet" type="text/css"
script src="semantic/dist/semantic.min.js"

Áp dụng Semantic vào sample project

Sample project

project này sample bao gồm trang login và một vài xử lý cơ bản, chúng ta sẽ dùng Semantic để xử lý phần giao diện cho project này.

Bắt đầu với login page

Login page trong project generate mặc định bởi devise như sau.

# app/views/devise/sessions/new.htmlhtml.erb
<h2>Log in</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>
  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>
  <% if devise_mapping.rememberable? -%>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end -%>
  <div class="actions">
    <%= f.submit "Log in" %>
  </div>
<% end %>
<%= render "devise/shared/links" %>

giao diện:

Chúng ta sẽ thực hiện sử dụng các thuộc tính của sematic-ui để thay đổi lại giao diện của page như sau.

#  app/views/devise/sessions/new.html.slim
.ui.two.column.centered.grid.container
  .column
    h2 Log in
    = form_for(resource, as: resource_name, url: session_path(resource_name), html: {class: "ui form"}) do |f|
      .field
        = f.label :email
        = f.text_field :email
      .field
        = f.label :password
        = f.password_field :password
      - if devise_mapping.rememberable?
        .ui.checkbox
          = f.check_box :remember_me
          = f.label :remember_me
      .actions
        button.ui.button type="submit" Login
      = render "devise/shared/links"

ở ví dụ trên mình đã chuyển từ erb sang slim với cách viết ngắn hơn, các bạn có thể convert qua slim tại đây.Sau khi chuyển qua slim, chúng ta sẽ dùng các class của sematic để định nghĩa lại layout cho page. ở trên mình đã dùng ui.grid, ui.checkbox, ui.button.

các bạn có thể thấy page login có sử dụng sematic được bố trí lại và có thiết kế phẳng .

Tiếp tục với Header

Trong menu mình có 4 link dẫn đến các action khác nhau.

p
- if current_user
 = "welcome    "
 = current_user.email
 = "               "
 = link_to "Articles", articles_path, method: :get
 = "               "
 = link_to "Source", sources_path, method: :get
 = "               "
 = link_to "MyArticles", '/articles/only_like', method: :get
 = "               "
 = link_to "Signout", destroy_user_session_path, method: :delete

sau khi sử dụng semantic-menu

.ui.four.column.left.grid.container
  .ui.secondary.menu
    - if current_user
      p
        Welcome
      a.item.active  href="#{articles_path}"
        | Articles
      a.item  href="#{sources_path}"
        | Source
      a.item  href="/articles/only_like"
        | MyArticles
      .item
        a.ui.item  href="logout"
          | Logout

Một form đơn giản

Form đơn giản của mình khi chưa dùng semaitc như sau.

ul
  - article.errors.full_messages.each do |message|
    li
      = message
= form_for article do |f|
  p
    = f.label :title
    = f.text_field :title
  p
    = f.label :link
    = f.text_field :link
  p
    = f.label :content
    = f.text_area :content
  p
    = f.label :source
    = f.select :source_id, options_from_collection_for_select(sources, :id, :name), prompt: true
  p
    = f.submit "Submit"

sử dụng thẻ form của Sematic-ui ta viết lại đoạn source như sau.

.ui.two.column.centered.grid.container
  - article.errors.full_messages.each do |message|
    .ui.one.left.aligned.row
      = message
.ui.grid
  .four.wide.column
  .eight.wide.column
    = form_for(article, html: {class: "ui form"})  do |f|
      .field
        = f.label :title
        = f.text_field :title
      .field
        = f.label :link
        = f.text_field :link
      .field
        = f.label :content
        = f.text_area :content
      .middle.aligned.selection.list
        h5
          = f.label :source
        = f.select :source_id, options_from_collection_for_select(sources, :id, :name), prompt: true
      .action
        = f.submit "Submit"

kết quả :

Kết luận

Semantic-ui là một framework có giao diện và thiết kế đẹp. Semantic-ui hỗ trợ đa dạng các thẻ như progess, DropDown, Dimer](http://semantic-ui.com/modules/dimmer.html)... mình mới bắt đầu với Semantic được vài ngày và cảm thấy sematic dễ dùng, tiện lợi, chúc các bạn có những giao diện đẹp với framework này.