Metro UI CSS 2.0 BootStrap Guide


Base CSS

General CSS


Global Styles


Colors

  • *-black
  • *-white
  • *-lime
  • *-green
  • *-emerald
  • *-teal
  • *-cyan
  • *-cobalt
  • *-indigo
  • *-violet
  • *-pink
  • *-magenta
  • *-crimson
  • *-red
  • *-orange
  • *-amber
  • *-yellow
  • *-brown
  • *-olive
  • *-steel
  • *-mauve
  • *-taupe
  • *-gray
  • *-dark
  • *-darker
  • *-transparent
  • *-darkBrown
  • *-darkCrimson
  • *-darkMagenta
  • *-darkIndigo
  • *-darkCyan
  • *-darkCobalt
  • *-darkTeal
  • *-darkEmerald
  • *-darkGreen
  • *-darkOrange
  • *-darkRed
  • *-darkPink
  • *-darkViolet
  • *-darkBlue
  • *-lightBlue
  • *-lightTeal
  • *-lightOlive
  • *-lightOrange
  • *-lightPink
  • *-lightRed
  • *-lightGreen

위 전역 색상 설정 클래스들을 사용하기에 규칙은 다음과 같습니다.


대상-컬러

대상-액션-컬러


대상

fg : 요소의 폰트 및 아이콘

bg : 요소의 배경

액션

hover : 마우스 오버시

active : 링크나 버튼에 대하여 실행 이벤트가 발생했을때

focus : 요소에 포커스가 발생했을때


해서 결과적으로는 녹색의 제목을 설정한다면 다음과 같다.

이 글은 제목 입니다.




Metro UI CSS 2.0 BootStrap Guide

본문 : http://metroui.org.ua/


※ 가끔씩 여기 웹사이트가 에러날때는 식겁합니다. 열심히 보고 하는데, 찾을 수 없다고 할때가 가끔 있더군요.

해서 파일 다운로드는 및 가이드를 볼 수가 없게되면;; 어휴;;

이 부트스트랩 기반으로 개발된 웹서비스가.. 상상도 하기 싫군요.


해서 번역은 아니고 그냥 제가 가이드를 보면서 이해한 정도의 수준으로만 가이드 형식의 포스팅을 합니다.

캡쳐의 대장정이 될듯하네요. ㄷㄷㄷ;;



Base CSS

Requirements


Folder Structure - 폴더 구조


일단 기본적으로 빨간 밑줄 가있는 파일들은 모두 필요하다고 생각하시면 될 것 같습니다.


DOCTYPE - 문서형식

HTML 문서형식은 HTML5 의 문서 타입의 사용을 필요로 합니다.


<!DOCTYPE html>

<html>


Javascript - 자바스크립트

jQuery 2.0 플러그인과 jQuery UI 플러그인을 받아 적용시킵니다.


Namespace - 네임스페이스

BODY 요소에 metro 클래스를 추가해 주면 끝.

body class="metro"


윈도우8 스타일의 웹사이트를 구현하려던 도중 메트로UI 도 부트스트랩이 있더라구요.

이미 많은 분들이 알고 사용하고 계시겠지만 꾸역꾸역 포스팅합니다. 

이미지를 클릭하시면 링크로 이동합니다.



상단의 네비게이션을 보면 다음과 같습니다.

  • Base CSS
    Requirements : 부트스트랩을 설치하고 웹페이지에 적용시키는 과정설명
    General CSS : Global 로 사용하는 스타일, 그리드 구성, 타이포그라피, 테이블, 폼, 버튼, 이미지
    Responsive : 부트스트랩은 반응형을 지원한다. 화면크기(스크린 사이즈)에 반응하는 크기등
    Icons : 개인적으로 이 부투스트랩을 사용하며, 제일 편하고 고마움을 느끼고 있는 이 아이콘들.
    빠른 속도로 UI 를 구성하기에 너무 편리하게 되어있습니다.
  • Components - 컴포넌트형식으로 모듈단으로 구성되어 있습니다. 여기 첫번째 메뉴에 나오는 타일.
    메트로의 꽃이라 할수 있는 타일과 다양한 컴포넌트들이 설명되있다.
  • Examples : 각각의 컴포넌트들을 구동시켜 예제로 표시되어있다. 근데;; 코드설명이 없어 자꾸 여기서
    요소검사기를 켜야해서 좀 짜증나기는 한다.
흠.. 더이상 설명은 힘드네. 다음 포스팅 부터는 차례대로 적용하는 과정을 포스팅하겠습니다.


  1. softsky 2014.03.18 14:26 신고

    잘 사용하겠습니다. 감사합니다~




메트로 디자인 언어는 여러 그룹의 공통 작업들을 통합하여 이용 속도를 빠르게 하기 위해 설계되었다. 과도한 그래픽을 제외하는 대신 실제 콘텐츠를 UI에 의지하게 함으로써 수행한다. 내부적으로 마이크로소프트는 메트로 디자인 언어의 핵심이 되는 원칙들을 나열해 놓았다.[5] 애니메이션은 누르기와 같은 사용자 반응, 그리고 전환 효과와 더불어 부분을 차지한다. 사용자에게 UI가 살아있고 반응적이라는 인상을 주려는 것이 목적이다.

위키참조 : 링크


관련링크

관련링크 생길때마다 추가할거임.^^

+ Recent posts