يعد هذا الإطار النحيف طريقة رائعة للحصول على صفحات ويب جذابة دون الكثير من المتاعب.

CSS هي تقنية تصميم قوية في كل مكان ولكن قد يكون من الصعب العمل معها. هذا هو سبب توفر أطر عمل CSS مثل TailwindCSS والمعالجات الأولية مثل Less CSS و Sass.

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

تثبيت Pico CSS في مشروعك

الطريقة الأكثر شيوعًا لتشغيل Pico CSS وتشغيلها في مشروعك هي استخدام ملف شبكة توصيل المحتوى (CDN). يتوفر Pico CSS على jsDelivr CDN ، لذلك كل ما عليك فعله هو الإشارة إلى ملف pico.min.css ملف مستضاف هناك:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>

بدلاً من ذلك ، يمكنك تثبيت Pico CSS باستخدام ملف مدير حزمة العقدة. لكي تعمل هذه الطريقة ، تأكد من تثبيت Node.js على جهازك. يمكنك تأكيد توفر Node.js على جهازك عن طريق تشغيل:

node -v
instagram viewer

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

npm install @picocss/pico

إنشاء موقع على شبكة الإنترنت باستخدام Pico CSS

عند إعداد تخطيط موقع الويب الخاص بك ، يوفر لك Pico CSS فئتين ، حاوية و شبكة. قم بإنشاء مجلد جديد وفي هذا المجلد ، قم بإنشاء ملف index.htm ملف و style.css ملف. في ال index.htm ملف ، أضف التعليمات البرمجية المعيارية التالية:

html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<metaname="viewport"content="width=device-width, initial-scale=1" />
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
 />
<linkrel="stylesheet"href="style.css" />
<title>Pico Websitetitle>
head>
<body>
<divclass="container">
<h1>Articles Worth Reading...h1>
div>
body>
html>

نظام شبكة بيكو CSS

يعد نظام الشبكة في Pico CSS مجرد عظام. يمكنك تحديد شبكة بامتداد شبكة فصل. في Pico CSS ، تنهار أعمدة الشبكة على الأجهزة التي يقل عرضها عن 992 بكسل.

الحق أسفل h1 علامة في جسم التابع index.htm ملف ، قم بإنشاء شبكة بأربعة أعمدة.

<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>

كل شعبة في الشبكة يجب أن تحتوي على فئتين: حاوية و بطاقة. ال حاوية class هي فئة Pico CSS أصلية تتيح منفذ عرض مركزي. بعد ذلك ، املأ الشبكة ببعض نماذج المحتوى مثل هذا:

<divclass="grid">
<divclass="container card">
<img
 src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
 />
<h4class="title">Why do birds sing in the morning?h4>
<divclass="metadata">
<span>David Uzonduspan>
<span>13 Minutes agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
 />
<h4class="title">The Secret Life of Ducklingsh4>
<divclass="metadata">
<span>Sam Hollandspan>
<span>53 Minutes agospan>
div>
div>


<divclass="container card">
<img
 src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
 />
<h4class="title">NASA's New Mission: Sending Flat-Earthers to 
 Edge of Earth to Prove Them Wrongh4>
<divclass="metadata">
<span>Simon Petersonspan>
<span>1 hour agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
 />
<h4class="title">Local Grandma Wins International Hip-Hop Dance Battle, 
 Proves Age is Just a Numberh4>
<divclass="metadata">
<span>Anonymousspan>
<span>2 days agospan>
div>
div>
div>

للتعامل مع التصميم ، افتح ملف style.css ملف وإضافة ما يلي:

img {
width: 100%;
background-size: cover;
border-radius: 10px;
height: 200px;
}
.card {
background-color: rgb(244, 244, 244);
border-radius: 10px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}


.card:hover {
transform: scale(1.03);
}


.metadata {
margin-top: -30px;
margin-bottom: 10px;
}


.title {
margin-top: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


.metadata {
font-size: 14px;
}
span:nth-child(1)::after {
content: " -";
}

عند فتح الصفحة في المتصفح ، يجب أن ترى ما يلي:

كيفية استخدام الأزرار في Pico CSS

تقدم Pico CSS مجموعة متنوعة من عناصر ومكونات HTML المصممة مسبقًا. يعد الزر أحد أكثر العناصر شيوعًا في أي موقع ويب.

تقليديًا ، تعرض المتصفحات المختلفة الأزرار بشكل مختلف قليلاً. ال زر عنصر في Pico CSS يُنشئ زرًا بتصميم متسق عبر المتصفحات. لاستخدامه ، ما عليك سوى إضافة زر العنصر كالمعتاد:

<button>This is a buttonbutton>

بشكل افتراضي ، في Pico CSS ، تشغل الأزرار عرض الحاوية بالكامل. إذا لم يعجبك هذا السلوك ، فتأكد من تعيين ملف دور السمة على عنصر HTML مضمّن إلى "زر":

<ahref="https.//www.google.com"role="button">Go To Googlea>

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

<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>

سيؤدي الرمز أعلاه إلى ما يلي:

يمكن أن تكون تلميحات الأدوات صعبة التنفيذ ، لكن Pico CSS تعتني بذلك. يجعل من السهل إنشاء تلميح أداة على أي عنصر دون الحاجة إلى أي JavaScript خيالي. عند إنشاء تلميح في Pico CSS ، هناك سمتان تحتاج إلى استخدامهما:

  • تلميح البيانات: هذا يعرّف محتويات التلميح.
  • وضع البيانات: هذا يحدد موضع التلميح. يمكنك تعيين هذه السمة إلى واحدة من أربع قيم: "أعلى" و "يمين" و "أسفل" و "يسار".

يوضح لك الكود التالي كيفية استخدام هذه الأداة:

<buttondata-tooltip="Top"data-placement="top">Topbutton>
<buttondata-tooltip="Right"data-placement="right">Rightbutton>
<buttondata-tooltip="Bottom"data-placement="bottom">Bottombutton>
<buttondata-tooltip="Left"data-placement="left">Leftbutton>

عند تشغيله في المتصفح ، يجب أن ترى ما يلي:

الأكورديونات في Pico CSS

تتيح الأكورديونات للمستخدمين تبديل رؤية أقسام المحتوى عن طريق توسيعها أو طيها ، على غرار الطريقة التي تتوسع بها آلة موسيقية أكورديون وتتقلص. لتنفيذ هذه الوظيفة في Pico CSS ، استخدم ملحق تفاصيل عنصر:

<details>
<summary>This is an accordionsummary>
<p>
 Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
 arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
 mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
 iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
 vulputate integer elit sodales? Egetnunc pellentesque eu eget
 consequat condimentum praesent nec auctor sapien luctus at, donec ac
 ex sit magna amet in.
p>
details>

عندما يعرض المستعرض هذا الترميز ، يجب أن يوفر وسيلة لإظهار المحتوى أو إخفائه ، في هذه الحالة ، سهم القائمة المنسدلة:

متى يجب عليك استخدام CSS Framework

يمكن أن تساعدك أطر عمل CSS في تبسيط عملية إنشاء وتصميم تطبيق الويب. يجب أن تفكر في استخدام إطار عمل CSS إذا كنت تريد توفير الوقت في المهام المتكررة والاستفادة من المكونات المبنية مسبقًا.

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