Skip to content

Instantly share code, notes, and snippets.

Khalid Lafi lafikl

Block or report user

Report or block lafikl

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@lafikl
lafikl / cssspecificity.css
Created Nov 22, 2012
CSS specificity example
View cssspecificity.css
ul li a {
color: red;
}
.item {
color: blue;
}
/* item will win! */
View Wajihah.html
<div class="container">
<div class="row">
<div class="col-four">.col-four</div>
<div class="col-four">.col-four</div>
<div class="col-four">.col-four</div>
</div>
<div class="row">
<div class="col-three">.col-three</div>
<div class="col-three">.col-three</div>
View wj.mobile.html
<div class="container">
<div class="row">
<div class="col-four-mobile">
<h6>أهلاً بالعالم</h6>
</div>
</div>
<div class="row">
<div class="col-one-mobile">
<h6>أهلاً بالعالم</h6>
</div>
View wj.nest.html
<div class="container">
<div class="row">
<div class="col-six col-four-mobile">
<div class="col-six col-two-mobile">أهلاً بالعالم</div>
<div class="col-six col-two-mobile">أهلاً بالعالم</div>
</div>
<div class="col-six col-four-mobile">
<div class="col-four col-one-mobile">أهلاً بالعالم</div>
<div class="col-eight col-three-mobile">أهلاً بالعالم</div>
</div>
View wj.offset.html
<div class="container">
<div class="row">
<div class="col-six col-two-mobile">
أهلاً بالعالم
</div>
<div class="col-four col-one-mobile offset-one-mobile offset-two">
أنا عنصر تمت موازنتي
</div>
</div>
</div>
View wj.centered.html
<div class="container">
<div class="row">
<div class="col-ten col-centered col-three-mobile">
أهلاً بالعالم
</div>
</div>
<div class="row">
<div class="col-six col-centered col-two-mobile">
أهلاً بالعالم
</div>
View fancy.html
<!-- Fancy -->
<a href="#" class="btn btn-fancy">زر فاخر</a>
<a href="#" class="btn btn-fancy btn-blue">زر أزرق فاخر</a>
<a href="#" class="btn btn-fancy btn-red">زر أحمر فاخر</a>
<a href="#" class="btn btn-fancy btn-black">زر أسود فاخر</a>
<a href="#" class="btn btn-fancy btn-yellow">زر أصفر فاخر</a>
View sizes.html
<!-- Sizes -->
<a href="#" class="btn btn-large">زر كبير</a>
<a href="#" class="btn">زر متوسط الحجم</a>
<a href="#" class="btn btn-small">زر صغير</a>
<a href="#" class="btn btn-mini">زر صغير جداً</a>
View forms-buttons.html
<!-- with forms -->
<input type="submit" value="حفظ" class="btn" />
<button class="btn">حفظ</button>
View pull.html
<div class="pull-left">
محاذاة لليسار
</div>
<div class="pull-right">
محاذاة لليمين
</div>
You can’t perform that action at this time.