Membuat Situs "About Me" Satu Halaman dengan Prepros, Jade & Stylus

Hari ini, kita akan belajar cara membuat satu halaman "About Me" statis menggunakan aplikasi Prepros gratis dari Alpha Pixels.

Prepros adalah tool antarmuka yang menangani preprocessing, dan tugas front-end lainnya. Kekuatan terbesar Prepros adalah kemudahan luar biasa yang memungkinkan Anda menggunakan berbagai macam preprocessors, baik itu untuk CSS, HTML atau JavaScript. Jadi saat kami menyusun situs statis kami, kami akan bermain dengan tiga preprocessor untuk bahasa ini; Stylus, Jade dan (sedikit) CoffeeScript masing-masing.

Dengan Prepros ada tidak perlu untuk menginstal Node.js, Ruby atau modul apapun dan gems, dan Anda tidak pernah menyentuh baris perintah. Hanya menginstal dan menjalankan Prepros, menambahkan proyek Anda dan akan menangani semua Anda mengkompilasi, menggabungkan, dan minifying untuk Anda.

Sebagai bagian dari pembuatan situs kami, kami juga akan menyertakan beberapa efek gulir halus untuk membawa pengunjung dari satu bagian situs ke bagian berikutnya, ditambah beberapa efek animasi berbasis CSS untuk pukulan tambahan. Lihat demo langsung untuk melihat apa yang akan Anda buat.

1. Memulai  Setup

Kita akan mulai dengan mendapatkan Anda setup dengan folder proyek yang diselenggarakan untuk terbaik untuk bekerja dengan Prepros.

Saya selalu menemukan lebih mudah untuk menjaga file sumber preprocessor Anda bekerja pada terpisah dari file situs sebenarnya mereka akan mengkompilasi ke dalam. Dengan memiliki semua file output folder sendiri sangat mudah untuk mengambil seluruh hal dan meng-upload ke situs hidup Anda ketika Anda sudah selesai.

Siapkan Struktur Proyek Anda

Buat folder proyek dengan nama apa pun yang Anda suka, misalnya static_site_project.

Di dalam folder proyek Anda membuat subfolder dua; site dan source.

Dalam source folder buat sebuah file bernama index.jade dan subfolder empat tambahan; content, scripts, stylus dan templates.

Dalam folder scripts Buat file bernama site.js dan subfolder lain, bernama js.

Dalam folder stylus buat sebuah file bernama style.styl

Setelah selesai, struktur proyek Anda akan terlihat seperti ini:

Menginstal & Mengkonfigurasi Prepros

Out of the box Prepros akan secara otomatis menonton dan mengkompilasi semua file Anda untuk Anda. Yang perlu kita lakukan adalah mengatakan itu di mana untuk menempatkan file kami dikompilasi, serta folder yang kita benar-benar ingin mengabaikan.

Download dan instal Prepros. Menjalankan Prepros, kemudian menyeret static_site_project folder ke antarmuka untuk menambahkannya sebagai sebuah proyek baru.

Klik ikon perkakas yang kecil, satu detik dari sebelah kiri di sudut kanan bawah dari antarmuka Prepros, pergi ke pengaturan proyek.

Klik CSS Options, kemudian ubah Output Path Type ke "Relative to Source File Directory" dan masukkan ../../site/css/ di field CSS Path.

Klik HTML Options, kemudian ubah Output Path Type ke "Relative to Source File Directory" dan masukkan ../site/ di field Html jalan Html Path.

Selanjutnya, klik JS Options dan masukkan ../../site/js/ di field Concatenated & JMinified S Path.

Kemudian klik Project Filters dan masukkan content,templates  di field Comma Separated Filters To Exclude.

Saatnya untuk memeriksa kami setup dan mencoba kompilasi. Klik nama proyek Anda di sidebar kiri Prepros. Semuanya sekarang harus terlihat seperti ini:

Jika ya, Anda siap menjalankan kompilasi proyek pertama Anda, yang akan menambahkan file ke dalam folder site Anda yang kosong. Klik ikon More Options, tombol paling kanan di kanan bawah Prepros, lalu pilih Compile All Files.

Lihatlah folder site Anda. Anda sekarang harus melihat file dan folder berikut di dalam:

Sekarang kita sudah siap untuk memulai coding!

2. Jade di Nutshell

Alih-alih mengkode HTML mentah kita akan bekerja dengan Jade. Saya suka menganggap Jade sebagai 'singkatan' untuk HTML. Hal ini memungkinkan Anda menulis jauh lebih sedikit kode dan menggunakan hal-hal seperti variabel dan mixins untuk menambahkan logika, yang semua datang bersama-sama untuk membuat proses yang sangat efisien.

Jika Anda melihat referensi bahasa untuk Jade Anda mungkin pada awalnya merasa seperti itu sedikit rumit, namun ada beberapa prinsip kunci yang cukup sederhana yang fungsi utama intinya:

Elemen HTML

Tempatkan elemen HTML apa pun dengan hanya menghapus tanda < and >, tidak perlu tag penutup. Misalnya.

1

<body></body>

2

...use instead:

3

body

4

5

<h1></h1>

6

...use instead:

7

h1

8

9

<p></p>

10

...use instead:

11

p

Bersarang

Alih-alih mencoba untuk melacak membuka dan menutup tag HTML, hanya tab indent dimanapun Anda perlu sesuatu untuk diulang. Misalnya

1

<main><p>...</p></main>

2

3

...use instead:

4

5

main

6

    p

Beberapa baris yang diindentasi dengan jumlah tab yang sama akan dibungkus oleh elemen induk yang sama.

Teks Biasa dalam Elemen

Teks biasa dapat ditempatkan di dalam elemen dengan mengetikkannya pada baris yang sama, setelah spasi misalnya

1

<h1>Heading Text</h1>

2

3

...use instead:

4

5

h1 Heading Text

Atau, Anda dapat menempatkan teks pada barisnya sendiri dan menempatkan simbol pipa di depannya, misalnya

1

h1

2

    | This is a heading but I'd like to have

3

    br

4

    | a line break in it

Class dan ID CSS

Dalam kebanyakan kasus, class dan id CSS dapat ditambahkan langsung ke elemen HTML misalnya

1

<h1 id="idname" class="classname otherclass">Heading Text</h1>

2

3

...use instead:

4

5

h1#idname.classname.otherclass Heading Text

Jika Anda hanya menempatkan div, Anda bahkan tidak perlu menentukan elemen. Div adalah elemen Jade default, jadi jika Anda menempatkan ID / class itu sendiri maka akan secara otomatis diterapkan ke div misalnya

1

<div class="thisclass">...</div>

2

3

...use instead:

4

5

.thisclass

Atribut

Dimanapun tag kebutuhan atribut, hanya menempatkan mereka antara tanda kurung dengan pemisahan koma, misalnya:

1

<a href="webdesign.tutsplus.com" target="_blank">Link Text</a>

2

3

...use instead:

4

5

a( href="webdesign.tutsplus.com", target="_blank" ) Link Text

Ada banyak fitur canggih lainnya yang kami akan bekerja dengan kemudian seperti variabel, mixins dan logika, tapi apa yang Anda lihat di atas mencakup inti nyata menggunakan Jade.

Catatan: Ini adalah ide yang baik untuk mendapatkan sintaks Jade stabilo untuk editor kode pilihan Anda sebelum pergi ke depan. Saya menggunakan Jade for Sublime Text (bekerja dengan versi 2 dan 3).

3. Buat Template Wrapper Anda

Salah satu hal paling keren yang dapat Anda lakukan dengan Jade adalah membuat template yang extendable dan reusable yang memiliki placeholder block dimana konten dapat ditempatkan. Cara termudah untuk menjelaskan apa artinya ini adalah dengan contoh sederhana.

Katakanlah Anda membuat template dasar ini, bernama base.jade:

1

//- base.jade

2

header.pagetitle

3

    h1

4

        block pagetitle

5

6

main.pagecontent

7

    block pagecontent

Dua block baris adalah placeholders untuk konten akan diberikan dari tempat lain.

Anda kemudian dapat membuat template lain bernama page.jade yang extends template base.jade, dan menyediakan konten di dalamnya untuk disisipkan di mana placeholder block berada, hanya dengan mencocokkan nama blokir:

1

//- page.jade

2

extends base

3

4

block pagetitle

5

    | Welcome to the Page

6

7

block pagecontent

8

  p Have a nice day!

Konten setelah block pagetitle di template page.jade akan muncul di tempat yang cocok dengan tempat penampung block pagetitle yang cocok dalam template base.jade.

Demikian juga, konten setelah block pagecontent di page.jade akan muncul mana block pagecontent adalah di base.jade.

Oleh karena itu, page.jade akan mengkompilasi ke dalam:

1

<header class="pagetitle">

2

<h1>Welcome to the Page</h1>

3

</header>

4

<main class="pagecontent">

5

<p>Have a nice day!</p>

6

</main>

Dengan menggunakan teknik ini, Anda dapat menggunakan kembali templat Anda berulang kali, menyediakan konten yang berbeda untuk dimasukkan ke blok placeholder setiap kali, yang sangat berguna baik untuk menjaga kode Anda tetap teratur dan untuk membuat situs multi-halaman.

Kita akan menggunakan pendekatan ini untuk membuat template yang akan berisi HTML dasar penting untuk situs dan pembungkus untuk pergi sekitar isi situs kami.

Membuat wrapper.jade

Dalam folder proyek Anda source > templates buat file bernama wrapper.jade lalu tambahkan kode ini ke dalamnya:

1

doctype html

2

html( lang="en" )

3

    head

4

		title

5

			block title

6

		meta( charset='utf-8' )

7

		meta( http-equiv='X-UA-Compatible', content='IE=edge' )

8

		meta( name='viewport', content='width=device-width, initial-scale=1.0' )

9

		link( href='css/style.css', rel='stylesheet', type='text/css' )

10

		link( href='//fonts.googleapis.com/css?family=Bangers|Indie+Flower', rel='stylesheet', type='text/css' )

11

		script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' )

12

		script( src='js/site.min.js' )

13

	body

14

		block content

Ketika dikompilasi kode ini akan berubah menjadi tag doctype, html, head, title, meta, link, script dan body kami. Kami memuat file style.css dan site.min.js yang kami buat sebelumnya serta beberapa Google Font yang akan kami gunakan.

Catatan dua block placeholders, block title dan block content. Ketika kita extend template ini segera kami akan menyediakan konten yang harus ditempatkan di sana, menghasilkan judul halaman dan isinya.

Ketika Anda menyimpan file ini tidak akan secara otomatis dikompilasi seperti yang telah kami sampaikan kepada Prepros untuk mengabaikan file apa pun dalam folder template. Ini karena kami tidak ingin file 'wrapper.html' kosong di situs kami yang tidak memiliki judul atau konten halaman. Sebagai gantinya, ini semua akan dikompilasi setelah kami extend template di langkah berikutnya.

4. Extend Wrapper Anda

Anda akan ingat kita membuat sebuah file dalam folder source Anda bernama index.jade. Prepros adalah dikonfigurasi untuk autocompile file ini ke site > index.html setiap saat yang Anda simpan.

Tambahkan kode berikut ke index.jade:

1

extends templates/wrapper

2

3

block title

4

    | Static Site With Prepros

5

6

block content

7

	#section01.pane

8

		.wrapper

9

			h3 Welcome

10

			p Content goes here

Simpan file Anda dan Anda akan melihat ini muncul di sudut kanan bawah layar Anda:

Pergi ke Prepros, klik More Options lainnya kemudian pilih Copy Live Preview Url:

Tempelkan URL itu ke browser Anda dan tambahkan /situs/ ke ujung untuk memuat situs Anda yang dikompilasi. Anda harus melihat:

Catatan: Kami akan membuat single page dalam tutorial ini, namun Anda dapat mengulangi proses di atas sebanyak yang Anda suka untuk situs multi-page. Misalnya, jika Anda membuat file bernama about.jade dengan cara yang sama, maka akan secara otomatis dideteksi oleh Prepros yang akan menghasilkan file situs about.html untuk Anda.untuk Anda.

5. Mengatur Dasar-Dasar Stylus Anda

Sebelum kita melangkah lebih jauh dengan coding konten situs Anda kami ingin mendapatkan sedikit styling dasar di tempat. Kami preprocessor pilihan untuk tutorial ini adalah Stylus. Anda dapat membaca semua tentang cara kerjanya dalam artikel saya pada Mengapa Stylus adalah favorit saya.

Stylus memiliki sintaks yang sangat mirip untuk Jade yang menggunakan tab indentasi untuk menentukan bersarang, tidak memerlukan semi-kolon baris Terminator dll. Dapat mengikuti beberapa aturan sintaks yang sama ketika bekerja dengan dua bahasa pada saat yang sama waktu membantu untuk menjaga hal-hal yang berjalan dengan lancar.

Nib dan Normalize.css

Hal pertama yang akan kita lakukan adalah membawa library mixin Nib yang mengagumkan, ditambah beberapa kode Normalize.css yang diformat dalam sintaks Stylus sehingga kita dapat memprosesnya ke stylesheet kami.

Pergi ke Prepros, klik pada file style.styl dalam antarmuka dan Anda akan melihat pilihan sidebar membuka di sebelah kanan. Di daerah pilihan centang kotak Use Nib:

Selanjutnya, ambil file ini Stylus Normalize dari Cory Simmons dan menyimpannya ke folder source > stylus. Namun ketika Anda melakukannya, simpan sebagai _normalize.styl. Underscore akan mencegah Prepros secara otomatis mengopile file.

Sekarang buka file style.styl yang Anda buat sebelumnya dan tambahkan kode ini:

1

// *************

2

// IMPORTS

3

// *************

4

5

@import nib

6

@import _normalize

File Anda akan secara otomatis dikompilasi dan ketika Anda kembali ke situs Anda jika semuanya sudah diimpor dengan benar Anda akan melihat font default telah berubah:

Tambahkan Detail

Kami sekarang memiliki semua dasar kami jadi kami siap untuk menambahkan beberapa custom style.

Kita akan menambahkan variabel untuk menentukan layout, tipografi dan pengaturan warna untuk situs kami, dan kami akan menyiapkan beberapa mixin dan style untuk menerapkannya ke dalam desain kami.

Saya akan membagikan beberapa kode Stylus super magic saya untuk dominasi universal yang saya gunakan dalam proyek pribadi saya.

Lanjutkan dan tambahkan kode berikut ke file style.styl Anda, di bawah garis impor sudah Anda tambahkan:

1

// *************

2

// VARIABLES

3

// *************

4

5

$base_font_size = 16

6

//standard default browser size is 16px, so this brings base font size to 18px while keeping things flexible for user

7

$base_font_size_ems = unit($base_font_size / 16, em)

8

9

$px = unit(1 / $base_font_size, rem)

10

11

$type_regular_font_family = 'Indie Flower'

12

$type_h_font_family = 'Bangers'

13

14

$type_h_font_sizes = {

15

    'h1': 3,

16

	'h2': 2.35,

17

	'h3': 1.95,

18

	'h4': 1.65,

19

	'h5': 1.313,

20

	'h6': 1.125

21

}

22

23

$type_h_font_vmargins = {

24

	'h1': 1,

25

	'h2': 1,

26

	'h3': 1.313,

27

	'h4': 1.313,

28

	'h5': 1.313,

29

	'h6': 1.313

30

}

31

32

$type_h_font_lineheight = 1.313em

33

34

$type_wrapper_font_size = 18 * $px

35

36

$layout_site_width = 1200

37

38

$color_site_bg = lighten( black, 10% )

39

$color_wrapper_bg = white

40

41

$color_text_default = black

42

$color_link_default = #c00

43

$color_link_hover = saturate($color_link_default, 70%)

44

45

$color_highlight = #ffc600

46

$color_shadow = black

47

48

49

// *************

50

// MIXINS

51

// *************

52

53

h_tags($factor=1)

54

	h1, h2, h3, h4, h5, h6

55

			font-family $type_h_font_family

56

			line-height $type_h_font_lineheight

57

			font-weight 400

58

	for h_lvl, value in $type_h_font_sizes

59

		{h_lvl}

60

			((value * $factor) < 1) ? $size = 1 : $size = value * $factor

61

			font-size unit( $size, em )

62

			margin unit( $type_h_font_vmargins[h_lvl], em ) 0

63

64

raised()

65

	box-shadow 1 * $px 1 * $px 3 * $px rgba(0,0,0,.5)

66

67

68

// *************

69

// STYLES

70

// *************

71

72

73

// ELEMENTS

74

// -------------

75

76

*

77

	box-sizing border-box

78

79

html, body

80

	height 100%

81

82

html

83

	font-size $base_font_size_ems

84

	font-family $type_regular_font_family

85

	background-color $color_site_bg

86

	color $color_text_default

87

	overflow-x hidden

88

89

img

90

	max-width 100%

91

	height auto

92

93

a, a:link, a:visited

94

	text-decoration none

95

	color $color_link_default

96

97

a:hover, a:active

98

	text-decoration none

99

	color $color_link_hover

100

101

//H tag font family, size, line-height, margin

102

h_tags()

103

104

105

// CLASSES

106

// -------------

107

108

.pane

109

	display table

110

	width 100%

111

	height 100%

112

	position relative

113

	padding 20 * $px

114

115

.wrapper

116

	display table-cell

117

	vertical-align middle

118

	margin 0 auto

119

	padding 80 * $px 0

120

	background-color $color_wrapper_bg

121

	font-size $type_wrapper_font_size

122

	text-align center

123

	border 10 * $px solid $color_shadow

124

	box-shadow 4 * $px 4 * $px 5 * $px rgba(0,0,0,.5)

Bagian Variabel

Di bagian variabel Anda akan melihat variabel $base_font_size dan $base_font_size_ems. Kedua variabel ini mengatur ukuran font dasar untuk situs kami dan kemudian mengonversinya menjadi nomor berbasis em yang dapat kami gunakan untuk menjaga agar desain kami dapat skalabel dan fleksibel. Variabel $px memberi kita rem berbasis sama dengan satu pixel yang dapat kita gunakan sebagai pengganti unit px, misalnya daripada 20px menggunakan 20 * $px.

Variabel diawali $type_ atur seperti berikut ini, dalam rangka:

• Regular font family
• Heading font family
• Heading 1 sampai 6 font sizes - didefinisikan sebagai hash
• Heading 1 sampai 6  font vertical margins - didefinisikan sebagai hash
• Heading line height
• Font size untuk teks di dalam class .wrapper

Variabel $layout_site_width menetapkan lebar maksimum yang kita inginkan untuk diregangkan oleh konten kita, dan variabel awalan $color_ mengatur berbagai warna yang akan kita gunakan di seluruh desain.

Bagian Mixins

Di bagian mixins Anda akan melihat kode pembuatan tag heading keren yang berguna. Ini memproses angka dari variabel yang diawali $type_h_ menjadi kode H tag yang indah dan fleksibel.

Ini juga menerima argumen $factor yang merupakan pengali multiplier terhadap semua ukuran font heading. Ini memberi Anda kemampuan untuk menskalakan semua teks heading Anda saat diperlukan, seperti dalam kueri media, hanya dengan melewatkan pengganda. Misalnya, memanggil h_tags(0,5) akan membuat semua judul Anda setengah ukuran dari apa yang telah didefinisikan dalam variabel $type_h_ Anda.

Mixin raised() adalah style bayangan yang akan kami gunakan pada beberapa elemen nanti di tutorial.

Bagian Style

Bagian gaya dibagi menjadi dua kategori; 'elements', untuk elemen HTML default, dan 'classes', yang berisi pemilih yang ditentukan khusus.

Bagian elemen berisi kode penjelasan yang cukup jelas yang menetapkan beberapa perilaku default, color, style dan typography. Bagian kelas menggunakan kelas .pane dan .wrapper untuk membuat kotak putih besar, berbatasan hitam dengan bayangan yang dikelilingi oleh jarak yang ditunjukkan melalui latar belakang situs abu-abu gelap. Melalui penggunaan garis display table, display table-cell dan vertical-align middle, semua konten dalam kotak putih ini disejajarkan secara vertikal.

Situs Anda sekarang harus terlihat seperti ini:

6. Tambahkan Beberapa Konten

Sekarang kita memiliki style dasar mari tambahkan beberapa konten untuk digunakan. Di sinilah folder content yang Anda buat sebelumnya ikut bermain.

Dalam folder sumber > konten Anda buat sebuah file bernama hello.jade. Tambahkan kode untuk itu:

1

h1 Hello

2

h3 I'm Your Name

3

h4 This is What I Do

Ganti placeholder di baris kedua dan ketiga dengan sesuatu yang mewakili Anda dan apa yang Anda lakukan.

Sebelumnya kami mengatakan kepada Prepros untuk mengabaikan file di folder content, sehingga untuk mendapatkan konten ini di situs kami, kami akan menggunakan fungsi include di Jade.

Kembali ke file index.jade dan update berikut:

1

extends templates/wrapper

2

3

block title

4

    | Static Site With Prepros

5

6

block content

7

	#section01.pane.hello

8

		.wrapper

9

			include content/hello

Apa yang telah kami lakukan adalah mengganti konten inline dengan baris include content/hello yang akan menarik konten dari file yang baru kita buat.

Kita akan membuat beberapa panel putih seperti yang sudah kita miliki. Oleh karena itu kami juga telah menambahkan class yang cocok .hello ke div parent sehingga kami memiliki sesuatu melalui yang kami tambahkan style yang unik.

Simpan file index.jade Anda dan Anda akan melihat konten baru Anda di tempat:

Ini adalah konten yang akan menyambut orang-orang ke situs tersebut sehingga kami ingin memiliki dampak yang sedikit lebih besar. Tambahkan kode baru ini ke file style.styl Anda:

1

.hello

2

    .wrapper

3

		font-size 42 * $px

4

		h1

5

			color $color_highlight

6

			font-size 5.2em

7

			line-height 0.7em

8

			margin-bottom 0.7em

9

			font-family 'Bangers'

10

			background-color $color_shadow

11

			text-shadow 12 * $px 12 * $px 0 $color_shadow, -3 * $px -3 * $px 0 $color_shadow, 3 * $px -3 * $px 0 $color_shadow, -3 * $px 3 * $px 0 $color_shadow, 3 * $px 3 * $px 0 $color_shadow

12

		h3, h4

13

			font-family 'Indie Flower'

14

			margin 1em 0

Dengan kode ini kami menargetkan kelas .hello yang kami tambahkan sebelumnya dan menggunakannya untuk meningkatkan ukuran font dasar dari panel ini, yang pada gilirannya akan meningkatkan tag heading di dalamnya karena mereka berbasis em.

Namun kami ingin baris pertama dari membaca teks 'Hello' menjadi lebih besar sehingga meningkat dari standar 3em hingga 5.2em. Ini juga berwarna kuning cerah, diberi garis hitam dan bayangan, kemudian ditempatkan di atas strip hitam besar.

Akhirnya, kami mengubah font yang diterapkan pada baris kedua dan ketiga ke "Indie bunga" dan mengurangi ukuran margin mereka supaya mereka bisa cocok pada halaman lebih pas.

Inilah hasilnya:

7. Tambahkan Ekstra White Panes

Sekarang mari kita lanjutkan dan tambahkan beberapa ekstra white panes dan file konten untuk mereka.

Dalam folder source > content Anda buat file-file ini: skills.jade, systems.jade, types.jade, tools.jade, contact.jade. Masing-masing file ini akan menyimpan konten untuk white pane di situs Anda. Setiap white pane akan meregang agar sesuai dengan keseluruhan viewport dan akan ada tautan 'Next' & 'Prev' untuk menavigasi di antara mereka.

Buka file skills.jade Anda dan tambahkan kode ini:

1

h1

2

    | My Skills Are...

3

ul

4

	//- Start square

5

	li

6

		h3 Skill One

7

		ul

8

			li +

9

			li Extra Info

10

			li More info

11

	//- End square

12

	//- Start square

13

	li

14

		h3 Skill Two

15

		ul

16

			li +

17

			li Extra Info

18

			li More info

19

	//- End square

Menggantikan "keterampilan satu" / "Keterampilan dua" dan "Tambahan info" / "More info" pengganti dengan info pada kemampuan Anda sendiri.

Setiap item daftar ini akan diubah menjadi ubin persegi kecil, jadi salin dan tempel kode antara //-Start square dan //-End square untuk membuat kotak untuk setiap keterampilan Anda. Kotak akan berada dalam baris empat jadi cobalah untuk mendapatkan kelipatan empat jika Anda bisa membuatnya terlihat rapi.

Perbarui index.jade Anda menjadi ini:

1

extends templates/wrapper

2

3

block title

4

    | Static Site With Prepros

5

6

block content

7

	#section01.pane.hello

8

		.wrapper

9

			include content/hello

10

			a( class="next", href="#section02" ) NEXT

11

	#section02.pane.skills

12

		.wrapper

13

			a( class="prev", href="#section01" ) PREV

14

			include content/skills

15

			a( class="next", href="#section03") NEXT

16

	#section03.pane.systems

17

		.wrapper

18

			a( class="prev", href="#section02" ) PREV

19

			include content/systems

20

			a( class="next", href="#section04" ) NEXT

21

	#section04.pane.types

22

		.wrapper

23

			a( class="prev", href="#section03" ) PREV

24

			include content/types

25

			a( class="next", href="#section05" ) NEXT

26

	#section05.pane.tools

27

		.wrapper

28

			a( class="prev",href="#section04" ) PREV

29

			include content/tools

30

			a( class="next", href="#section06" ) NEXT

31

	#section06.pane.contact

32

		.wrapper

33

			a( class="prev",href="#section05" ) PREV

34

			include content/contact

Dalam kode di atas, kami telah membuat panel baru yang berisi pemanggilan include untuk setiap file konten baru kami. Masing-masing memiliki ID unik seperti #section04 yang dapat kita gunakan untuk menargetkan tautan 'Next' dan / atau 'Prev' antara satu bagian dan bagian berikutnya.

Refresh situs Anda dan sekarang Anda akan melihat link 'Next' yang berfungsi di panel putih pertama Anda.

Klik link itu dan Anda akan diarahkan ke panel 'Skills' yang baru Anda buat, yang terlihat seperti ini:

8. Persegi dan Pane Heading

Panel 'skills' Anda saat ini terlihat agak lucu karena kami hanya memiliki style bawaan yang diterapkan pada unordered list kami. Mari masukkan beberapa style untuk membuat tiles persegi kecil kami dan mengubah judul panel utama.

Dalam style.styl file ganti seluruh kelas .wrapper Anda dengan ini:

1

.wrapper

2

    display table-cell

3

	vertical-align middle

4

	margin 0 auto

5

	padding 80 * $px 0

6

	background-color $color_wrapper_bg

7

	font-size $type_wrapper_font_size

8

	text-align center

9

	border 10 * $px solid $color_shadow

10

	box-shadow 4 * $px 4 * $px 5 * $px rgba(0,0,0,.5)

11

	h1

12

		margin-top 0

13

		font-family $type_regular_font_family

14

	> ul

15

		$skew = 1.5deg

16

		max-width $layout_site_width * $px

17

		list-style-type none

18

		margin 0 auto

19

		padding 0

20

		> li

21

			$spacing = 0.25%

22

			raised()

23

			border 8 * $px solid black

24

			background-color $color_link_default

25

			float left

26

			width 24.5%

27

			margin 0 $spacing

28

			height 230 * $px

29

			padding 40 * $px 30 * $px

30

			transform: skewY($skew * -1);

31

			&:nth-child(8n+1), &:nth-child(8n+3), &:nth-child(8n+6), &:nth-child(8n+8)

32

				background $color_highlight

33

			&:nth-child(4n+5)

34

				clear left

35

			&:nth-child(4n+1)

36

				margin-top 3 * $spacing

37

			&:nth-child(4n+2)

38

				margin-top 2 * $spacing

39

			&:nth-child(4n+3)

40

				margin-top 1 * $spacing

41

		li

42

			h3

43

				margin 0

44

				transform: skewY($skew);

45

			ul

46

				list-style-type none

47

				margin 0

48

				padding 0

49

				li

50

					transform: skewY($skew);

Kode ini mengubah font yang diterapkan pada judul utama dan menghapus margin atasnya. Ini menghilangkan lingkaran peluru dari daftar tak beraturan dan mengatur margin dan padding ke nol.

Daftar item yang memegang masing-masing kotak kecil kami diberi lebar masing-masing 24,5% dan melayang ke kiri, yang memberi kami empat item per baris. Mereka juga diatur ke ketinggian 230 piksel masing-masing (dikonversi ke nilai-nilai rem) dengan menambahkan padding dan margin.

Munculnya kotak diatur dengan memberi mereka masing-masing border hitam tebal dan menerapkan raised() bayangan mixin kami menambahkan sebelumnya. Masing-masing dapat dipengaruhi oleh-1.5 derajat yang akan membuat diagonal atas dan tepi bawah. Item h3 dan li miring sebesar 1,5 derajat; memiringkan mereka dengan jumlah yang sama ke arah yang berlawanan akan membuat mereka meluruskan lagi daripada juga tampak miring secara diagonal.

default background color setiap persegi kecil diatur melalui variabel $color_link_default, tapi kami menggunakan kode berikut untuk menerapkan warna $color_highlight dengan cara yang akan menciptakan pola kotak-kotak:

1

&:nth-child(8n+1), &:nth-child(8n+3), &:nth-child(8n+6), &:nth-child(8n+8)

Baris ini mengidentifikasi setiap baris kedelapan dimulai dengan yang pertama, (8n+1), lalu setiap seperempat persegi dimulai dengan yang ketiga, (8n+3), setiap baris kedelapan dimulai dengan keenam, (8n+6), dan setiap persegi kedelapan dimulai dengan yang kedelapan, (8n+8).

Jika Anda menggambar kotak dan warna hanya dalam kotak yang baru saja dijelaskan, Anda akan melihatnya akan memberi Anda pola kotak-kotak yang berkelanjutan tidak peduli berapa banyak baris yang Anda buat.

Sisa &:nth-child() baris bertanggung jawab untuk membersihkan pada akhir setiap baris dan membuat jumlah yang tepat dari batas atas di atas setiap persegi.

Semua di atas harus memberikan efek berikut setelah Anda menyimpan dan refresh:

9. Styling Pada Link Pagination

Sekarang tombol "Next" dan "Prev" link hanya mengambang dan terlihat sangat sederhana. Mari kita ubah itu. Tambahkan kode ini ke bagian akhir file style.styl Anda:

1

.prev, .next

2

    background-color $color_shadow

3

	raised()

4

	font-size $type_wrapper_font_size

5

	display inline-box

6

	position absolute

7

	left 50%

8

	width 80 * $px

9

	margin-left -40 * $px

10

11

.prev

12

	padding-bottom 8 * $px

13

	padding-top 25 * $px

14

	top 0

15

	&:before

16

		position absolute

17

		bottom 35 * $px

18

		content " "

19

		border-left: 20 * $px solid transparent

20

		border-right: 20 * $px solid transparent

21

		border-bottom: 20 * $px solid $color_link_default

22

23

.next

24

	padding-top 8 * $px

25

	padding-bottom 25 * $px

26

	bottom 0

27

	&:before

28

		position absolute

29

		top 35 * $px

30

		content " "

31

		border-left: 20 * $px solid transparent

32

		border-right: 20 * $px solid transparent

33

		border-top: 20 * $px solid $color_link_default

Dengan kode ini kami telah menempatkan link pada background hitam, terapkan mixin bayangan raised() dan tambahkan sedikit dan turun CSS segitiga melalui tiga baris perbatasan pengaturan Anda lihat &:before selector. Kami juga telah menggunakan posisi absolute dan margin negatif untuk menempatkan link di tengah layar, ditempelkan ke bagian atas dan bawah area panel.

Inilah yang seharusnya terlihat seperti sekarang:

10. Menambahkan Smooth Scroll dan Animation

Sekarang ketika seorang pengunjung mengklik tombol 'Next' atau 'Prev', ia akan langsung mengarahkannya ke panel berikutnya tanpa transisi. Sebaliknya, kami ingin membuat efek smooth scrolling dari satu panel ke panel berikutnya. Kami juga akan menambahkan beberapa efek animasi elemen pada layar untuk memberi mereka sedikit lebih hidup.

Menggabungkan Smooth Scrolling JavaScript

Untuk membuat smooth scrolling dari satu panel ke panel yang berikutnya kita akan menggunakan jQuery snippet dengan CSS Trik.

Dalam folder source > scripts > js buat sebuah file bernama smoothscroll.js dan tambahkan kode ini untuk itu:

1

$(function() {

2

  $('a[href*=#]:not([href=#])').click(function() {

3

    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

4

      var target = $(this.hash);

5

      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

6

      if (target.length) {

7

        $('html,body').animate({

8

          scrollTop: target.offset().top

9

        }, 1000);

10

        return false;

11

      }

12

    }

13

  });

14

});

Sekarang buka file site.js dari folder source > scripts dan tmbahkan baris ini untuk itu:

1

//@prepros-append js/smoothscroll.js

Kode //@prepros-append memungkinkan Anda untuk memberitahu Prepros file yang Anda ingin combine dan minify. Simpan file Anda dan secara otomatis akan menarik file smoothscroll.js Anda dan memasukkan ke file site.min.js yang sudah di load di situs kami.

Fungsi smooth scrolling berjalan secara otomatis, jadi sekarang, ketika Anda klik "Next" atau "Prev" link Anda akan melihat transisi smooth dari satu panel ke yang lain.

Gabungkan Animasi

Kita akan menggunakan kombinasi perpustakaan Animate.css dari animasi CSS murni, dan skrip Wow.js untuk mengontrol waktu dari animasi ini.

Klik kanan dan simpan wow.js ke dalam folder source > scripts > js sebagai wow.js:

Kemudian, seperti yang Anda lakukan dengan skrip smooth scroll Anda, tambahkan baris ke skrip site.js Anda untuk memberi tahu Prepros bahwa Anda ingin menarik wow.js ke dalam skrip site.min.js Anda.

Update source > scripts > site.js untuk menampilkan:

1

//@prepros-append js/smoothscroll.js

2

//@prepros-append js/wow.js

Simpan file sehingga ia meminta Prepros untuk mengkompilasi ulang.

Sekarang saatnya untuk animate.css. Klik kanan dan save animate.css ke folder source > stylus, namun tidak menyimpannya dengan ekstensi .css. tapi simpan dengan nama _animate.styl yang akan memungkinkan kita untuk mengimpor melalui file Stylus utama kami:

Di file style.styl Anda, di bawah baris dua @import, tambahkan berikut:

1

@import _animate

Simpan dan stylesheet Anda akan mengkompilasi ulang dengan Animate.css termasuk di dalamnya.

Sekarang satu-satunya yang tersisa untuk mengaktifkan animasi adalah menambahkan skrip kecil yang akan mengaktifkan wow.js.

Buka file wrapper.jade Anda, dan tambahkan tiga baris berikut langsung sebelum baris body Anda, pastikan baris pertama menjorok ke tingkat yang sama sebagai baris script yang sebelumnya:

1

    	:coffee

2

			w = Math.max document.documentElement.clientWidth, window.innerWidth or 0

3

			new WOW().init() if w > 1200

Kode filter :coffee memberitahu Jade compiler bahwa beberapa CoffeeScript akan datang, dan akan dikompilasi menjadi JavaScript.

Kode di atas pertama kali memeriksa apakah viewport setidaknya berukuran lebar 1200 pixels, karena kami tidak ingin efek animasi pada layar yang lebih kecil, maka jika demikian fungsi animasi dimulai.

Seluruh file wrapper.jade Anda sekarang akan terlihat seperti ini:

1

doctype html

2

html( lang="en" )

3

    head

4

		title

5

			block title

6

		meta( charset='utf-8' )

7

		meta( http-equiv='X-UA-Compatible', content='IE=edge' )

8

		meta( name='viewport', content='width=device-width, initial-scale=1.0' )

9

		link( href='css/style.css', rel='stylesheet', type='text/css' )

10

		link( href='//fonts.googleapis.com/css?family=Bangers|Indie+Flower', rel='stylesheet', type='text/css' )

11

		script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' )

12

		script( src='js/site.min.js' )

13

		:coffee

14

			w = Math.max document.documentElement.clientWidth, window.innerWidth or 0

15

			new WOW().init() if w > 1200

16

	body

17

		block content

Sekarang kami siap menambahkan beberapa animasi.

Animasikan 'Hello' Pane

Menambahkan animasi sekarang super mudah. Yang perlu Anda lakukan adalah menambahkan class wow untuk setiap elemen dan kemudian memilih class Animate.css menambahkan untuk menentukan efek, seperti .fadeIn. Anda juga dapat menambahkan atribut data-wow-duration dan data-wow-delay attribute untuk menentukan durasi dan delay animasi

Kita akan memiliki baris 'Hello' pada slide panel pertama dari atas, kemudian baris kedua meluncur dari kanan, dan baris ketiga dari kiri. Buka file hello.jade Anda dan ubah kode menjadi ini:

1

h1.wow.slideInDown( data-wow-duration="1s" ) Hello

2

h3.wow.slideInRight( data-wow-duration="1s", data-wow-delay="1s" ) I'm Your Name

3

h4.wow.slideInLeft( data-wow-duration="1s", data-wow-delay="2s" ) This is What I Do

Jika menyimpan file hello.jade Anda tidak secara otomatis memicu rekompilasi, cukup buka file index.jade Anda dan simpan, yang akan meminta Prepros.

Pergi ke situs Anda dan refresh kemudian Anda akan melihat masing-masing dari tiga baris menganimasi dirinya sendiri.

Animasikan Panel Lainnya

Kami sekarang akan menganimasikan judul dan kotak kecil di halaman skills Anda. Anda masih belum mengisi konten untuk panel kosong lainnya saat ini, dan kami tidak ingin Anda harus menulis class animasi berulang kali ketika Anda melakukannya. Untuk membuat semuanya efisien kita akan membuat beberapa mixins yang berisi kode animasi kami.

Dalam folder source > content buat file bernama mixins.jade dan tambahkan kode ini ke dalamnya:

1

- var duration = "0.25s"

2

- var delay = 0.75

3

- var stagger = 0.25

4

5

mixin showSquare()

6

    li.wow.fadeIn( data-wow-duration=duration, data-wow-delay=( delay += stagger ) + "s" )

7

		block

8

9

mixin panelHead()

10

	h1.wow.fadeIn

11

		block

Di mana pun mixin ini ditempatkan, kode yang dikandungnya akan disisipkan.

Ketiga variabel dan mixin showSquare() akan memudar di masing-masing kotak kecil kami, masing-masing seperempat detik setelah yang terakhir. Mixin panelHead() akan memudar judul utama segera setelah pengunjung menuju ke sana.

Dalam file skills.jade Anda tambahkan baris ini ke bagian atas file Anda untuk membawa mixin baru Anda:

1

include mixins

Replace baris h1 Anda dengan:

1

+panelHead()

Dan replace li pertama dari masing-masing persegi Anda dengan:

1

    +showSquare()

Anda harus berakhir dengan sesuatu seperti ini:

1

include mixins

2

3

+panelHead()

4

    | My Skills Are...

5

ul

6

	+showSquare()

7

		h3 Skill One

8

		ul

9

			li +

10

			li Extra Info

11

			li More info

12

	+showSquare()

13

		h3 Skill Two

14

		ul

15

			li +

16

			li Extra Info

17

			li More info

18

	+showSquare()

19

		h3 Skill Three

20

		ul

21

			li +

22

			li Extra Info

23

			li More info

24

	+showSquare()

25

		h3 Skill Four

26

		ul

27

			li +

28

			li Extra Info

29

			li More info

30

	+showSquare()

31

		h3 Skill Five

32

		ul

33

			li +

34

			li Extra Info

35

			li More info

36

	+showSquare()

37

		h3 Skill Six

38

		ul

39

			li +

40

			li Extra Info

41

			li More info

42

	+showSquare()

43

		h3 Skill Seven

44

		ul

45

			li +

46

			li Extra Info

47

			li More info

48

	+showSquare()

49

		h3 Skill Eight

50

		ul

51

			li +

52

			li Extra Info

53

			li More info

Sekarang ketika Anda me-refresh situs Anda setelah mengkompilasi ulang dan pergi ke panel kedua Anda, Anda akan melihat judul memudar di diikuti oleh setiap kotak kecil berturut-turut terhuyung-huyung.

11. Tambahkan Rest Konten Anda

Sekarang mixin kami siap mari lanjutkan dan tambahkan konten ke panel yang tersisa. Tambahkan kode placeholder berikut ke setiap file konten kosong Anda dan sesuaikan sesuai keinginan Anda.

systems.jade

1

include mixins

2

3

+panelHead()

4

    | I Work With These Systems

5

ul

6

	+showSquare()

7

		h3 This CMS

8

		ul

9

			li More info here

10

	+showSquare()

11

		h3 That Engine

12

		ul

13

			li More info here

14

	+showSquare()

15

		h3 This System

16

		ul

17

			li More info here

18

	+showSquare()

19

		h3 That System

20

		ul

21

			li More info here

types.jade

1

include mixins

2

3

+panelHead()

4

    | I create these types of projects

5

ul

6

	+showSquare()

7

		h3 Project Type

8

		ul

9

			li More info

10

	+showSquare()

11

		h3 Project Type

12

		ul

13

			li More info

14

	+showSquare()

15

		h3 Project Type

16

		ul

17

			li More info

18

	+showSquare()

19

		h3 Project Type

20

		ul

21

			li More info

tools.jade

1

include mixins

2

3

+panelHead()

4

    | I work with these tools

5

ul

6

	+showSquare()

7

		h3 Tool Name

8

	+showSquare()

9

		h3 Tool Name

10

	+showSquare()

11

		h3 Tool Name

12

	+showSquare()

13

		h3 Tool Name

14

	+showSquare()

15

		h3 Tool Name

16

	+showSquare()

17

		h3 Tool Name

18

	+showSquare()

19

		h3 Tool Name

20

	+showSquare()

21

		h3 Tool Name

22

	+showSquare()

23

		h3 Tool Name

24

	+showSquare()

25

		h3 Tool Name

26

	+showSquare()

27

		h3 Tool Name

28

	+showSquare()

29

		h3 Tool Name

Contact.Jade

1

include mixins

2

3

+panelHead()

4

    | CONTACT ME

5

	br

6

	| Via These

7

ul

8

	+showSquare()

9

		h3 

10

			a( href="http://<sociallink>" ) Social

11

	+showSquare()

12

		h3

13

			a( href="http://<sociallink>" ) Social

14

	+showSquare()

15

		h3

16

			a( href="http://<sociallink>" ) Social

17

	+showSquare()

18

		h3

19

			a( href="http://<sociallink>" ) Social

Memodifikasi Styling Panel "Tools" dan "Contact"

Setelah mendapatkan semua konten di atas di tempat Anda akan melihat panel "tools" dan "contact" sedikit berbeda dengan yang lain. Panel 'Tools' memiliki dua belas kotak dengan judul saja sehingga tinggi mereka saat ini terlalu besar. Panel 'Contact' memiliki tautan pada kotak dan warnanya saat ini tidak berfungsi dengan baik.

Untuk memperbaiki kedua masalah ini, tambahkan kode ini ke file style.styl:

1

.tools

2

    .wrapper

3

		ul li

4

			height 140 * $px

5

6

.contact

7

	.wrapper

8

		ul li

9

			height 140 * $px

10

			a

11

				color black

Anda seharusnya memiliki link hitam pada panel "Contact" Anda dan tata letak yang seperti ini pada panel "Tools" Anda:

12. Animasikan Tombol 'Next'

Kita akan menggunakan animasi tombol berikutnya, waktunya setelah pane elemen memiliki yang semua muncul, untuk meminta pengunjung yang mereka bisa pergi ke halaman berikutnya dan juga untuk memastikan mereka menyadari link ada.

Untuk melakukan ini, yang harus kita lakukan adalah menambahkan kelas .wow dan .bounceInUp ke masing-masing tautan 'Next' dan tetapkan penundaan. File index.jade akan dapat mengakses variabel delay dan stagger yang dimasukkan ke setiap panel melalui mixins animasi kami, sehingga kami dapat menggunakan variabel-variabel tersebut dalam pengaturan penundaan untuk secara otomatis menampilkan animasi 'Next' pada waktu yang tepat untuk setiap panel.

Update index.jade Anda jadi berikut:

1

extends templates/wrapper

2

3

block title

4

    | Static Site With Prepros

5

6

block content

7

	#section01.pane.hello

8

		.wrapper

9

			include content/hello

10

			a( class="next wow bounceInUp", href="#section02", data-wow-delay="3s" ) NEXT

11

	#section02.pane.skills

12

		.wrapper

13

			a( class="prev", href="#section01" ) PREV

14

			include content/skills

15

			a( class="next wow bounceInUp", href="#section03", data-wow-delay=( delay -= stagger ) + "s" ) NEXT

16

	#section03.pane.systems

17

		.wrapper

18

			a( class="prev", href="#section02" ) PREV

19

			include content/systems

20

			a( class="next wow bounceInUp", href="#section04", data-wow-delay=( delay -= stagger ) + "s" ) NEXT

21

	#section04.pane.types

22

		.wrapper

23

			a( class="prev", href="#section03" ) PREV

24

			include content/types

25

			a( class="next wow bounceInUp", href="#section05", data-wow-delay=( delay -= stagger ) + "s" ) NEXT

26

	#section05.pane.tools

27

		.wrapper

28

			a( class="prev",href="#section04" ) PREV

29

			include content/tools

30

			a( class="next wow bounceInUp", href="#section06", data-wow-delay=( delay -= stagger ) + "s" ) NEXT

31

	#section06.pane.contact

32

		.wrapper

33

			a( class="prev",href="#section05" ) PREV

34

			include content/contact

Kembali ke situs Anda sekarang dan Anda akan melihat tombol 'Next' muncul pada waktu yang tepat untuk setiap panel.

13. Jadikan Responsif

Hal terakhir yang perlu kita lakukan adalah menambahkan beberapa pertanyaan media untuk membuat tata letak responsif. Kami akan mengurangi ukuran tag judul dan font default saat kami menurunkan, mengurangi jumlah kotak kecil per baris dan memperbarui warna dan jaraknya.

Tambahkan kode ini ke akhir style.styl file:

1

// *************

2

// QUERIES

3

// *************

4

5

$query_01 = "(max-width: " + $layout_site_width * $px + ")"

6

7

@media $query_01

8

    h_tags(0.9)

9

	.wrapper > ul > li

10

		$spacing = 0.25%

11

		width 32.8%

12

		&:nth-child(2n+1)

13

			background $color_highlight

14

		&:nth-child(2n+2)

15

			background $color_link_default

16

		&:nth-child(4n+5)

17

			clear none

18

		&:nth-child(3n+4)

19

			clear left

20

		&:nth-child(3n+1)

21

			margin-top 3 * $spacing

22

		&:nth-child(3n+2)

23

			margin-top 2 * $spacing

24

		&:nth-child(3n+3)

25

			margin-top 1 * $spacing

26

27

28

$query_02 = "(max-width: " + 1000 * $px + ")"

29

30

@media $query_02

31

	h_tags(0.8)

32

33

34

35

$query_03 = "(max-width: " + 800 * $px + ")"

36

37

@media $query_03

38

	h_tags(0.7)

39

	.hello

40

		.wrapper

41

			font-size 36 * $px

42

	.wrapper > ul > li

43

		width 49.5%

44

		&:nth-child(4n+1), &:nth-child(4n+4)

45

			background $color_highlight

46

		&:nth-child(4n+2), &:nth-child(4n+3)

47

			background $color_link_default

48

		&:nth-child(3n+4)

49

			clear none

50

		&:nth-child(2n+3)

51

			clear left

52

53

54

55

$query_04 = "(max-width: " + 500 * $px + ")"

56

57

@media $query_04

58

	.hello

59

		.wrapper

60

			font-size 24 * $px

61

	h_tags(0.6)

62

	.wrapper > ul > li

63

		height auto

64

		width 99.5%

65

		margin 0.25% !important

66

		&:nth-child(2n+1)

67

			background $color_highlight

68

		&:nth-child(2n+2)

69

			background $color_link_default

Sekarang ketika Anda menyusut situs Anda segera turun Anda akan memiliki tata letak yang seperti ini:

Wrapping Up

Anda dapat melihat versi lengkap saya sendiri dari situs ini dengan ketrampilan pribadi saya, peralatan dan sebagainya.

Seperti yang Anda lihat, Prepros adalah aplikasi kecil yang hebat dan itu membuat berhadapan dengan preprocessors hampir semudah didapat. Serta Jade dan Stylus juga dapat menangani LESS, Sass, SCSS (dengan Kompas built in), Slim, Coffeescript, LiveScript, Haml dan Markdown. Dengan versi pro, Anda juga bisa mendapatkan FTP dan alat pengujian dan debug tambahan.

Saya kadang-kadang masih mengatur alur kerja berdasarkan Grunt jika saya perlu bekerja dengan beberapa jenis proses tambahan, seperti menghasilkan dokumentasi misalnya, tetapi untuk sebagian besar proyek Prepros telah menjadi standar saya.

Dengan versi gratis yang menawarkan begitu banyak, serta versi Windows dan Mac, ini adalah aplikasi yang harus Anda coba.