P-reset NPM | npm.io

(P)reset

A simple, lightweight LESS Framework.

(More info and better docs soon)

Vars

Var	Function
Fonts
@bodyfont	Font used in general text.
@titlefont	Font for titles (h1 / h3 / h5).
Shades
@white / @lightgray / @gray / @black
@background	Background color.
@color	Text color.
Colors
@accent	The main color. Used in buttons/inputs, .info/.message boxes and titles.
@compl	Complementary color.
@success / @error / @warn	Colors for .info/.message boxes and buttons/inputs.
Sizes
@basefont	General font size.
@baseline	General
@navheight	Height for the nav menu.
@pagePadding	@baseline * 6;
@pagePadding--tablet	@baseline;
@pagePadding--phone	@baseline / 2;
Others
@laptop / @tablet / @phone	Media Query Breakpoints.
@cubic-bezier	Main easing function.
@brad	Main border-radius. Used in buttons/inputs and .info/.message boxes.

Columns / Grid

So, columns.

All you need is an element with a .row-(n) class (in this case, the default is .row-12), and inside, the .col-(n) elements. In case you need gutters, wrap it all inside a .gutt.

Default Breakpoints

Var	Class	Media Query
	`.col-(n)`
@tablet	`.col-sm-(n)`	max-width: 900px
@phone	`.col-xs-(n)`	max-width: 600px

Examples

Without Gutters

<div class="row-12">
	<div class="col-sm-12 col-4">
		I'm full-width on tablets and phones, and 1/3 on bigger screens.
	</div>
	<div class="col-xs-12 col-sm-6 col-4">
		We're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.
	</div>
	<div class="col-xs-12 col-sm-6 col-4">
		We're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.
	</div>
</div>

With Gutters

<div class="gutt">
	<div class="row-12">
		<div class="col-sm-12 col-4">
			I'm full-width on tablets and phones, and 1/3 on bigger screens.
		</div>
		<div class="col-xs-12 col-sm-6 col-4">
			We're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.
		</div>
		<div class="col-xs-12 col-sm-6 col-4">
			We're full-width on phones, 1/2 on tablets, and 1/3 on bigger screens.
		</div>
	</div>
</div>

Note that the idea behind (P)reset is to tweak it to better serve your needs.

So if, for example:

12 columns are not enough;
The gutters are not the size you wanted;
You could use one or two more breakpoints, or change when the current ones are triggered;
... feel free to change it! (Cool, but ... How?)

Also, keep in mind that, unlike other frameworks (i.e. Bootstrap), this grid layout is not mobile-first. So only the col- size is required, instead of the mobile (col-xs-) size.

Classes

Class	Function
.shadow	Adds a box shadow to the element.
.input	Styles an element like an input.
.button / .btn	Styles an element like a button.
.big	Make the button bigger.
.hover	Style the button as it was hovered.
.no-shadow	Removes shadow from the button.
.active	Style the button as it was active.
Colors
.border-(color)	Change the border color of an element. (i.e. '.border-black')
.color-(color)	Change the text color of an element. (i.e. '.color-white')
.bg-(color)	Change the background color of an element. (i.e. '.color-acc')
Fonts
.font-title	Change the element's font to the @titlefont.
.font-body	Change the element's font to the @bodyfont.
Text Aligns
.talignleft	Align the elements text to the left.
.taligncenter	Align the elements text to the center.
.talignright	Align the elements text to the right.
Margins / Paddings
.page-padding
.page-margin
.no-padding	Removes all padding from an element.
.no-margin	Removes all margins from an element.
.padding	Adds a padding of @baseline to the element.
.padding-half	Adds a padding of (@baseline / 2) to the element.
.padding-sides	Adds a padding of @baseline to the left and right sides of the element.
.padding-ends	Adds a padding of @baseline to the top and bottom sides of the element.
Media Hides
.laptop-hide	Hide the element on laptops (and above).
.tablet-hide	Hide the element on tablets (and below).
.phone-hide	Hide the element on phones.
Width
.full-width / .width-100	Set the element's width to 100%.
.half-width / .width-50	Set the element's width to 50%.
Border Radius
.brad / .b-rad	Set the element's border-radius to the value defined in `vars.less`
Info / Message
.info / .message
.warn / .warning
.yes / .accept / .success / .succ
.no / .cancel / .error / .err

Useful Tweaks

TODO

Footer - Always on bootom fix
Add tooltips
Add saturation var to .shadow()
Test something like ~'(min-width: @tablet + 1)'
Change table styles
Change the god damn .info class to something else
Consider adding a, a:link, a:visited, a:focus, a:hover, a:active{ color: inherit; } :not(nav){ a, a:link, a:visited, a:focus, a:hover, a:active{ text-decoration: none; } }
Add WordPress Gallery Support

@everything-registry/sub-chunk-2396 @infinitebrahmanuniverse/nolb-p-

1.1.0

7 years ago

1.0.0

8 years ago