Getting started

Welcome to PAM! Before you start there are some basics things that is recommended to give a thought. First off, how do you want to install PAM? If you want to customize PAM you need to decide to use your own build or the provided build process. The concepts of these thing are explained in this section and in the setup section, lets get started.

Installation

Following download options are available.

  • Download source from GitHub.
  • Clone the repo to get all source files: git clone https:github.com/mrgreentech/pam.git
  • Install with npm: npm install pam-css. For use in a web project this is the recommended option.

Include PAM from JavaScript.

If you npm install pam-css, this is how you add it with JavaScript.

import 'pam-css/dist/pam.min.css'; // or pam.css for original file

Add pam to your HTML file

Choose one of the compiled css files (pam.css or pam.min.css) in the dist folder and add it to the head section of your index file and yourt ready to go.

<!-- PAM CSS -->
<head>
   <link rel="stylesheet" href="[your-path-to-pam]/[pam.css|pam.min.css]" />
<head/>

Source content

The source of PAM contains all project files. In the root you will find all config, scaffolding and documentation files. In the /src folder there are Less and style guide sources and in the /dist folder Less sources have been compiled into CSS files accompanied by a /less and /styleguide folder.

Folder Description
/src Contains Less, style guide and static sources such as images.
/dist Contains Less, compiled CSS and style guide of current release.

Build source

To compile PAM use the commands below. node, npm and git are required.

Prerequisites node, npm and git

# Install dependencies
$ npm i

# Build and compile source
$ npm run build

Browser support

PAM have been tested on all major browsers according to the table below.

IE / Edge
IE / Edge 		Firefox
Firefox 		Chrome
Chrome 		Safari
Safari 		iOS Safari
iOS Safari
IE11, Edge Latest version Latest version Latest version Latest version

About

PAM which stands for Pure AMCSS and Material Design is a skinny, bold and module CSS library based on the principles of AMCSS and Material design. In this section we take a closer look at these concepts.

AMCSS

PAM use markup syntax that is based on the concept of Attribute Modules for CSS (AMCSS), which is a methodology for using HTML attributes and their values rather than classes for styling elements. The result is more readable and maintainable HTML & CSS. Check out these examples and decide for yourself.

<!-- Button -->
<button class="button button-default">Default button</button>
<button pam-Button>Default button</button>

<!-- Large outlined button -->
<button class="button button-outlined button-large">Large outlined button</button>
<button pam-Button="outlined large">Large outlined button</button>

<!-- Large outlined raised button -->
<button class="button button-outlined button-raised button-large">Large outlined raised button</button>
<button pam-Button="outlined raised large">Large outlined raised button</button>

Material design

Material is an design language consisting of guidelines, components, and tools that aim to support the best practices of user interface design. Material design helps and encourage collaboration between designers and developers, this leads teams into building products and features that are more robust and consist. It also helps ideas to be realised into solution more efficently.

For example PAM implements Material designs type system.

<!-- H1 -->
<h1 pam-typography="h1">H1</h1>

<!-- Subtitle 1 -->
<h2 pam-typography="subtitle-1">Subtitle 1</h2>

<!-- Body -->
<p pam-typography="body-1">Body 1</p>

Another example is that PAM follows the Material Design color theme baseline. PAM has additional skin colors that can be viewed at the [skins-variables] section.

<!-- Primary background color -->
<div pam-skin="primary">

<!-- Secondary background color -->
<div pam-skin="secondary">

Head over to the offical Material Design website for more information and inspiration.

Performance

Since around 2009 there have been an on going debate about CSS selector speed in the web developer community. Since PAM uses AMCSS and the claims have been that attribute selectors are slow it's only fair to adress this. After doing some research I decided to let Ben Frain have the final word and lay it out for you all. So please head over to the CSS selector performance article for performance tests and analysis to see if you still think it's an issue, I know I don't.

Here's one of the key takeaways.

Sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it's really not worth spending much time over.

I'll leave this subject with the following quote.

With CSS, architecture is outside the braces; performance is inside
- Ben Frain, Enduring CSS