Superilles Grid System
Superilles is a grid system specifically designed for editorial websites (newspapers, media, magazines, etc). It uses CSS Grid Layout Module.
Grid design is heavily inspired by Barcelona's superilles. A superilla (superblock in english) is a model of mobility that restructures the typical urban road network. Superblocks are made up of a grid of basic roads forming a polygon, some 400 by 400 meters, with both interior and exterior components. I love Barcelona so I decide to apply this concept to grid design for the web.
The grid is composed of a predetermined number of superblocks. The size of each superblock is predetermined and changes according to the viewport. So we would have superblocks of different sizes based on the devices used.
|Breakpoints||Colonne||Grid Gap (px)||Superblocks (px)|
Example of Grid and Superblocks designed for XL Devices (1200px +)
On the basis of this grid I have designed several grid templates defining specific areas based on the use being made. The following grid templates are included:
- Headlines Medium
- Headlines Mosaic
Each template uses a predetermined number of lines. New templates will be developed soon.
Superilles uses a number of open source projects to work properly:
- Nunjucks - HTML enhanced for web apps!
- node.js - evented I/O for the backend
- Gulp - the streaming build system
And of course Superilles itself is open source with a [public repository][dill] on GitHub.
Superilles requires Node.js v4+ to run.
Clone repo from github:
$ git clone email@example.com:zetareticoli/superilles.git
Install the dependencies and devDependencies and start the server:
$ cd superilles $ npm install -d $ gulp
Want to contribute? Great! Create an issue