CSS klasslarda tez-tez ishlatiladigan so'zlar

...

Tasvirlar

image, img, picture, pic — rasm

icon — ikonka

logo — logotip

userpic, avatar — foydalanuvchi rasmi, kichik foydalanuvchi tasviri

thumbnail, thumb — miniatura, kichraytirilgan rasm

Matn

title, subject, heading, headline, caption — sarlavha

subtitle — ostgi sarlavha

slogan — shior

lead, tagline — matndagi asosiy paragraf

text — matnli kontent

desc — tavsif, matnli kontent varianti

excerpt — matndan parcha, odatda "Batafsil o'qing..." havolasidan oldin ishlatiladi

quote, blockquote — iqtibos

snippet — kod namunasi

link — havola

copyright, copy — mualliflik huquqi

Ro'yxatlar

list, items — ro'yxat

item — ro'yxat elementi

Bloklar

page — sahifaning asosiy elementi

header — sarlavha (sahifa yoki elementning yuqori qismi)

footer — pastki qism (sahifa yoki elementning pastki qismi)

section — kontent bo'limi (bir necha qismdan biri)

main, body — asosiy qism (sahifa yoki element)

content — elementning mazmuni

sidebar — yon panel (sahifa yoki elementning yonidagi panel)

aside — qo'shimcha ma'lumotlar bloki

widget — vidjet, masalan, yon paneldagi vidjet

Maket

wrapper, wrap — o'rab oluvchi element, odatda tashqi qism

inner — ichki qism

container, holder, box — konteyner

grid — setka shaklidagi maket (odatda row va col ni o'z ichiga oladi)

row — qator shaklidagi konteyner

col, column — ustun shaklidagi konteyner

Boshqaruv elementlari

button, btn — tugma, masalan, formani yuborish uchun

control — boshqaruv elementi, masalan, fotogalereyada "Oldinga/orqaga" tugmalari yoki slayderni boshqarish tugmalari

dropdown — tushuvchi ro'yxat

Media ifodalar

phone, mobile — mobil qurilmalar

phablet — katta ekranli telefonlar (6-7")

tablet — planshetlar

notebook, laptop — noutbuklar

desktop — shaxsiy kompyuterlar

O'lchamlar

tiny, xs — juda kichik

small, sm — kichik

medium, base — o'rtacha

big, large, lg — katta

huge, xl — juda katta

narrow — tor

wide — keng

Boshqa

search — qidiruv

socials — ijtimoiy tarmoqlar ikonkalari bloki

advertisement, adv, commercial, promo — reklama bloki (Adblock tomonidan bloklanishi mumkin, ichki reklamali bloklar uchun bu klasslardan foydalanish tavsiya etilmaydi)

features, benefits — mahsulot yoki xizmatning asosiy afzalliklari ro'yxati

slider, carousel — slayder, mazmuni aylantiriladigan interaktiv element

pagination — sahifalar bo'yicha navigatsiya

user, author — foydalanuvchi, maqola yoki sharh muallifi

meta — qo'shimcha ma'lumotlar bloki, masalan, maqoladagi teglar va sanalar

cart, basket — savat

breadcrumbs — navigatsiya zanjiri, "non ushoqlari"

more, all — to'liq ma'lumot havolasi

modal — modali (dialogli) oynalar

popup — paydo bo'luvchi oynalar

tooltip, tip — pop-up ko'rsatmalar

preview — yangilik yoki postning qisqacha ko'rinishi, odatda sarlavha, tavsif va rasm o'z ichiga oladi. To'liq versiyaga havola mavjud bo'lishi kutiladi.

overlay — ustki qavat, masalan, rasmni qoraytirish yoki modali oynalar yaratish uchun ishlatiladi

Holatlar

active, current — faol element, masalan, menyudagi joriy band

visible — ko'rinadigan element

hidden — yashirin element

error — xato holati

warning — ogohlantirish holati

success — vazifa muvaffaqiyatli bajarilgan holati

pending — kutish holati, masalan, status error yoki success ga o'zgartirilishidan oldin

Foydalanish misollari

Oddiy ro'yxat

<ul class="list">
	<li class="item">Birinchi</li>
	<li class="item">Ikkinchi</li>
	<li class="item">Uchinchi</li>
</ul>

Foydalanuvchi rasmi (userpic)

<div class="user">
	<img class="user__img" src="userpic.png" alt="Shakhbozbek Usmonov" />
	<a class="user__link" href="#">Shakhbozbek Usmonov</a>
</div>

Galereya

<div class="gallery">
	<ul class="gallery__list">
		<li class="gallery__item">
			<img
				class="gallery__img"
				src="flowers.jpg"
				alt="So'nggi bor gullab yashnamoqdamiz"
			/>
		</li>
		<li class="gallery__item">
			<img class="gallery__img" src="trees.jpg" alt="Uch qarag'ay parki" />
		</li>
	</ul>
</div>

Navigatsiya

<nav class="nav">
	<a class="nav__link nav__link--active">Bosh sahifa</a>
	<a class="nav__link" href="#">Ikkinchi</a>
	<a class="nav__link" href="#">Uchinchi</a>
	<a class="nav__link" href="#">To'rtinchi</a>
	<a class="nav__link" href="#">Oxiri</a>
</nav>

<nav class="nav">
	<ul class="nav__list">
		<li class="nav__item nav__item--current">
			<a class="nav__link">Bosh sahifa</a>
		</li>
		<li class="nav__item">
			<a class="nav__link" href="#">Maqolalar</a>
		</li>
		<li class="nav__item">
			<a class="nav__link" href="#">Fotogalereya</a>
		</li>
		<li class="nav__item">
			<a class="nav__link" href="#">Bog'lanish</a>
		</li>
	</ul>
</nav>

Yon paneldagi vidjet

<div class="widget">
	<h4 class="widget__title">Jeley yetishtirish</h4>
 
	<div class="widget__content">
		<p>
			Mehribon jeley yetishtirish uchun bizga rulon porolon, ikki kilo shakar,
			uchta tuxum va yarim choy chashka atseton kerak bo'ladi.
		</p>
 
		<a class="widget__link" href="#">Davomini o'qimang...</a>
	</div>
</div>

Yangiliklar bloki

<div class="news">
	<h3 class="news__title">Kecha bo'lgan yangiliklar</h3>
 
	<ul class="news__list">
		<li class="news__item item-news">
			<h4 class="item-news__title">Sovun bilan konkida uchish musobaqalari</h4>
			<div class="item-news__text">
				<p>G'olib bo'lgan jamoa — Petrozavodsk kilkalari</p>
 
				<a href="#" class="item-news__link">Batafsil o'qish</a>
			</div>
		</li>
 
		<li class="news__item item-news">
			<h4 class="item-news__title">
				Olimlar faylasufni mixlash haqida o'z tadqiqotlarini e'lon qilishdi
			</h4>
			<div class="item-news__text">
				<p>"Juda qiziqarli amaliyot", - deydi professor Persik Limonadov</p>
 
				<a href="#" class="item-news__link">Batafsil o'qish</a>
			</div>
		</li>
	</ul>
</div>