مدخل إلى foundation أساسيات إطار عمل Foundation: النّظام الشّبكي

لم نشرح الكثير في الجزء الأول من هذه السلسلة، ولكن في هذا الجزء سنشرح النظام الشبكي وآليّة استخدامه وكافّة التفاصيل المُتعلقة به وبالأمثلة الحيّة، وسوف نتعرّف على النظام الشبكي العام والنظام الشبكي باستخدام الرزم والإزاحة ومفهوم "ترتيب المصدر" وأخيرًا سوف نتعرف على أصناف الظهور.

النّظام الشبكي في Foundation

يُمَكّنك Foundation من إنشاء تصاميم صفحات إنترنت مُتجاوبة مع جميع الشاشات والأجهزة بسرعة عالية، وذلك باستخدام نظامٍ شبكي يَعتمد على اثني عشر عمودًا بشكل مبدئيّ قابلة للتعديل، وهذه الشبكات يُمكن أن تكون مُتداخلة (nestable)، أي اثنا عشر عمودًا داخل اثني عشر عمودًا آخر.

يُعرَّف كل صفّ بإضافة الصنف row إلى <div>، وداخل كل صفّ يُحدَّد توزع الأعمدة باستخدام الأصناف small-x وmedium-x وlarge-x حيث x هي من 1 حتى 12، وهي دائمًا تُعرف داخل صفّ (row)، وبعد تحديد توزّع الأعمدة في الصفّ عليك إضافة الصنف column (عمود) أو columns، لا فرقَ بين الصنفين ولكنّ صيغة الجمع هي الشائعة، ومُهمة هذا الصنف هي إضافة الطوفان (float) والحشو (padding).

يُعرّف Foundation نقاط الفصل (breakpoints) الّتي تُحدّد كل قياس من قياسات النظام الشبكي كما يلي:

• الشاشات الصغيرة small تبدأ من 0 بكسل إلى 640 بكسلًا.
• الشاشات المتوسطة medium تبدأ من 641 بكسلًا إلى 1024 بكسلًا.
• الشاشات الكبيرة large تبدأ من 1025 بكسلًا إلى 1440 بكسلًا.

عند حدود هذه النقاط تتغير استجابة المُتصفّح في عرضه لمُحتويات الموقع لتبدو بأفضل صورةٍ مُمكنة.

بُني إطار العمل Foundation ليستهدف شاشات الأجهزة المحمولة أوّلًا ومنها إلى الأجهزة ذات الشاشات الكبيرة ويَستخدم في ذلك الصنف (class) المُسمى small، عند استخدام هذا الصنف، فإنّ تَوزع الأعمدة في الصفحة لن يختلف أبدًا مهما كانت قياس شاشة العرض، بمعنى أنّه في حال وجود عمودين في الصفحة سيبقى هذان العمودان مهما كان حجم الشاشة سواءٌ كانت متوسطة أو كبيرة، وعند استخدام الصنف المتوسط medium، والذي أُضيف في الإصدار الخامس، فإنّ توزع الأعمدة المُحدد على هذا الصنف سوف يتم استخدامه مع الشاشات الكبيرة أيضًا، ولكن في حالة الشاشات الصغيرة فسوف تصطف العناصر بعضها فوق بعض.

يجب أن يحتوي كل صفّ row اثني عشر عمودًا دومًا، في صفحة التسجيل في المتجر تتضمّن الصفحة صفًّا رئيسيًّا باثني عشر عمودًا داخل اثني عشر عمودًا آخر، حيث تكون النماذج (forms) ثمانية أعمدة والشريط الجانبي أربعة أعمدة، وعند تعريف النماذج يتم التعامل مع كل صفّ على أساس اثني عشر عمودًا داخل اثني عشر عمود، حيث يتم تعريف المُدخل الخاص بالاسم الأوّل على أنّه ستّة أعمدة والمُدخل الخاص بالاسم الأخير على أنه ستّة أعمدة.

    <div class="row"> <!--صفّ رئيسي-->
      <div class="medium-4 columns"> <!--أربعة أعمدة للشريط الجانبي-->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
      <div class="medium-8 columns"> <!--ثمانية أعمدة للنماذج-->
        <form>
          <div class="row"> <!--صفّ داخل الصف الرئيسي-->
            <div class="large-6 columns">
              <input type="text" placeholder="First name" />
            </div>
            <div class="large-6 columns">
              <input type="text" placeholder="last name" />
            </div>
          </div>
          <!-- بقية النماذج -->
        </form>
      </div>
    </div>

الإزاحة (Offset)

يُقدم Foundation مفهوم "الإزاحة" لزيادة المرونة في استخدام النظام الشبكي، حيث بإمكانك تحريك أي عمود إلى جهة اليمين مستهدفًا أي حجم شاشة دون الآخر، وذلك عن طريق الأصناف small-offset-x وmedium-offset-x وlarge-offset-x حيث x هي رقمٌ من 1 حتى 11، ومن المُمكن الجمع بين جميع القياسات الثالثة السابقة ولكن من واقع الخبرة العمليّة، الأكثر استخدامًا إمّا الصنف small مع medium أو small مع large.

يُطوّف Foundation العمود الأخير إلى جهة اليمين، على عكس ما يفعل إطار العمل Bootstrap عند إنشاء صفّ بأعمدة لا تُجمع إلى اثني عشر، ولكن بإمكانك إضافة الصنف end إلى العمود المُطوّف لجعله يصطف بجانب العمود السابق.

يُنسّق النظام الشبكي الأعمدةَ بإضافة حشو (padding) بينها، ولكن هناك حالات لاترغب بظهور هذا الحشو في قياس شاشة مُعين، ولذلك يُقدم لك Foundation أصنافًا مثلَ large-collapse لإزالة هذا الحشو من الشاشات الكبيرة على سبيل المثال.

يُقدم لك Foundation أصنافًا خاصة لتوسيط العمود في منتصف الصف، ولتوسيط العمود في الشاشات الصغيرة بإمكاننا استخدام الصنف small-centered، ويَشمل تأثير هذا الصنف الشاشات المتوسطة والكبيرة، ولكن بالإمكان استخدام صنف معاكس لتغيير هذا السلوك، حيث يَقومُ الصنف large-uncentered والصنف medium-uncentered بإلغاء تأثير الصنف small-centered في الشاشات الكبيرة والمتوسطة.

في الصفحة الرئيسة في المتجر لدينا صفّ يحتوي على ثلاثة عناصر، في الشاشات الصغيرة نريد لهذه العناصر أن يصطف بعضها فوق بعض وكلُ عنصر يأخُذ عرضَ الصفحة بالكامل ولذلك يجب أنّ نستخدم الصنف small-12، أمّا في الشاشات المتوسطة والكبيرة نُريد من العناصر الثلاثة أن تُعرض بجانب بعضها البعض وبالتّالي كل عنصرٍ سيكونُ له أربعة أعمدة (12/3) من أصلِ اثني عشر عمودًا لتظهر الصناديق الثلاثة على مُستوى واحد وعلى عرض الصفحة بالكامل ولذلك سوف نستخدم الصنف medium-4 الذي يقوم بترتيب العناصر على مستوى الشاشات المُتوسطة والكبيرة.

    <div class="row">
      <div class="small-12 medium-4 columns">
        <div class="panel">
          <h3>Shoot</h3>
          <p>...</p>
        </div>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="panel">
          <h3>Upload</h3>
          <p>...</p>
        </div>
      </div>

      <div class="small-12 medium-4 columns">
        <div class="panel">
          <h3>Sell</h3>
          <p>...</p>
        </div>
      </div>
    </div>

لاحظ أنّ الصناديق ليست على سويّةٍ واحدة ويعود ذلك إلى المُحتوى الخاص بها. يُقدم Foundation مفهوم المُسوّي لحل هذه المُشكلة والذي سيجعل من هذه الصناديق على سويّة واحدة مهما اختلف المُحتوى بينها، والذي سوف نتحدث عنه بمزيد من التفصيل في الجزء الأخير من السلسلة.

http://codepen.io/anon/pen/ogBQao

أيضًا في الصفحةِ الرئيسة لدينا صفّ يَعرض الصور الأكثر مبيعًا في المتجر، نُريد عرض ثلاثة صورٍ في الصف الواحد في الشاشات الكبيرة ولذلك سوف نستخدم الصنف large-4 وفي الشاشات الصغيرة والمتوسطة نريد عرض صورتين فقط في الصفّ الواحد ولذلك سوف نستخدم الصنف small-6.

<code class="lang-html"> 
</code>  <div class="row">
      <div class="small-6 large-4 columns">
        ...
      </div>
      <div class="small-6 large-4 columns">
        ...
      </div>
      <div class="small-6 large-4 columns">
        ...
      </div>
    </div>

الصورة التّالية لتوزع الأعمدة في الشاشات الكبيرة:

أمّا في الشاشات المُتوسطة والصغيرة سوف تتوزع الصور كما في الصورة التّالية مع ملاحظة طوفان الصورة الأخيرة إلى جهة اليمين، ويُمكنك استخدام الصنف end لجعل الصورة تطوف إلى جهة اليسار.

ويستخدم Foundation في ذلك الطوفان "الصّنف الزّائف" (pseudo-class) المُسمى "العنصر الأخير" last-child.

أيضًا في الصفحة الرئيسة لدينا الشيفرة التّالية والّتي تتضمّن صفّين: الأول يحتوي على اقتباسين (blockquote) كل منهما ستة أعمدة، أمّا في الصف الثاني لدينا اقتباس وحيد سنجعله يتوسط الصفّ الذي ينتمي إليه في الشاشات الكبيرة والمتوسطة دون الشاشات الصغيرة باستخدام أصناف الإزاحة medium-offset-3 و الصنف large-offset-3.

    <div class="row">
      <blockquote class="small-6 columns text-center">...<cite>..</cite></blockquote>
      <blockquote class="small-6 columns text-center">...<cite>..</cite></blockquote>
    </div>
    <div class="row">
      <blockquote class="large-6 medium-6 medium-offset-3 large-offset-3 columns">...<cite>..</cite></blockquote>
    </div>

http://codepen.io/anon/pen/rayBgg

ترتيب المصدر (Source Ordering)

من خلالِ تعامُلك مع النظام الشبكي لا بدَّ أن المشكلة التّالية واجهتك: تُريد ظُهور المُحتوى على المُتصفح بترتيب معين عند عرضه، وبترتيب آخر مُختلفٍ في نصّ مُستند HTML، رُبما لأسبابٍ تتعلقُ بالتحسينِ لمُحركات البحث (SEO)، أو أنّك تُريد عرضَ المُحتوى بترتيبٍ مُعين في شاشات سطح المكتب وبترتيبٍ مُغاير في الأجهزة المحمولة، ولهذا يُقدم Foundation حلًا لتلك المشكلة وذلك باستخدام أصناف الدفع والسحب (push and pull)، حيثُ يقوم الصنف large-push-4 بدفع العنصر أربعة أعمدةٍ باتجاه اليمين، ويَسحب الصنف large-pull-8 العُنصر ثمانية أعمدةٍ إلى اليسار.

في صفحةِ التسجيل الخاصة بالمتجر عمودان رئيسيان في الصفحة، فيهما ثمانية أعمدة للنماذج وأربعة أعمدة خاصة بعرض مزايا التسجيل في الموقع، التصميم يبدو مقبولًا على الشاشات المتوسطة والكبيرة ولكن عندَ عرض الصفحة على أجهزة الشاشات الصغيرة ستُعرض النماذج قبل العمود الخاص بالمزايا (features)، وهذا ما لا نُريده.

  <div class="row">
      <div class="medium-8 columns"> <!--عمود النماذج يُعرض أولًا في الشاشات الصغيرة وعلى يسار الصفحة في الشاشات المُتوسطة والكبيرة-->
        <form>
          <div class="row">
            <div class="large-6 columns">
              <input type="text" placeholder="First name" />
            </div>
            <div class="large-6 columns">
              <input type="text" placeholder="last name" />
            </div>
          </div>
          <!-- بقية النماذج -->
        </form>
      </div>
      <div class="medium-4 columns"> <!--عمود المزايا يُعرض بعد النماذج في الشاشات الصغيرة وعلى يمين الصفحة في الشاشات المُتوسطة والكبيرة-->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
    </div>

سنُعيدُ تصميم الصفحة لتكونَ مُتوافقة مع الهاتف المحمول أولًا، حيثُ يتمُ عرضُ المحتوى الخاص بالمزايا ثم النماذج لاستكمالِ التسجيل.

    <div class="row">
      <div class="medium-4 columns"> <!--عمود المزايا يُعرض أولًا وعلى يسار الصفحة-->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
      <div class="medium-8 columns"> <!-- عمود النماذج يُعرض بعد عمود المزايا وعلى يمين الصفحة-->
        <form>
          <div class="row">
            <div class="large-6 columns">
              <input type="text" placeholder="First name" />
            </div>
            <div class="large-6 columns">
              <input type="text" placeholder="last name" />
            </div>
          </div>
          <!-- بقية النماذج -->
        </form>
      </div>
    </div>

والآن بعد أن تمّ تعديل التصميم ليكون مُناسبًا لأجهزة الشاشات الصغيرة، أصبح التصميم على الشاشات الكبيرة والمتوسطة مُغايرًا تمامًا لما نُريده، حيثُ النماذج إلى جِهة اليمين والعمود الجانبي إلى اليسار.

لتصحيحِ العرض على الشاشات الكبيرة والمُوسطة سوف نستخدام أصناف السحب والدفع، سنقوم بدفع عمود المزايا ثمانية أعمدة إلى اليمين باستخدام الصنف medium-push-8، وسحب عمود النماذج أربعة أعمدة إلى اليسار باستخدام الصنف medium-pull-4، وذلك يجعلُ من التصميم كما كان سابقًا على الشاشات الكبيرة والمتوسطة.

    <div class="row">
      <div class="medium-4 columns medium-push-8"> <!-- أيها الشريط الجانبي الرجاء التكرّم بالانتقال ثمانية أعمدة إلى اليمين في الشاشات المتوسطة والكبيرة -->
        <aside>
          <div class="panel">
            <h5>Features</h5>
            <p>Registration is free</p>
            <p><span data-tooltip class="has-tip" title="Just important notifications">No spam</span></p>
            <a href="#">Read More →</a>
          </div>
        </aside>
      </div>
      <div class="medium-8 columns medium-pull-4"> <!-- أيتها النماذج الرجاء التكرّم بالانتقال أربعة أعمدة إلى اليسار في الشاشات المتوسطة والكبيرة-->
        <form>
          ...
        </form>
      </div>

لم نستطع استخدام أصناف السحب والدفع من البداية، بل كان علينا ترتيب المُحتوى كما نريده على أجهزة الشاشات الصغيرة أولًا (تذكّر أنّ Foundation يستهدف أجهزة الهاتف المحمول أولًا (mobile-first)) ثم استخدام أصناف السحب والدفع ثانيًا.

النظام الشبكي باستخدام القِطَع Block Grid

وهو نظامٌ شبكيٌ آخر يُقدمه Foundation للتعامل مع توزع الأعمدة بأقلِ قدر مُمكن من الكتابة، وهو شائع الاستخدام مع الصّور المُصغّرة (thumbnails)، ويقوم هذا النظام الشبكي بتوزيع عناصر القوائم (<li>) بشكل مُتساوي على عرض الصفحة مهما كان حجم الشاشة، على عكسِ ما يفعل النظام الافتراضي باستخدام max-width لكل صفّ، حيث يُوزع الصنف large-block-grid-3 ثلاثة عناصر على عرض الصفحة في الشاشات الكبيرة، ويُمَكنك هذا النظام من تحديد عدد العناصر كيفما تشاء في الصفّ الواحد والجمع بين الأصناف الثلاثة small وmedium وlarge، والأصناف تُطبق على قائمة غير مرتبة <ul>.

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

عرض الصور في الشاشات الكبيرة والمتوسطة والصغيرة سوف يظهر كما في الصور اللاحقة وهي على الترتيب، أما بالنسبة للشيفرة فسوف نستخدم ثلاثة أصناف هي كالتّالي:

• الصنف large-block-grid-4 يعرض أربعة عناصر بجانب بعضها البعض في الشاشات الكبيرة.
• الصنف medium-block-grid-3 يعرض ثلاثة عناصر بجانب بعضها البعض في الشاشات المتوسطة.
• وأخيرًا الصنف small-block-grid-2 يعرض عنصرين فقط بجانب بعضهم البعض في الشاشات الصغيرة.

الشيفرة بشكلها الأخير المُستخدمة في صفحة المعرض ستكون على النحو التّالي:

    <div class="row">
      <div class="large-12 columns">
        <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
          <li><a href="img/th1.jpg" class="th"><img src="img/th1.jpg"></a></li>
          <li><a href="img/th2.jpg" class="th"><img src="img/th2.jpg"></a></li>
          <li><a href="img/th3.jpg" class="th"><img src="img/th3.jpg"></a></li>
          <li><a href="img/th4.jpg" class="th"><img src="img/th4.jpg"></a></li>
          <li><a href="img/th5.jpg" class="th"><img src="img/th5.jpg"></a></li>
          <li><a href="img/th6.jpg" class="th"><img src="img/th6.jpg"></a></li>
          <li><a href="img/th7.jpg" class="th"><img src="img/th7.jpg"></a></li>
          <li><a href="img/th8.jpg" class="th"><img src="img/th8.jpg"></a></li>
        </ul>
      </div>
    </div>

أصناف الظهور Visibility Classes

تُقدم أصناف الظهور إمكانية إظهار أو إخفاء مُحتوى مُعين بناءً على معايير عدّة مثل حجم الشاشة واتجاه الجهاز هل هو في الوضع العموديّ (portrait) أم الأفقيّ (landscape) وهل تعمل شاشة الجهاز باللمس أم لا.

الأصناف المُستخدمة في التحكم بالظهور سهلة الحفظ والاستخدام، فلإظهار المُحتوى للشاشات الصغيرة سوف نستخدم الصنف show-for-small-only، ولإظهار المُحتوى للشاشات المُتوسطة والأكبر سنستخدم الصنف show-for-medium-up، وللإخفاء استخدم الكلمة show بدل hide، حيثُ سيُخفي الصنف hide-for-small-only المُحتوى للشاشات الصغيرة فقط.

وللتحكم بالظهور بناءً على اتجاه الشاشة نستخدم الصنفين show-for-landscape وshow-for-portrait، وللشاشات اللمسية نستخدم الصنفين show-for-touch وhide-for-touch.

في متجرنا وفي صفحة المُنتج بالتحديد، لدينا نُبذة عن المُصور ووسائل الاتصال الخاصة به، من بريد الكتروني ورقم هاتف. ما نريده هو عدم ظهور رقم الهاتف في الأجهزة اللوحية وأجهزة سطح المكتب، والابقاء على الرقم في أجهزة الجوّال، ولتحقيقِ ذلك سوف نستخدم الصنف hide-for-medium-up.

     <h2>About the photographer</h2>
      <p>Mohamad Abras is the best photographer on earth.</p>
      <p><a href="mailto:mohamad.abras@sawrha.com">Email me</a></p>
      <p class="hide-for-medium-up"><a href="tel:+33333333">Call me</a></p>

http://codepen.io/anon/pen/PwWXZv

أصناف الظهور ملائمة جدًا للتحكم بالمُحتوى الكتابي، ولكنها ليست مناسبة للتحكم بالصور، فعلى الرّغم من أنّك تستطيع استخدام الصنف hide-for-small-only مع صورة ما، فإنّ هذه الصورة سوف تُنزّل في الخلفيّة وستُحسب تكلفة حجمها المستخدم رغم عدم ظهورها على المتصفح، قد يُغريك سهولة التعامل مع هذه الأصناف ولكن المُطوّر المُحترف سوف يتعاملُ مع هذه المُشكلة باستخدام مفهوم "التبادل" (Interchange) والذي قدّمه Foundation في الإصدار الخامس والذي سوف نتحدث عنه في الجزء الأخير من السلسلة.

مُلاحظة بإمكانك اختبار اتجاه الجهاز وشاشة اللمس باستخدام محاكي أدوات المُطوّرين الخاص بالمتصفح Chrome.

تعرفنا من خلال الجزء الثاني من السلسلة على كل ما يتعلق بالنظام الشبكي، بعد الانتهاء من هذا الجزء وتطبيق بعض الأمثلة العمليّة من المُفترض أن تكون على درايةٍ كاملةٍ بالنظام الشبكي في Foundation، وفي الجزء الثالث من السلسلة سوف نتعرف على كل ما بتعلق بنظام التنقل (navigation)، بدءًا من الشريط العلوي وانتهاءً بتجزئة المحتوى على صفحات (pagination).