Έχουμε μια ιστοσελίδα που ανταποκρίνεται σε όλα τα μεγέθη των οθονών(responsive).
Είναι γραμμένη πρώτα για κινητό(mobile first).
Όσο μεγαλώνει τοπ παράθυρο του browser έχουμε γράψει break points για να αλλάζουμε την δομή του περιεχομένου μας.
Το πρώτο είναι στα 768px και το δεύτερο στα 1024px.
- Τα αρχεία μας θα είναι ένα index.html
- Και ένα style.css
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ορίζουμε την κωδικοποίηση του αρχείου σε UTF-8 -->
<meta charset="UTF-8">
<!-- ορίζουμε το περιεχόμενο του αρχείου ως κείμενο/html -->
<meta http-equiv="Content-Type" content="text/html" />
<!-- ορίζουμε το πλάτος του παραθύρου του browser να προσαρμόζεται στο πλάτος της
συσκευής που προβάλετε, και την αρχική κλίμακα σε 1.0. Με λίγα λόγια
να μπορούμε να βλέπουμε την σελίδα σε κινητές συσκευές χωρίς περίεργα
zoom -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- θα χρησιμοποιήσουμε μια γραμματοσειρά απο τα google fonts -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet">
<!-- θα συνδέσουμε το css αρχείο με την σελιδα -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- θα συμπληρώσουμε τον τίτλο της σελίδας όπου θα φαίνετε στο tab του browser -->
<title>Responsive grid layout</title>
</head>
<body>
<!-- Το πρώτο element στην ιστοσελίδα μας θα είναι ο header(κεφαλίδα), όπου θα χωρίζεται
σε δύο στήλες, όταν η οθόνη είναι μεγαλύτερη απο 768px, θα έχουμε μια section
left και μια section right. -->
<header>
<section class="container inner-header">
<section class="left">
<!-- μέσα στο left section θέλουμε έναν τίτλο ένα υπότιτλο και μια παράγραφο
με κειμενο -->
<h1>Responsive grid layout</h1>
<h2>Κατεβάστε ελεύθερα τα αρχεία και φτιάξτε το δικό σας website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eius molestiae odio neque officia magnam quibusdam, atque vero quasi
tenetur voluptas repellendus quia consequatur velit delectus corporis laborum
totam corrupti! Veniam!</p>
</section>
<section class="right">
<!-- μέσα στο right section θέλουμε μια image με κείμενο απο κάτω και ενα
button buy now -->
<img src="images/avengers-3.jpg">
<p class="img-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Omnis, quaerat! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, cumque.</p>
<a class="button buy-btn" href="">Buy now</a>
</section>
</section>
</header>
<!-- μετά το header θα έχουμε την nav bar με τρία links μέσα
(αρχική,προϊόν,επικοινωνία), σε μικρές οθόνες(κάτω απο 768px) τα links θα είναι
στοιχισμένα στο κέντρο -->
<nav>
<section class="container inner-nav">
<ul>
<li><a href="#">Αρχική</a></li>
<li><a href="#">Προϊόν</a></li>
<li><a href="#">Επικοινωνία</a></li>
</ul>
</section>
</nav>
<!-- μετά την nav bar θα έχουμε δυο section με τρία προϊόντα το καθένα, το κάθε προϊόν
θα έχει μια φωτό με κείμενο απο κάτω το όνομα του προϊόντος απο πάνω και ενα
button για λεπτομέριες μετά τα 768px η μια στήλη που βλέπουμε σε μικρή οθόνη
θα μετατρέπεται σε τρείς-->
<h3 class="container section-title">Section one title</h3>
<section class="container products">
<!-- Προϊόν 1 -->
<div class="product">
<p class="name">Product 1</p>
<img src="images/ironman-2.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem maiores voluptates odio dolores enim iusto praesentium?
Voluptas totam dolorum nemo!</p>
<a class="button details" href="#">Λεπτομέριες</a>
</div>
<!-- Προϊόν 2 -->
<div class="product">
<p class="name">Product 2</p>
<img src="images/avengers-3.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem maiores voluptates odio dolores enim iusto praesentium?
Voluptas totam dolorum nemo!</p>
<a class="button details" href="#">Λεπτομέριες</a>
</div>
<!-- Προϊόν 3 -->
<div class="product">
<p class="name">Product 3</p>
<img src="images/spiderman-2.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem maiores voluptates odio dolores enim iusto praesentium?
Voluptas totam dolorum nemo!</p>
<a class="button details" href="#">Λεπτομέριες</a>
</div>
</section>
<h3 class="container section-title">Section two title</h3>
<section class="container products">
<!-- Προϊόν 1 -->
<div class="product">
<p class="name">Product 1</p>
<img src="images/avengers-3.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem maiores voluptates odio dolores enim iusto praesentium?
Voluptas totam dolorum nemo!</p>
<a class="button details" href="#">Λεπτομέριες</a>
</div>
<!-- Προϊόν 2 -->
<div class="product">
<p class="name">Product 2</p>
<img src="images/spiderman-2.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem maiores voluptates odio dolores enim iusto praesentium?
Voluptas totam dolorum nemo!</p>
<a class="button details" href="#">Λεπτομέριες</a>
</div>
<!-- Προϊόν 3 -->
<div class="product">
<p class="name">Product 3</p>
<img src="images/ironman.jpg">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatem maiores voluptates odio dolores enim iusto praesentium?
Voluptas totam dolorum nemo!</p>
<a class="button details" href="#">Λεπτομέριες</a>
</div>
</section>
<!-- τέλος θα έχουμε το footer όπου θα χωρίζεται σε τέσσερις στήλες με διάφορα links
η κάθε μία. Εδω τα page breaks που θα έχουμε είνα στα 768px και στα 1024px
Στα 768px θα έχουμε 2 στήλες και στα 1024px 4 στήλες. -->
<footer>
<section class="container inner-footer">
<!-- κάθε div είναι και μια στήλη -->
<div>
<p>Lorem ipsum <span class="em">dolor sit amet, consectetur adipisicing elit</span>.
Aperiam officiis, labore repellendus numquam explicabo corrupti commodi,
necessitatibus dolor ducimus molestiae quam, expedita nihil eligendi,
ad odio praesentium. Ea quas quis harum, eum aliquam adipisci.</p>
<div class="links-group">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>
</div>
<!-- Στήλη 2 -->
<div>
<p class="name">product 1</p>
<img src="images/avengers-3.jpg">
<div class="links-group">
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>
</div>
<!-- Στήλη 3 -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam officiis,
labore repellendus numquam explicabo corrupti commodi, necessitatibus dolor
<span class="em">ducimus molestiae quam, expedita nihil eligendi</span>, ad odio
praesentium. Ea quas quis harum, eum aliquam adipisci officiis, atque, asperiores
accusantium dolorum debitis.</p>
<div class="links-group">
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>
</div>
<!-- Στήλη 4 -->
<div>
<p class="name">product 1</p>
<img src="images/spiderman-2.jpg">
<div class="links-group">
<a href="#">link 2</a>
<a href="#">link 3</a>
</div>
</div>
</section>
</footer>
</body>
</html>
style.css
/* Όλο το περιεχόμενο είναι γραμμένο πρώτα για κινητό και
μετά με media queries θα το προσαρμόζουμε σε κάθε αλλαγή της
οθόνης */
/* κάνουμε ένα reset στο padding και margin σε όλα τα elements
για να δώσουμε τις δικές τιμές σα κάθε στοιχείο(element)*/
*{
box-sizing: border-box; /* info link στο τέλος */
padding: 0; /* είναι ο 'αέρας' του υλικού μέσα σε κάθε element */
margin: 0; /* είναι ο εξωτερικός 'αέρας' γύρο από κάθε element */
}
/* ορίζουμε για όλα τα html στοιχεία την γραμματοσειρά
και το χρώμα της */
body, html{
font-family: Ubuntu, 'sans-serif';
color: #333;
}
/* όλο το περιεχόμενο της σελίδας βρίσκεται σε ένα container
στο οποίο ορίζουμε... */
.container{
max-width: 1200px; /* .. το μέγιστο πλάτος να είναι 1200px */
margin: 0 auto; /* .. να είναι στο κέντρο του browser */
padding: 20px; /* .. και ο εσωτερικός 'αέρας' απο το υλικό 20px */
/* Το padding 20px θα αποτρέψει το υλικό να ακουμπάει στα άκρα
του browser, στις μικρές οθόνες */
}
/* λέμε στις images να παίρνουν το μέγεθος του
container που βρίσκονται */
img{
max-width: 100%;
}
a{ /* δεν θέλουμε κανενα εξ ορισμού στυλ στα links */
text-decoration: none;
}
/* Ορίζουμε ενα γενικό στυλ για όλα τα buttons.
Δεν χρειάζεται να είναι <button> μπορεί να είναι ενα <a class='button'> */
.button, button{
display: inline-block;
padding: 10px 30px;
border-color: #333;
border-style: solid;
border-width: 1px;
}
/* Header */
/* ================================= */
/* Το header είναι το πρώτο στοιχείο της σελίδας μας
θα του δώσουμε το πλάτος όλου του browser, ενα φόντο μαύρο
και θα Στοιχίσουμε το περιεχόμενο στο κέντρο */
header{
width: 100%;
background-color: #000;
text-align: center;
}
/* όλο το περιεχόμενο του header βρίσκεται εδώ */
.inner-header{
display: grid; /* θα το προβάλουμε ως grid(πλέγμα) */
grid-template-columns: 1fr; /* θα του δώσουμε μόνο μια στήλη γιατί
σχεδιάζουμε πρώτα για κινητό αυτό θα αλλάζει για μεγαλύτερες οθόνες*/
grid-row-gap: 50px; /* το grid παράγει αυτόματα σειρές για όσα
στοιχεία(απόγονοι πρώτου βαθ.) βρίσκονται μέσα, στην περίπτωση εδω δύο
το .left και το .right και του δίνουμε την απόσταση 50px που θα χωρίζει την μία
σειρά απο την άλλη. */
padding-top: 30px; /* θέλουμε εναν εσωτερικό 'αέρα' απο την κορυφή */
padding-bottom: 50px; /* και στην κάτω πλευρά */
color: #d4d4d4; /* το χρώμα της γραμματοσειράς */
}
.left h1{
font-size: 36px;
font-weight: 400;
}
.left h2{
font-size: 22px;
font-weight: 400;
margin-top: 20px;
}
.left p{
margin-top: 20px;
line-height: 22px;
}
.right .img-caption{
margin-top: 20px;
}
.right p{
line-height: 22px;
}
/* Εδω έχουμε το buy now button του header */
.right .buy-btn{
background-color: #1D8348;
color: #fff;
border: none;
margin-top: 30px;
}
.right .buy-btn:hover,
.right .buy-btn:focus{
background-color: #145A32;
}
/* Και φτάσαμε στο break point του header που λέμε ότι όταν το μεγεθος
του browser είναι 768px και πάνω θέλουμε να χωριστεί το περιεχόμενο
σε δυο στήλες και να προσθέσουμε ενα κενό των 50px αναμεσα τους*/
@media screen and (min-width: 768px){
.inner-header{
grid-template-columns: 1fr 1fr;
grid-column-gap: 50px;
}
}
/* navigation */
/* ============================ */
/* Εδω έχουμε το μενου πλοήγησης με τα links να βρίσκονται μέσα σε μια
λίστα όπου έχουμε ορίσει την προβολή της ως flexbox */
nav{
width: 100%;
background-color: #376e93;
}
.inner-nav{
padding: 0;
}
nav ul{
list-style-type: none;
display: flex; /* Ορίζουμε την λιστα ως flex */
flex-direction: row; /* θέλουμε όλα τα links σε μια σειρά */
justify-content: center; /* και στοιχισμένα στο κέντρο */
}
nav a{
display: inline-block; /* info στο τέλος */
padding: 15px 25px; /* δινουμε έναν 'αέρα' στα links */
color: #fff; /* και χρώμα ασπρο */
font-size: 15px; /* και μέγεθος σε 14px */
}
nav a:hover,
nav a:focus{
background-color: #193243;
}
/* όταν το μεγεθος του browser είναι 768px και πάνω τα links θα
στοιχίζονται στα αριστερά της μπάρας */
@media screen and (min-width: 768px){
nav ul{
justify-content: start;
}
}
/* section title*/
/* Έχουμε τον τίτλο κάθες ενότητας */
.section-title{
font-weight: 400;
margin-top: 40px;
padding-bottom: 5px;
border-bottom: thin solid #d4d4d4;
font-size: 22px;
text-align: center; /* στοίχιση στο κέντρο */
}
@media screen and (min-width: 768px){
.section-title{
text-align: left; /* στοίχιση στα αριστερά */
}
}
/* Products */
/* ========================================== */
/* Ίδια τακτική και με τα products δεν χρειάζεται να εξηγώ πάλι
για το grid και για τα διάφορα στυλ που έχουμε συναντήσει και
παραπάνω. */
.products{
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 50px;
margin-top: 20px;
}
.product{
text-align: center;
}
.product .name{
font-size: 18px;
margin-bottom: 15px;
}
.product .caption{
margin-top: 15px;
}
.product a.details{
margin-top: 20px;
border: none;
background-color: #376e93;
color: #fff;
font-size: 15px;
}
/* Kai όταν ο browser περάσει τα 768px οι στήλες θα γίνουν τρεις */
@media screen and (min-width: 768px){
.products{
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
}
.products img{
object-fit: cover; /* info στο τελος */
}
}
/* Footer */
/* ========================================== */
/* Ίδια τακτική και με το footer δεν χρειάζεται να εξηγώ πάλι
για το grid και για τα διάφορα στυλ που έχουμε συναντήσει και
παραπάνω. */
footer{
background-color: #222;
margin-top: 100px;
}
.inner-footer{
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 30px;
}
.inner-footer > div{
border-bottom: thin solid #333;
padding-bottom: 30px;
color: #d4d4d4;
}
.inner-footer > div:last-child{
border: none;
}
.inner-footer > div p{
line-height: 22px;
font-size: 15px;
margin-bottom: 20px;
padding-top: 30px;
}
footer .links-group{
text-align: center;
margin-top: 30px;
}
footer a{
/*color: #EDBB99;*/
color: #999;
font-size: 15px;
text-decoration: underline;
padding-right: 25px;
}
footer a:hover{
text-decoration: none;
}
footer img{
display: block;
width: 70%;
margin: 20px auto;
}
.inner-footer .name{
font-size: 16px;
text-align: center;
}
footer .em{
color: #BA4A00;
font-style: italic;
}
/* Στον footer έχουμε δυο break points το πρώτο στα 768px
όπου θέλουμε δυο στήλες */
@media screen and (min-width: 768px){
.inner-footer{
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 50px;
}
footer img{
width: 100%;
}
.inner-footer > div:nth-child(3){
border: none;
}
}
/* Και στο δεύτερο στα 1024px όπου θέλουμε να προβάλουμε 4 στήλες */
@media screen and (min-width: 1024px){
.inner-footer{
grid-template-columns: repeat(4, 1fr);
}
.inner-footer > div{
border: none;
}
}
Περισότερες πληροφορίες πάνω στίς CSS ιδιότητες που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.
Σχόλια και ερωτήσεις μέσω facebook