This week was our final week of HTML and CSS and we started off the class looking at CSS grids before implementing grids and other components into our Baskerville website to finish it.
https://github.com/rebekaheleonard/baskerville
We started off looking at fixed and flexible layouts on websites and how responsive the layout is to different screens. A fixed layout does not flow with devices as it does not adapt to screen resizing. This means a website build for laptop can look slightly weird on a mobile device. A flexible layout has flow and adapts to the page being minimised and maximised, today most HTML websites are created to be flexible. I personally prefer a flexible layout as allows you content to be viewed on different breakpoints such as phones, laptops and tablets of all different shapes and sizes with no accessibility problems.
Media Queries are used to help create these static and flexible website layouts on breakpoints. Although today most websites are made to be flexible, they can sometimes still look a little weird when minimised or viewed on a smaller breakpoint. To resolve this issue we use media queries in our CSS which look like the following:
@media only screen and (max-width: 900px) {
.gridimage {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
padding-bottom: 2em;}
h1 {
font-size: 4.5rem
}}
@media only screen and (max-width: 650px) {
h1 {
font-size: 3rem
}
header h2 {
font-size: 1.5rem
}
If an image has a long link, we can use ../ to retrieve the image file from the root. For example:
body {
background: #fff
url('../images/baskerville.jpg');
color: #333; }
Kerning is how spaced the letters are from one another with more uniform forms be appropriately spaced so they are pleasant to read. In HTML we can create a kerning class using the <span> tag and then add CSS to that tag to it looks how we want it to.
<p><span class ="tightkerning">J</span>ohn Baskerville </p>