https://github.com/streetstrider/axiom

set of axiomatic CSS mixins
https://github.com/streetstrider/axiom

css less lesscss npm

Last synced: 3 days ago
JSON representation

set of axiomatic CSS mixins

• Host: GitHub
• URL: https://github.com/streetstrider/axiom
• Owner: StreetStrider
• License: other
• Created: 2017-05-26T19:08:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-10T16:42:28.000Z (about 2 years ago)
• Last Synced: 2025-01-19T16:10:01.261Z (3 days ago)
• Topics: css, less, lesscss, npm
• Language: Less
• Homepage:
• Size: 49.8 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# axiom

[![npm|@streetstrider/axiom](http://img.shields.io/badge/npm-@streetstrider/axiom-CB3837.svg?style=flat-square)](https://www.npmjs.org/package/@streetstrider/axiom)

[![ISC licensed](http://img.shields.io/badge/license-ISC-brightgreen.svg?style=flat-square)](#license)

Axiom is a set of axiomatic CSS mixins.

## the idea

**1**: Consider the following CSS property name and property value domains.

| key | value |

| --- | --- |

| **display** | block |

|  | flex |

|  | inline-block |

|  | inline |

| **position** | relative |

| | absolute |

| | fixed |

| **font-weight** | bold |

| **font-style** | italic |

| … etc ||

In many cases, the **value** itself is representative enough and even unique across all property domains. When you see value like `block` it is in most cases means `display: block`. So the first idea is to omit keys in cases when they are obvious. CSS does not support «boolean» or «flag» values. This is a place for a mixins, like `.block`.

**2**: We often use properties in a composition. Like when you need some special `left` value,

you often need also a `top`. Or when you specify `width` you may want to specify `height` as well in some cases. Sometimes you need block with line of text inside, so you specify both `height` and `line-height` of the same value.

Mixins, which provide adequate abstractions, like `.pos(@top; @left)` or `.wh(@width; @height)` (with a little help of reasonable defaults) may be handy.

**3**: Using axiomatic mixins allow to write short, well-composed and even poetic definitions

for elements. It is a good ground for more high-level mixins.

## install & usage

**install**:

```sh

$ npm i @streetstrider/axiom

```

**usage**:

```less

/* import whole package */

@import (reference) 'node_modules/@streetstrider/axiom/axiom/index';

/* or pick axioms */

@import (reference) 'node_modules/@streetstrider/axiom/axiom/display';

@import (reference) 'node_modules/@streetstrider/axiom/axiom/flex';

.component

{

	.flex;

	& > .main

	{

		.grow;

	}

}

/* import with namespace */

#axiom

{

	@import (reference) 'node_modules/@streetstrider/axiom/axiom/flex';

}

.component

{

	#axiom > .flex;

	/* or */

	#axiom.flex;

	& > .main

	{

		#axiom > .grow;

	}

	/* or */

	& > .main

	{

		#axiom.grow;

	}

}

```

## license

ISC, © Strider, 2023.