شروع کار
دانلود
در زمان دانلود شما دو نسخهی توسعهدهنده و فشرده از جغد را دریافت خواهید کرد. در نسخهی توسعهدهنده، تمامی بخشهای CSS و فانکشنهای javaScript بخوبی مستند شده و خوانایی بالایی دارند. در مقابل آن، نسخهی فشرده وجود دارد که تمامی کامنتها و فاصلههای آن از بین رفته تا از حجم آن کاسته شود.
با دانلود جغد، شما به صورت خودکار آخرین نسخههای آیکونست گربه، فونت وزیر و فونت روبوتو را نیز دریافت خواهید نمود.
ساختار پروژه
بعد از دانلود و خارج کردن فایلها از حالت زیپ، چنین ساختاری خواهید داشت:
joqd/
|
├── css/
| |
│ ├── joqd.css
│ ├── joqd.min.css
│ └── custom.css
│
├── fonts/
| |
│ ├── Roboto/
| | |
│ │ ├── Roboto-Bold.eot
│ │ ├── Roboto-Bold.ttf
│ │ ├── Roboto-Bold.woff
│ │ ├── Roboto-Bold.woff2
│ │ ├── Roboto-Regular.eot
│ │ ├── Roboto-Regular.ttf
│ │ ├── Roboto-Regular.woff
│ │ └── Roboto-Regular.woff2
│ |
│ └── Vazir/
| |
│ ├── Vazir-Bold.eot
│ ├── Vazir-Bold.ttf
│ ├── Vazir-Bold.woff
│ ├── Vazir-Regular.eot
│ ├── Vazir-Regular.ttf
│ └── Vazir-Regular.woff
│
├── gorbeh/
| |
│ ├── css/
| | |
│ │ ├── gorbeh-icons.css
│ │ └── gorbeh-icons.min.css
│ |
│ └── fonts/
| |
│ ├── Gorbeh-Regular.eot
│ ├── Gorbeh-Regular.svg
│ ├── Gorbeh-Regular.ttf
│ ├── Gorbeh-Regular.woff
│ └── Gorbeh-Regular.woff2
│
├── img/
|
├── js/
| ├── joqd.js
| ├── joqd.min.js
| └── custom.js
|
└── index.html
راهاندازی اولیه
برای شروع سریع پروژهی خود، شما میتوانید قطعه کد پایین را کپی کرده و در صفحههای HTML خود استفاده کنید.
در این نمونه کد فرض بر فارسی بودن پروژهی شما بوده است. در صورتی که مایل به ایجاد وبسایت به زبانهای دیگر هستید، صفت lang
را در تگ <html>
به دلخواه عوض کنید.
<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="IKA"> <title>
جغد، اولین فریم وورک ایرانی</title> <!-- Styles --> <!-- Joqd Core CSS --> <link href="css/joqd.min.css" rel="stylesheet"> <!-- Gorbeh Icons --> <link href="gorbeh/css/gorbeh-icons.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/custom.css" rel="stylesheet"> </head> <body> <!-- !محتویات صفحه رو اینجا بنویسید --> <!-- Scripts --> <!-- Latest jQuery (CND) --> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- Joqd Core js --> <script src="js/joqd.min.js"></script> <!-- Custom js --> <script src="js/custom.js"></script> </body> </html>