About

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 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.

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