A framework for designers and LESS typing
Presnsr is a framework created with designers in mind. The sintax is somewhat similar to Bootstrap, so if you have some experience with it, will be a breaze for you.
The idea behind Presnsr, is short class typing when assigning classes and quick customization using your brand's design handout.
Any questions, suggestions or issues, please send me an email at javidx@gmail.com.
If you have used Bootstrap in the past, you will have basically no learning curve entering into Presnsr. ### Responsive classes in general As for responsive classes, there are two ways to make things responsive: 1. By adding the `res` class, which will make the element targeted, responsive across all sizes 2. By using the `res-lg`, `res-md` or `res-sm` class to point to a single viewport size, similar to the responsive Bootstrap classes
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:
for responsive classes, there are two ways to make things responsive: 1. By adding the `res` class, which will make the element targeted, responsive across all sizes
2. By using the `res-lg`, `res-md` or `res-sm` class to point to a single viewport size, similar to the responsive Bootstrap classes
3. Grids can be assigned by using `g` on the parent element and assigning `g-#`. To make the grids responsive, use the classes `res-lg`, `res-md` or `res-sm`. For column offets, use the tag `.go-#`. The number of columns goes up to 12.
Example
1. 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 from git@github.com:wickathou/presnsr-css.git
2. Download the presnsr.less and put it whenever you like on the your project's folder
3. 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:
If you want to install it in your project, follow the LESS guide HERE
Using CSS is the hardest way to use Presnsr, I don't recommend it, I don't have documentation for it either.
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.