منهجية BEM لتسمية محددات CSS

هل سبق لك قراءة ملف CSS لتجد في أسماء المحددات (Selectors) خليطاً من الشرطات العلوية ”–“ والسفلية ”__“؟

إن لم تكن قد فعلت فعلى الأغلب أنك ستصادف هذه الحالة عما قريب. لكن ما معنى هذه الطريقة في التسمية؟ هل هي مجرد عمل مطور كسول لدرجة لا يستطيع معها المحافظة على محرف فاصل واحد؟ أم أن هنالك سبباً منطقياً وراء كل ذلك؟

منهجية BEM لتسمية محددات CSS

أكمل القراءة

تخصيص صفحة تسجيل دخول ووردبريس

عندما يتعلق الأمر بتخصيص ووردبريس فإن الأمر يتعلق بأكثر من تصميم موضوع ، فعليك التفكير في أمور أخرى ، كتخصيص صفحة تسجيل الدخول لتعرض شعارك وألوان تتناسب مع موضوعك (Theme). تعرف كيف تقوم بذلك في هذا الموضوع.

login

أكمل القراءة

حان الوقت لتبدأ باستخدام وحدة القياس REM

موضوع الوحدة المستخدمة لتحديد حجم النص في CSS قد يولد جدالاً طويلاً. وكالعادة لا يهمني ما تستخدمه طالما أنه يساعدك على إنجاز عملك على أتم وجه، ولكن يبدو أن نجماً جديداً (ليس جديداً جداً) يلوح في الأفق.

حان الوقت لتبدأ باستخدام وحدة القياس REM

أكمل القراءة

حسّن منهجيّتك في تطوير الواجهات 2 – Grunt

نعود اليوم لموضوع تطوير الواجهات والأدوات التي تساعدنا على تخفيف الأعباء الروتينية للتركيز على الأجزاء الممتعة من العمل. هناك الكثير لنفعله في هذه المقالة، جهز كوباً من الشاي ولنبدأ.

حسّن منهجيّتك في تطوير الواجهات 2 – Grunt

أكمل القراءة

حسّن منهجيّتك في تطوير الواجهات 1 – Bower

يمتلك كل منا مهارات وخبرات في التعامل مع أدوات حرفته، ومع طول فترة استخدامنا لتلك الأدوات يزداد شعورنا بالراحة والأمان معها. ومع أننا كأشخاص يقومون بأعمال فكرية وإبداعية في العصر الرقمي نسعى دوماً لتعلم الجديد واكتساب المزيد من المهارات، إلا أن ذلك الأمان يجعلنا أحياناً نخشى تغيير أدواتنا أو إضافة الجديد إليها.

على سبيل المثال، هذا ما منعني حتى الآن من الانتقال من Photoshop إلى Fireworks لتصميم الواجهات مع أني سمعت الكثير عن أفضليته في هذا المجال. لذلك أحاول الآن أن أثور على هذه العقلية وأتعلم استخدام أدوات جديدة للتطبيق العملي، لا لمجرد الثقافة العامة واستعراض المعلومات.

حسّن منهجيّتك في تطوير الواجهات 1 – Bower

أكمل القراءة

علامات تبويب باستخدام CSS3

تعتبر علامات التبويب (Tabs) من العناصر الأساسية في واجهات الاستخدام. و قد كان إنشاؤها في صفحات الويب، حتى وقت قريب، يعتمد على وجود JavaScript. لكن أنصار قابلية الوصول (Accessibility) يرفضون الاعتماد على JavaScript مهما كان بسيطاً (ولديهم أسباب مقنعة جداً لذلك)، وقد تمّ إيجاد حلول لهذا، لكن هذه الحلول كانت تتضمن دوماً التغاضي عن طريقة العمل المتعارف عليها لعلامات التبويب (كأن يتم عرض محتوى جميع التبويبات إذا لم تتوفر JavaScript).

لكن الآن أصبح بالإمكان إنشاء علامات تبويب دون أي اعتماد على JavaScript بفضل CSS3.

علامات تبويب باستخدام CSS3

أكمل القراءة

عملية تجميل لموقع جيسترا التعريفي

منذ أن قمت بتصميم وتنفيذ موقعنا التعريفي السابق، بصراحة لم يكن رضاي عنه كاملاً. فقد أحسست أنه لا يعكس الصورة التي نريدها للفريق، كنت متعلقاً بفكرة لون أساسي لكل قسم، لكن استخدام بعض التأثيرات والخلفيات لم يكن له داع. ومع الانتشار الكاسح للتصاميم المسطحة لم يعد يمكن السكوت عن الوضع.

لذا فقد قمت بتخصيص بعض الوقت للقيام بعملية تجميلية للموقع بما يناسب رؤيتنا والمرحلة التي يعيشها عالم الويب اليوم. وخلال ذلك تعلمت ولاحظت بعض الأمور التي أود مشاركتها معكم.

أكمل القراءة

توسيط النص شاقولياً

كأي مدونة ناشئة، حاولنا خلال الأشهر القليلة الماضية أن نحافظ على مستوى معين في نشر المحتوى من حيث الكم والنوعية والوتيرة، لكن الصعوبات لتحقيق ذلك ازدادت مؤخراً بين ضغوطات العمل والحياة وما تعيشه سوريا الحبيبة، نسأل الله تعالى أن يمنّ عليها بفرج قريب.

لذا أحببت قبل أن أدخل في موضوع هذا الدرس، أن أبدأ باعتذار لمتابعينا (برغم قلتهم) لهذا الانخفاض في الأداء، ووعد بالعودة للمستوى المعهود وتحسينه في أقرب فرصة، نقدّر دعمكم، وتهمنا آراؤكم ومشاركاتكم.

بالعودة لموضوع الدرس، فالعنوان يشرح نفسه. حيث كان توسيط النص شاقولياً أمراً سهلاً عندما كنا نستخدم جداول HTML لبناء الصفحات، ولكن سنجد بعد قليل بأن الموضوع لا يزال بنفس السهولة تقريباً عند استخدام CSS.

أكمل القراءة

استخدم تويتر بوتستراب لمواقعك العربية

تعرفت منذ بضعة أشهر على مكتبة Twitter Bootstrap لبناء واجهات الاستخدام، وكان الحب من الصفحة الأولى، فقد وجدت فيها من الميزات ما يساعدني على إنجاز الأعمال بشكل أسرع وبمعايير عالية وبقلق أقل حيال دعم المستعرضات.

ومع أني قرأت كافة ملفات دعمها وتعلمت ما ينبغي تعلمه، إلا أن الفرصة لم تسنح لي لاستخدامها إلا منذ فترة قصيرة، لتأتي صدمة الواقع العملي. فبرغم جودة المكتبة وميزاتها إلا أنها لا تدعم العربية، أو بالأحرى لا تدعم الاتجاه من اليمين إلى اليسار.

وبما أني أملك من الكسل ما يمنعني من المرور على حوالي خمسة آلاف سطر CSS لتعديلها بما يناسب اتجاه اللغة العربية، فقد كدت أن أستسلم، لكن بحثاً أخيراً يائساً جاءني بالحل.

استخدم تويتر بوتستراب لمواقعك العربية

أكمل القراءة