6DVV &66 'HVLJQ 3DWWHUQ - w3ctech · %DVH UHERW 21 a{ color: #ff0000; } h2{ font-size:...

# 1

# 2

# 3

# 4

# 5

#

PICTURE NAME

6

#

PICTURE NAME

7

# 8

# 9

# 10

# 11

# 12

#

• variables

• path

• gulp grunt

13

config

# 14

Mixin Function helper

tools

# 15

#

•

•

•

•

•

16

•

•

•Media Query

•

•

•

•

•

•

•

•transform

•

•SVG

•

•

#

•reset •print

17

browser

# 18

meyerweb

#

•rebot •type

19

base

# 20

.header a{ color: #ff0000; } .content a{ color: #ff0000; } .list__title--active{ color: #EEE139; } .footer a{ color: #ff0000; }

# 21

a{ color: #ff0000; } h2{ font-size: 18px; line-height: 24px; } ul{ list-style: square outside; }

•reset Base

•

• UI

# 22

•Bootstrap type

•

•

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: $headings-margin-bottom; font-family: $headings-font-family; font-weight: $headings-font-weight; line-height: $headings-line-height; color: $headings-color; }

# 23

elements

components

# 24

# 25

# 26

# 27

# 28

# 29

# 30

#

•

•

•

•Parallax Scrolling

• (ERP )

•

31

95%

5%

# 32

# 33

# 34

# 35

JPG

# 36

PSD …………..

# 37

# 38

~~~

…………..

…………..

…………..

# 39

# 40

#

• Responsive

• ( hover focus

•

41

•

• (error online)

• web UI

# 42

CRY

# 43

# 44

|– layout/ |– _aside.scss # aside |– _grid.scss # Grid system |– _header.scss # Header |– _footer.scss # Footer| |– elements/ |– _button.scss # button |– _forms.scss # form |- _table.scss # table

|– components/ |– _pagination.scss # pagination |– _carousel.scss # Carousel |– _cover.scss # Cover |– _dropdown.scss # Dropdown |– pages/ |– _home.scss # Home specific styles |– _contact.scss # Contact specific

#

li li

.main .aside

.header

.content.clearfix

.logo.menu__link

li

layout

45

.ui-pagination

•list 1 •list 2 •list 3 •list 4

.ui-textListcomponents

lorem loremlorempage

.txt__block - -active

# 46

#

•

•

•

•

47

50%

50%

# 48

#

• components

• page

• Framework Framework

49

#

li li

.col-md-9

.container

.container

.navbar-brand.nav

li

.col-md-3

.navbar-nav

50

.pagination

•list 1 •list 2 •list 3 •list 4

.list-group

lorem loremlorem

.thumbnail.active.col-md-4

# 51

#

•

• UI

•

• ( )

•CRM ERP

• ( )

52

5 *3 *10

#

•F2E Team Leader Art Team Leader

• guideline

•CSS BEM

•

53

l - layout ui - components is - status js - JS plugin h - helper

#

li li

.l-main .l-aside

.l-header

.l-content

.l-logo.l-menu__link

lilayout

54

.ui-pagination

•list 1 •list 2 •list 3 •list 4

.ui-textList

componentslorem loremlorem

page

.p-txt__block - -active

.g-md-9 .g-md-3grid

#

•jQuery plugin

•inbox

55

vendors

# 56

vendors

config

tools

base

browser

elements

components

#

• class .{component}-{xxx}.scss _{component}.scss

• .scss

• Ruby Compass gulp

• Susy 2 Compass grid class

57

# 58