This is part three of the tutorial series about setting up a simple website using Silex 2, Twig and PureCSS. In case you missed part one or part two read up and visit this part again. In the third, part we will add a visual layer over the site using PureCSS. This wil also be the last part since Sensio Labs wil stop Silex development in 2018.
Adding the PureCSS library
In this project, we are implementing PureCSS library, because it is a lightweight library, like Silex. And second, because we can prototype quickly using the defaults, to make our site look better, without having an actual design. We start with adding the PureCSS library via the unpkg.com CDN, by adding the reference at the end of the <head> section, noting fancy. Unpkg.com servers all files from NPM packages, as a CDN server, it's a fast way to serve static libraries.
<head>
…
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
</head>
Next, we set up our grid by adding a class to the <body> and by wrapping our navigation and content areas in their own container. In the example, I omit the existing code, for readability:
<body class="pure-g">
<nav class="pure-u-1">
<ul>…</ul>
</nav>
<div class="main pure-u-3-5">
{% block main %}…{% endblock %}
</div>
</body>
We add the pure-g class to the body, to set the grid on our page. Next, we add the pure-u-1 class to the <nav> element to make it full width, read more about that in the docs. for the <div> we add the main class for semantic reasons, and for styling later. The main area will be 3 out of 5 columns by adding the pure-u-3-5 class.
So far so good, using classes for layout is debatable, but for prototyping is pretty useful, because it lets you build your layout fast.
Next, we set up the menu bar, we also add the site name to the bar, so that the users will recognise our site. The main this is adding classes to all the elements involved, as stated in the docs.
<nav class="pure-u-1 pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">Hello Kittens</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a class="pure-menu-link" href="{{ path('home')}}">home</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="{{ path('kittens')}}">more kittens</a></li>
<li class="pure-menu-item"><a class="pure-menu-link" href="{{ path('about')}}">about</a></li>
</ul>
</nav>
The class names are pretty descriptive, all elements get their function described by the class name. The menu style is set to horizontal by the pure-menu-horizontal class. If you add the classes to the navigation and reload, you already see the menu becoming a horizontal bar, with the site name showing aswell.
The main container is already 3 columns, but it is aligned to the left, as elements by default are, in a real setup. To align the container in the middle, we need to add custom styling. We organise our styling in a separate file, which we add after the reference to the PureCSS library. The CSS will be stored in the /web/css directory, in Symfony based apps, the web directory is used to store static assets like styling and images:
<link rel="stylesheet" href="/web/css/style.css">
To align the main container, we only have to set the margins:
.main {
margin: 0 auto;
}
Next, to make the menu stand out a bit more, we add some styling to our style.css:
.pure-menu {
background-color: #333;
}
.pure-menu-heading {
float: left;
}
.pure-menu-list {
float: right;
}
If you now reload the page, you will see a basic design added to our simple cat site. See the progress thus far on Github. The grid we added is the default simple grid by PureCSS, you can(and should) use the responsive grid, or generate your own. I hope this series helped you get started with Silex, since Silex will stop to be, I encourage you to switch to Symfony 4 when it's released.