A framework created for designers and faster class typing.
Documentation
Demo
·
Report Bug
·
Request Feature
·
Make a Pull Request
Presnsr is a styling framework, designed to be simple, customizable and modular,created for graphic designers and UX/UI designers
This framework was developed with sintatical simplicity in mind, for fast front-end developers who don't want to type too much while declaring classes. The framework is developed with LESS and can be fully customized to your brand's guidelines.
It features a set of variables which can be defined based on your designer's font sizing guidelines and spacing requirements.
- You can check a website built using Presnsr following the link below
https://wickathou.github.io/presnsr-css/example.html
Made by Javier Hernandez wickathou Microverse @microverse
- LESS
Some knowledge of CSS could be good to understand how to use the classes appropiately. If you have experience with LESS, then it's not going to be anything new 🙂
I see two ways at this moment:
Using LESS
If you have some experience with CSS, I recommend you to use LESS. Don't worry, it is basically the same sintax as CSS and any CSS code is valid LESS code.
With LESS, you will be able to customize the variables super quick, without any extra coding required.
STEPS
-
Download less.js or less.min.js, both work and you don't have to make any changes. You can download it HERE or fork and clone the repo HERE
-
I recommend you to use LESS on the browser, that way you don't need to compile the LESS code to CSS. For that, first add in the
<head>tag of your HTML file:<link rel="stylesheet/less" type="text/css" href="YOUR-PATH-HERE/presnsr.less" />and<script src="YOUR-PATH-HERE/less.js" type="text/javascript"></script>or<script src="YOUR-PATH-HERE/less.min.js" type="text/javascript"></script>If you want to install it in your project, follow the LESS guide HERE -
Download the presnsr.less and put it whenever you like on the your project's folder
-
For the cheat sheet of classes you can use, check this LINK
Using CSS Not recommended, I don't have documentation for it
If you don't want to use LESS, you can still get things done with CSS only, but it might be super painful. If you have used bootstrap, then you might know that when you have many classes, making changes becomes a huge hassle.
If you have used Bootstrap in the past, you will have basically no learning curve entering into Presnsr.
Most of the logic with Presnsr is about making classes as short as possible, so in many cases that means just one initial. So for example, to indicate that an element is flex, you declare the class f, if you want to make the justify the contents in the center and align the items to the center, you declare:
<div class="f j-c-c a-i-c">
As for responsive classes, there are two ways to make things responsive:
-
By adding the
resclass, which will make the element targeted, responsive across all sizes -
By using the
res-lg,res-mdorres-smclass to point to a single viewport size, similar to the responsive Bootstrap classes -
Grids can be assigned by using
gon the parent element and assigningg-#. To make the grids responsive, use the classesres-lg,res-mdorres-sm. For column offets, use the tag.go-#. The number of columns goes up to 12.
At the moment I don't really have a fixed plan to continue developing as I'm busy on other projects but any time I make updates I'll be posting them here.
GNU 3.0 License
@wickathou - Javier Hernandez
Project Link: https://github.com/wickathou/presnsr-css