mesh (pronounced /meʃ/) is an open source pure CSS framework for building and wireframing websites efficiently.
Unlike other frameworks, you can use mesh without detracting from the unique visual signature of a website,
whilst still being able to add components to accelerate your workflow.
It has a modular approach to a responsive layout system. You can define containers, rows and columns and set
their size
independent of the screen width. Five breakpoints let you sculpt your site to different screen sizes and an easy
naming system makes it ideal for beginners or patrons of the web.
mesh has huge amounts of utility classes to help you along the way. Responsive text, responsive width & height
classes, border spacers and helper classes and a lot more.
Download
mesh comes in three different flavours. You can select which version you want depending on your expertise and
preference. To get going, click on one of the options below.
meshBuilder:
meshBuilder is an extremely powerful tool allowing you to set variables before downloading the compiled
CSS. You can adjust a vast amount of different variables to suit your needs, including but not limited
to:
Layout breakpoints, colors (and attributes), spacing sizes (padding & margin), position properties,
font sizes and more.
Not only that, but you can choose to eliminate any utilities or components you may not use in your
project. This ultimately makes things faster and your css becomes even smaller without the
need to download our scss files.
meshCSS:
This is the standard version that comes with minified and unminified versions of mesh, including mesh
layout, which is a barebones css file with flex, order & display. Choose this option if you have no
familairty with Sass.
meshSaas:
This is the uncompiled scss version of mesh, you need a way to compile Sass files if you choose this
option, however, you will be able to modify the contents of mesh by changing variables and various other
components.
A note about JS
We realise everything can't be done in CSS & somethings are best done with JavaScript. Which is why we have
included example usage with our specific JS components. This makes things easier if you are using a front-end
framework or want to write your own code, but if you dont fancy that, just use ours!
Of course, where there is a CSS alternative we have also provided that too, mainly through the use of checkboxes
to show & hide components.
