مقارنة مرئية لـ 13 إطار عمل CSS

يوم جيد ، أيها الأصدقاء!



أوجه انتباهكم إلى نتائج دراسة صغيرة - مقارنة مرئية لـ 13 إطار عمل CSS.



الهدف من البحث هو تحديد إطار العمل الذي يقوم بأفضل وظيفة مع التصميم الافتراضي ، أي بدون إضافة فئات خاصة (مقدمة من الإطار).



تقدم الدراسة الأطر التالية:

• التمهيد
• تجسد
• بولما
• مؤسسة
• متعلق بدلالات الألفاظ
• هيكل عظمي
• الريح الخلفية
• يويكيت
• نقي
• مليغرام
• شبح
• يتمركز
• النزهة

تم استخدام الإصدارات التالية من الأنماط:

• التمهيد - stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
• تجسيد - cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
• بولما - cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css
• المؤسسة - cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css
• الدلالية - cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
• هيكل عظمي - cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css
• Tailwind - cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.2/tailwind.min.css
• يوكيت - cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css
• نقي - unpkg.com/purecss@2.0.3/build/pure-min.css
• مليغرام - cdnjs.cloudflare.com/ajax/libs/milligram/1.4.0/milligram.css
• شبح - unpkg.com/spectre.css/dist/spectre.min.css
• القاعدة - unpkg.com/@getbase/base/core.css
• نزهة - cdn.jsdelivr.net/npm/picnic

يقدم ترميز الاختبار العناصر الرئيسية لصفحة الويب مع التركيز على العلامات الدلالية:

<header>
    <figure>
        <figcaption>logo</figcaption>
        <img src="logo.png" alt="logo">
    </figure>

    <nav>
        <a href="#">link1</a>
        <a href="#">link2</a>
        <a href="#">link3</a>
    </nav>
</header>

<hr>

<main>
    <h1>main title</h1>

    <aside>
        <h4>aside title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, quibusdam.</p>
    </aside>

    <section>
        <h2>section title</h2>

        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit, illum.</p>

        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>

        <table>
            <caption>table</caption>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </table>

        <dl>
            <dt>term</dt>
            <dd>Lorem <strong>ipsum</strong>, dolor sit <em>amet</em> consectetur adipisicing elit. <mark>Accusamus</mark>, obcaecati?</dd>
        </dl>

        <details open>
            <summary>summary</summary>
            <p><small>Lorem dolor sit amet ipsum, consectetur adipisicing elit. Explicabo, repellat?</small></p>
        </details>

        <button>button</button>
    </section>

    <article>
        <h3>article title</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, architecto?</p>

        <blockquote>Lorem ipsum dolor, sit amet <cite>consectetur adipisicing elit.</cite> Ipsam, ad!</blockquote>

        <code>
            console.log('hello world')
        </code>
    </article>
</main>

<hr>

<footer>
    <form action="#">
        <fieldset>
            <legend>form</legend>
            <label>name:
                <input type="text">
            </label>
            <label>email:
                <input type="email">
            </label>
            <input type="submit" value="subscribe">
        </fieldset>
    </form>

    <p>© 2020.</p>
</footer>

إليك ما يبدو عليه:









يمكنك التلاعب بالرمز هنا:







لا يسمح وضع الحماية بعلامة الرأس ، لذا مرحبًا بك في صفحات GitHub .



كود المشروع هنا .



نتائج البحث متوقعة تمامًا: Bootstrap هو الأول ، والتجسيد هو الثاني.



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



بدا الهيكل العظمي والنزهة واعدًا بالنسبة لي.



شكرآ لك على أهتمامك.