آراستن impress.js

فایل ارائه impress.js نیازی به فایل جداگانه CSS ندارد و میتوان تمام تنظیمات دلخواهتان را به صورت Inline در فایل HTML قرار دهید.اما بهتر است همه این تنظیمات را در یک فایل جداگانه جمع آوری کنید. این کار فایل‌های شما را کوچک‌تر می‌کند و اصلاحات بعدی را آسان‌تر می‌نماید.

در اینجا یک نمونه فایل ‌CSS را که خودم درست کرده‌ام به شما نشان می‌دهم.

این فایل شامل ۴ بخش است:

بخش اول: تنظیمات اولیه مرورگر: همه مرورگرها تنظیمات اولیه یکسان ندارند و ممکن است یک فایل HTML واحد را به چند گونه نمایش بدهند برای یکسان سازی این تنظیمات همیشه در ابتدا تنظیمات اولیه خود را تعیین کنید. برای این کار فایل‌های مختلفی تحت عنوان normalize.css وجود دارد که می‌توانید از آنها استفاده کنید. البته من برای تهیه این قسمت از تنظیمات bootstrap استفاده کردم. این بخش نزدیک ۴۰۰ خط شده است.

/*============================================================================*/
/*                         Set CSS Defaults                                   */
/*============================================================================*/
html {
	box-sizing: border-box;
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent;
}

*, *:before, *:after {
	box-sizing: inherit;
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main,
	nav, section {
	display: block;
}

بخش دوم: تنظیمات اولیه impress.js: در این بخش کلاس ها و تگ هایی که در کتابخانه impress.js استفاده شده تعریف شده و تنظیمات اولیه آن انجام می‌گیرد.  این قسمت کمتر از ۱۰۰ خط است.

/*============================================================================*/
/*                           CSS impress.js                                   */
/*============================================================================*/
.step {
	position: relative;
	width: 1200px;
}

/* Using the substep plugin, hide bullet points at first, then show them one by one. */
.step .substep { opacity: 0 }

.step .substep.substep-visible { opacity: 1 }

.fallback-message {
	line-height: 1.3;
	width: 1000px;
	padding: 10px 10px 0;
	margin: 20px auto;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #eee;
}

بخش سوم: تعریف فونت: حتما هر کسی در ارائه خود می‌خواهد از فونت‌های دلخواه خود استفاده کند تعریف و ارائه این فونت‌ها در این بخش صورت می‌گیرد من چند فونت را اینجا معرفی کردم شما می‌توانید از آن الگو بگیرید و فونت‌های دلخواه خود را به آن بیافزایید.

/*============================================================================*/
/*                       Definition of fonts                                  */
/*============================================================================*/
@font-face {
	font-family: Vazir;
	src: url('../font/Vazir.woff2') format('woff2'),
		url('../font/Vazir.woff') format('woff');
	font-weight: normal;
}

بخش چهارم: تنظیمات مربوط به ارائه: در این قسمت class و id های به کار رفته در ارائه خود را تعریف کرده و تنظیمات آن را مشخص می‌کنیم. این بخش بر خلاف بخش‌های قبل در هر ارائه تغییر می‌کند.

/*============================================================================*/
/*                                Custom CSS                                  */
/*============================================================================*/
body {
	min-height: 720px;
	background: rgb(127, 127, 127);
	font-family: Vazir, sans-serif;
	font-weight: normal;
}

p {
	direction: rtl;
	text-align: right;
	font-family: Vazir, sans-serif;
	font-size: 2rem;
}

h1, h2, h3, h4, h5, h6 {
	direction: rtl;
	text-align: center;
	font-family: Sahel, sans-serif;
}

این فایل CSS را می‌توانید از اینجا دانلود کنید.

کلاس slide : یک کادر مستطیل رسم می‌کند و محتوا را در آن نمایش می‌دهد. (همه اسلایدها)

کلاس slide-header : نوار بالای اسلاید برای نمایش عنوان آن اسلاید. (اسلاید دوم به بعد)

کلاس slide-footer : نوار پایین اسلاید برای نمایش زیرنویس آن اسلاید. (اسلاید دوم)

کلاس slide-center : محتوای این کلاس در مرکز اسلاید نمایش داده می‌شود. (اسلاید اول و دوم)

کلاس slide-body : بدنه اصلی اسلاید است که محتوای اصلی در آن قرار می گیرد. (اسلاید سوم به بعد)

کلاس full-panel : داخل کلاس slide-body استفاده می‌شود و کل بدنه اسلاید را به یک ستون با فاصله های مناسب از اطراف تقسیم می‌کند. (اسلاید سوم و پنجم)

کلاس half-panel : داخل کلاس slide-body استفاده می‌شود و کل بدنه اسلاید را به دو ستون مساوی با فاصله های مناسب از اطراف تقسیم می‌کند. (اسلاید چهارم)