Αυτό το λεπτό πλαίσιο είναι ένας πολύ καλός τρόπος για να αποκτήσετε ελκυστικές ιστοσελίδες χωρίς πολλή ταλαιπωρία.

Το 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 Package Manager. Για να λειτουργήσει αυτή η μέθοδος, βεβαιωθείτε ότι έχετε εγκαταστήσει το Node.js στον υπολογιστή σας. Μπορείτε να επιβεβαιώσετε τη διαθεσιμότητα του Node.js στον υπολογιστή σας εκτελώντας:

node -v

Εάν το Node.js είναι διαθέσιμο, το τερματικό θα εμφανίσει την έκδοσή του. Εάν δεν το έχετε εγκατεστημένο, μπορείτε να μάθετε πώς να θέσετε σε λειτουργία το Node.js στον υπολογιστή σας. Εγκαταστήστε το Pico CSS εκτελώντας:

npm install @picocss/pico

Δημιουργία ιστότοπου με το Pico CSS

Κατά τη ρύθμιση της διάταξης για τον ιστότοπό σας, το Pico CSS σάς παρέχει δύο κατηγορίες, δοχείο και πλέγμα. Δημιουργήστε έναν νέο φάκελο και σε αυτόν τον φάκελο, δημιουργήστε ένα ευρετήριο.htm αρχείο και α στυλ.css αρχείο. Στο ευρετήριο.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>

Σύστημα πλέγματος Pico CSS

Το σύστημα Grid στο Pico CSS είναι αρκετά γυμνό. Μπορείτε να ορίσετε ένα πλέγμα με το πλέγμα τάξη. Στο Pico CSS, οι στήλες πλέγματος συμπτύσσονται σε συσκευές με πλάτος κάτω από 992 εικονοστοιχεία.

Ακριβώς κάτω από το h1 ετικέτα στο σώμα απο ευρετήριο.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>

Για να χειριστείτε το styling, ανοίξτε το στυλ.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 συνοδεύονται από εκτενή τεκμηρίωση και υποστήριξη κοινότητας που θα σας φανούν χρήσιμα σε περίπτωση που κολλήσετε ποτέ.