pale-nav-logo

V.1.0.1-beta

close print
DisplayCSS
blockdisplay: block
nonedisplay: none
inblockdisplay: inline-block
inlinedisplay: inline
PositionCSS
relativeposition: relative
absoluteposition: absolute
fixedposition: fixed
WidthCSS
w100width: 100%
mw100max-width: 100%
wautowidth: auto
HeightCSS
h100height: 100%
mh100max-height: 100%
hautoheight: auto
ColorCSS
cblackcolor: black
cwhitecolor: white
cgraycolor: gray
Text-AlignCSS
txt-lefttext-align: left
txt-centertext-align: center
txt-righttext-align: right
txt-justifytext-align: justify
Text-TransformCSS
uppercasetext-transform: uppercase
lowercasetext-transform: lowercase
capitalizetext-transform: capitalize
Text-DocorationCSS
td-nonetext-decoration: none
underlinetext-decoration: underline
overlinetext-decoration: overline
throughtext-decoration: line-through
Line-HeightCSS
lh1line-height: 1
lh1-5line-height: 1.5
lh2line-height: 2
Letter-SpacingCSS
ls1letter-spacing: 1px
ls2letter-spacing: 2px
ls3letter-spacing: 3px
ls4letter-spacing: 4px
ls5letter-spacing: 5px
Font-weightCSS
fw200font-weight: light
fw400font-weight: normal
fw700font-weight: bold
fw900font-weight: black
FloatCSS
leftfloat: left
rightfloat: right
fl-nonefloat: none
Vertical-alignCSS
va-topvertical-align: top
va-middlevertical-align: middle
va-bottomvertical-align: bottom
va-basevertical-align: baseline
OpacityCSS
op02opacity: 0.2
op04opacity: 0.4
op06opacity: 0.6
op08opacity: 0.8
VisibilityCSS
vis-hiddenvisibility: hidden
OverflowCSS
of-autooverflow: auto
of-hiddenoverflow: hidden
of-scrolloverflow: scroll
x-autooverflow-x: auto
x-hiddenoverflow-x: hidden
x-scrolloverflow-x: scroll
y-autooverflow-y: auto
y-hiddenoverflow-y: hidden
y-scrolloverflow-y: scroll
Z-IndexCSS
z10z-index: 10
z50z-index: 50
z100z-index: 100
z999z-index: 999
CursorCSS
cdefaultcursor: default
cpointercursor: pointer
cautocursor: auto
cnacursor: not-allowed
cincursor: zoom-in
coutcursor: zoom-out
pale-res-logo
.nav {
  background: #eee;
  position: relative;
  display: inline-block;
  width: 100%;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 20px;
  padding: 10px 5px;
  z-index: 999;
}
.nav {
  background: #eee;
}

Pale is an attempt to turn the most commonly used CSS values into classes. Simple but awesome.

Introduction

Pale.css is a way to minimize your CSS by simply using predefined classes to style standard properties so that you can focus on your more advanced styles.

This library is NOT for absolute beginners. You need to understand CSS and what the properties and their values mean in order to use Pale.css properly. After that, it's as simple as it gets...


1. Put the pale.css file into your prefered folder, then include the stylesheet in your document's <head>:

<head>
  <link href="your-folder-path/pale.css" rel="stylesheet">
</head>

2. Now you can use the predefined classes. For example:

<nav id="navbar" class="fixed z999"> # Fixed position with a z-index of 999.
  <ul class="inline txt-center uppercase"> # Inline list, centered and UPPERCASE text.
    <li>...</li>
    <li>...</li>
  </ul>
  <p class="underline ls1">...</p> # Underlined text and letter-spacing of 1px.
</nav>

Obviously you can change <nav> to whatever you need it to be. In addition you can use the cheatsheet to see all classes in a distraction-free mode.

Get started

Display

You can use the display property with the following classes: none block inblock inline

Position

You can use the position property with the following classes: relative absolute fixed

Width

You can use the width and max-width property with the following classes (in %): w100 mw100 wauto

Height

You can use the height and max-height property with the following classes (in %): h100 mh100 hauto

Margin

In order to put some margin between elements, you can use the classes mt mb ml mr.
Possible values are:

mt5 mt10 mt15 mt20 mt30 mt40 mt50

mb5 mb10 mb15 mb20 mb30 mb40 mb50

ml5 ml10 ml15 ml20

mr5 mr10 mr15 mr20

mauto = margin: auto;
m0 = margin: 0;

Padding

In order to put some padding between elements, you can use the classes pt pb pl pr.
Possible values are:

pt5 pt10 pt15 pt20 pt30 pt40 pt50

pb5 pb10 pb15 pb20 pb30 pb40 pb50

pl5 pl10 pl15 pl20

pr5 pr10 pr15 pr20

p0 = padding: 0;

Color

Pale allows you to use the 3 most commonly used text colors with these classes: cblack cwhite cgray

Text-Align

You can align text elements with the following classes: txt-left txt-center txt-right txt-justify

Text-Transform

You can transform text elements with the following classes: uppercase lowercase capitalize

Text-Decoration

You can decorate text elements with the following classes: td-none underline overline through

Line-Height

You can set the space between lines with the following classes: lh1 lh1-5 lh2

Letter-Spacing

You can put a space between letters (px) with the following classes: ls1 ls2 ls3 ls4 ls5

Font-Weight

You can choose between 4 common font-weight classes (light, normal, bold, black): fw200 fw400 fw700 fw900

Float

You might wanna position elements with float. Just use the classes: left, right or fl-none. In order to avoid breaks, you might wanna add the class clear after a float element.

Vertical-Align

In order to align elements vertically, you can use these 3 classes: va-top, va-middle, va-bottom or va-base

Opacity

You can use the opacity property with these classes: op01 op02 op03 op04 op05 op06 op07 op08 op09

Visibility

You might want to hide an element with visibility. You can use: vis-hidden

Overflow

You can use the different overflow properties (all, x, y) with these classes: of-auto of-hidden of-scroll | x-auto x-hidden x-scroll | y-auto y-hidden y-scroll

Z-index

You can position an element on top of another with z-index classes: z10 z50 z100 z999

Cursor

You can use the cursor property with the following classes (hover to see): cdefault cpointer cauto cna cin cout

Extras

Images

You can give the <img> tag the class img-full if you want it to be fullscreen (width and height). If you want it to be normal and responsive, you can give it the class img-flex.

Background-Color

The most commonly used background-color is gray. You can choose between 3 classes: bg-1 bg-2 bg-3

BG-1

BG-2

BG-3

Highlights

You can make headlines or paragraphs stand out. Just give a <h1><h6>, <p> or <a> tag the class highlight

This is a highlight headline

This is a highlight text.

This is a highlight link.

Palebox

You can give a text a border and some padding. Create an element with the class palebox around some text. In addition you can asign another class like txt-left or txt-center

This is a box headline.

In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content.

This is a box headline.

In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content.

Pale Buttons

These are the buttons used on this website. Pale.css gives you 4 options. You just use one of the following classes: btn-s btn-m btn-l btn-xl with a <button> or <a> tag.