CSS Frameworks

Responsive page layouts that work well in both desktop and mobile environments can be created from scratch in CSS, but the process can be… frustrating.

CSS frameworks provide useful shortcuts to achieving an acceptable design. Bootstrap and Tailwind are popular choices, but we will focus here on a simpler framework, Pico CSS.

Pico CSS is distributed as a bundle of CSS files that can be served from your own web server, but a more convenient alternative is to load the stylesheet from a Content Delivery Network (CDN). This can reduce bandwidth costs and will allow users of your site to benefit from upstream caching.

Using Pico via a CDN can be as easy as including this in your document head:

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

This will give you a default colour theme. You will need to reference a different CSS filename if you want to use one of the other themes—see the Version Picker page and click on the theme colour of your choice to see how the filename should be changed.

You should also include the following in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">

The first of these metadata settings ensures a properly responsive layout on mobile devices. The second ensures that both light mode and dark mode stylings are available in your site.

Finally, you should use the following as the top-level element of the document, just inside the body element:

<main class="container">
  <!-- document content goes here -->
</main>

Task 2.3

1. Create an HTML file named pico.html. Put the ‘starter code’ described above in the file.

   Tip

   You can just copy the starter template from the Quick Start section of the Pico documentation if you like, but make sure you alter the link element so that it loads the Pico stylesheet from a CDN.

2. Add some content to the document. At minimum, this should include

   • Several paragraphs of text, including hyperlinks
   • h1 and h2 headings
   • A form, including a button

   You can add other elements (e.g., a table) if you wish.

   Open the document in a web browser to see what it looks like.

3. Experiment with customizing the elements, as described in the Pico documentation. For example, try using some of the alternative styles for links and buttons.

4. Experiment with changing the page layout. Try changing the class attribute of the main element to be container-fluid instead of container. Then try using a grid to create a two-column layout.

5. Finally, experiment with some of the special components provided by Pico, again using the documentation as your guide.

   (At minimum, look at the first four of the listed components, along with nav.)