https://github.com/oddbird/accoutrement-layout

Layout helpers in Sass
https://github.com/oddbird/accoutrement-layout

Last synced: 8 days ago
JSON representation

Layout helpers in Sass

• Host: GitHub
• URL: https://github.com/oddbird/accoutrement-layout
• Owner: oddbird
• License: mit
• Created: 2015-01-14T17:33:45.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2024-01-30T14:20:23.000Z (10 months ago)
• Last Synced: 2024-10-29T18:48:43.707Z (16 days ago)
• Language: CSS
• Size: 2.98 MB
• Stars: 1
• Watchers: 7
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Accoutrement-Layout

===================

Sass layout utilities

by [OddBird][oddbird].

Provides layout utilities

such as media-query helpers,

a float clearfix,

global box-sizing,

positioning shortcuts,

and fluid aspect ratios.

[oddbird]: http://oddbird.net/

More Accoutrement Tools

-----------------------

- [Init](http://oddbird.net/accoutrement-init/)

  provides light-weight browser-normalization.

- [Color](http://oddbird.net/accoutrement-color/)

  provides color-palette management and contrast-ratio utilities.

- [Scale](http://oddbird.net/accoutrement-scale/)

  helps manage scale patterns like font-sizes, margins, and gutters.

- [Type](http://oddbird.net/accoutrement-type/)

  provides webfont management tools,

  and other typography helpers.

Quick Start

-----------

Install the package with npm or yarn

```bash

npm install accoutrement-layout

yarn add accoutrement-layout

```

Import the library:

```scss

@import '/accoutrement-layout/sass/layout';

```

Establish your media-query breakpoints,

or use sizes from [Accoutrement-Scale][scale] directly:

```scss

$sizes: (

  'page': 36rem,

);

$breakpoints: (

  'banner-text': 24em,

);

```

Access your breakpoints with

`above()`, `below()`, and `between()` mixins.

When possible `em` and `rem` units will be converted to

browser-default relative `em` sizes:

```

.banner-text {

  display: none;

  @include above('banner-text') {

    display: block;

  }

}

.container {

  @include below('page') {

    padding: .5em;

  }

}

```

We remove `.09em` or `1px`

from `max-width` queries,

to account for media-query overlap issues.

[scale]: http://oddbird.net/accoutrement-scale/docs/