Log Review #1 ( Tutorial HTML CSS jQuery Laravel AngularJS)

Log — Tags: AngularJS, Bootstrap, Chrome, CSS, Diff, jQuery, Laravel, PHP, transition — Posted by Starck on August 27, 2013

Laravel

PHP

Class – PHP Fine Diff

AngularJS

Github – AngularJS Book (Chinese Language)

HTML / CSS

Tutorial – CSS-Tricks : CSS3 transition
Tutorial – CSS Vertical Align Center
Tool – Chrome DevTool : Workspace
- Setting
- Coding on workspace of Chrome Developer tools
Tutorial – Bootstrap 3 Grid Introduction
Theme – Bootstrap Theme from bootstrapmaster.com
Tutorial – An Advanced Guide to HTML & CSS

jQuery / JavaScript

Interface – DropKick : Styling <Select> input
- Tutorial – How to style selects using DropKick
- Github – DropKick

Foundation 4 Grid hack for IE8

Design — Tags: CSS, Foundation, IE — Posted by Starck on June 24, 2013

修改 HTML:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

1

2

3

4

5

<!DOCTYPE html>

<html class="no-js">

CSS:

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
 
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
 
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
 
.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }
 
.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }
 
.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }
 
.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }
 
.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }
 
.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }
 
.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }
 
.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }
 
.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }
 
.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }
 
.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }
 
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
 
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
 
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
 
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
 
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }

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

/* The Grid ---------------------- */

.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }

.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }

.lt-ie9 .row.large-collapse .column,

.lt-ie9 .row.large-collapse .columns { padding: 0; }

.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }

.lt-ie9 .row .row.large-collapse { margin: 0; }

.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }

.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }

.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }

.lt-ie9 .large-1,

.lt-ie9 .row .large-1 { width: 8.33333%; }

.lt-ie9 .large-2,

.lt-ie9 .row .large-2 { width: 16.66667%; }

.lt-ie9 .large-3,

.lt-ie9 .row .large-3 { width: 25%; }

.lt-ie9 .large-4,

.lt-ie9 .row .large-4 { width: 33.33333%; }

.lt-ie9 .large-5,

.lt-ie9 .row .large-5 { width: 41.66667%; }

.lt-ie9 .large-6,

.lt-ie9 .row .large-6 { width: 50%; }

.lt-ie9 .large-7,

.lt-ie9 .row .large-7 { width: 58.33333%; }

.lt-ie9 .large-8,

.lt-ie9 .row .large-8 { width: 66.66667%; }

.lt-ie9 .large-9,

.lt-ie9 .row .large-9 { width: 75%; }

.lt-ie9 .large-10,

.lt-ie9 .row .large-10 { width: 83.33333%; }

.lt-ie9 .large-11,

.lt-ie9 .row .large-11 { width: 91.66667%; }

.lt-ie9 .large-12,

.lt-ie9 .row .large-12 { width: 100%; }

.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }

.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }

.lt-ie9 .row .large-offset-3 { margin-left: 25%; }

.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }

.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }

.lt-ie9 .row .large-offset-6 { margin-left: 50%; }

.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }

.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }

.lt-ie9 .row .large-offset-9 { margin-left: 75%; }

.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }

.lt-ie9 .pull-2 { right: 16.66667%; }

.lt-ie9 .pull-3 { right: 25%; }

.lt-ie9 .pull-4 { right: 33.33333%; }

.lt-ie9 .pull-5 { right: 41.66667%; }

.lt-ie9 .pull-6 { right: 50%; }

.lt-ie9 .pull-7 { right: 58.33333%; }

.lt-ie9 .pull-8 { right: 66.66667%; }

.lt-ie9 .pull-9 { right: 75%; }

.lt-ie9 .pull-10 { right: 83.33333%; }

.lt-ie9 .push-2 { left: 16.66667%; }

.lt-ie9 .push-3 { left: 25%; }

.lt-ie9 .push-4 { left: 33.33333%; }

.lt-ie9 .push-5 { left: 41.66667%; }

.lt-ie9 .push-6 { left: 50%; }

.lt-ie9 .push-7 { left: 58.33333%; }

.lt-ie9 .push-8 { left: 66.66667%; }

.lt-ie9 .push-9 { left: 75%; }

.lt-ie9 .push-10 { left: 83.33333%; }

/* Nicolas Gallagher's micro clearfix */

.lt-ie9 .row { *zoom: 1; }

.lt-ie9 .row:before, .row:after { content: " "; display: table; }

.lt-ie9 .row:after { clear: both; }

Media Query for different Device or Screen

Coding — Tags: CSS, Media Query — Posted by Starck on May 17, 2013

from Media Query Builder

/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* insert styles here */
}

/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
    /* insert styles here */
}

/* (320x480) Smartphone, Landscape */
@media only screen and (device-width: 480px) and (orientation: landscape) {
    /* insert styles here */
}

/* (480x800) Android */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
    /* insert styles here */
}

/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
    /* insert styles here */
}

/* (720x1280) Galaxy Nexus, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}

/* (720x1280) Galaxy Nexus, Landscape */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
    /* insert styles here */
}

/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* insert styles here */
}

/* (768x1024) iPad 1 & 2, Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* insert styles here */
}

/* (1024x768) iPad 1 & 2, Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* insert styles here */
}

/* (2048x1536) iPad 3 */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
    /* insert styles here */
}

/* (1280x720) Galaxy Note 2, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}

/* (1366x768) WXGA Display */
@media  screen and (max-width: 1366px) {
    /* insert styles here */
}

/* (1280x1024) SXGA Display */
@media  screen and (max-width: 1280px) {
    /* insert styles here */
}

/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    /* insert styles here */
}

/* (1680x1050) WSXGA+ Display */
@media  screen and (max-width: 1680px) {
    /* insert styles here */
}

/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    /* insert styles here */
}

/* (1600x900) HD+ Display */
@media  screen and (max-width: 1600px) {
    /* insert styles here */
}

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

/* (320x480) iPhone (Original, 3G, 3GS) */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

/* insert styles here */

}

/* (320x480) Smartphone, Portrait */

@media only screen and (device-width: 320px) and (orientation: portrait) {

/* insert styles here */

}

/* (320x480) Smartphone, Landscape */

@media only screen and (device-width: 480px) and (orientation: landscape) {

/* insert styles here */

}

/* (480x800) Android */

@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {

/* insert styles here */

}

/* (640x960) iPhone 4 & 4S */

@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {

/* insert styles here */

}

/* (720x1280) Galaxy Nexus, WXGA */

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {

/* insert styles here */

}

/* (720x1280) Galaxy Nexus, Landscape */

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {

/* insert styles here */

}

/* (1024x768) iPad 1 & 2, XGA */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

/* insert styles here */

}

/* (768x1024) iPad 1 & 2, Portrait */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

/* insert styles here */

}

/* (1024x768) iPad 1 & 2, Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

/* insert styles here */

}

/* (2048x1536) iPad 3 */

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {

/* insert styles here */

}

/* (1280x720) Galaxy Note 2, WXGA */

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {

/* insert styles here */

}

/* (1366x768) WXGA Display */

@media screen and (max-width: 1366px) {

/* insert styles here */

}

/* (1280x1024) SXGA Display */

@media screen and (max-width: 1280px) {

/* insert styles here */

}

/* (1440x900) WXGA+ Display */

@media screen and (max-width: 1440px) {

/* insert styles here */

}

/* (1680x1050) WSXGA+ Display */

@media screen and (max-width: 1680px) {

/* insert styles here */

}

/* (1920x1080) Full HD Display */

@media screen and (max-width: 1920px) {

/* insert styles here */

}

/* (1600x900) HD+ Display */

@media screen and (max-width: 1600px) {

/* insert styles here */

}

Using CodeKit with Foundation and Bootstrap

Coding — Tags: Bootstrap, CodeKit, CSS, Foundation, Framework — Posted by Starck on March 28, 2013

需要軟體與 Framework

CodeKit

CodeKit Interface

Continue reading “Using CodeKit with Foundation and Bootstrap” »

Flat UI – Web Interface Kit

Design — Tags: CSS, Framework, Interface, UI — Posted by Starck on March 28, 2013

除了 Twitter Bootstrap 和 Zurb Foundation 之外, 我們現在又多了一種選擇 – Flat UI.

2013/04/08 update: 這是基於 Bootstrap 改了 CSS Style 的 theme.

–

Demo
Download from Github
Design by Designmodo

–

Preview

Flat UI