המסגרת הדקיקה הזו היא דרך מצוינת להשיג דפי אינטרנט אטרקטיביים בלי הרבה טרחה.

CSS היא טכנולוגיית סטיילינג חזקה בכל מקום, אך היא עשויה להיות קשה לעבוד איתה. זו הסיבה לכך שמסגרות CSS כמו TailwindCSS ומעבדי קדם כמו Less CSS ו-Sass זמינות.

אבל לפעמים, מסגרות אלה או "טעמים" של CSS עשויים להיות מוגזמים עבור הפרויקט שאתה עובד עליו. לפעמים, אתה רוצה מסגרת שמציעה תכונות חיוניות לעיצוב האתר שלך. כאן נכנס לתמונה Pico CSS. Pico היא מסגרת CSS מינימלית שמקלה על עיצוב רכיבי HTML מקוריים.

התקנת Pico CSS בפרויקט שלך

הדרך הנפוצה ביותר להפעיל את Pico CSS בפרויקט שלך היא להשתמש ב-a רשת אספקת תוכן (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

אם Node.js זמין, הטרמינל יציג את הגרסה שלו. אם זה לא מותקן אצלך,

instagram viewer
אתה יכול ללמוד כיצד להפעיל את Node.js במחשב שלך. התקן את Pico CSS על ידי הפעלת:

npm install @picocss/pico

יצירת אתר עם Pico CSS

בעת הגדרת הפריסה עבור האתר שלך, Pico CSS מספקת לך שתי מחלקות, מְכוֹלָה ו רֶשֶׁת. צור תיקיה חדשה ובתיקייה זו, צור קובץ index.htm קובץ וא style.css קוֹבֶץ. בתוך ה index.htm קובץ, הוסף את קוד ה-boilerplate הבא:

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>

מערכת Pico CSS Grid

מערכת הרשת ב-Pico CSS היא די חשופה. אתה יכול להגדיר רשת עם ה רֶשֶׁת מעמד. ב-Pico CSS, עמודות הרשת קורסות במכשירים עם רוחב מתחת ל-992 פיקסלים.

ממש מתחת ל h1 תג ב- גוּף של ה index.htm קובץ, צור רשת עם ארבע עמודות.

<divclass="grid">
<div>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 מוטבע ל-"button":

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

ב-Pico CSS, אם תגדיר אריה-עסוק כדי "נכון" על כל אלמנט, זה יוסיף אוטומטית מחוון טעינה. ייתכן שתמצא תכונה זו שימושית אם ברצונך לתקשר למשתמש שאלמנט כלשהו אינו מוכן עבורו לקיים איתו אינטראקציה, או שהדפדפן מביא משאב כלשהו.

<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

מסגרות CSS יכולות לעזור לך לייעל את תהליך הבנייה והעיצוב של אפליקציית אינטרנט. כדאי לשקול להשתמש במסגרת CSS אם ברצונך לחסוך זמן במשימות חוזרות ולמנף רכיבים שנבנו מראש.

מסגרות מספקות קבוצה של סגנונות CSS, רשתות פריסה ורכיבים שתוכננו מראש, המאפשרות לך להתמקד בלוגיקה ובפונקציונליות של היישום. מסגרות CSS רבות מגיעות עם תיעוד נרחב ותמיכה קהילתית שיועילו למקרה שאי פעם תתקעו.