Nervously Proposing Marriage
    Wondering what’s next for npm?Check out our public roadmap! »

    postcss-hfill

    1.1.0 • Public • Published

    PostCSS hfill PostCSS Logo

    NPM Version Build Status Licensing Changelog Gitter Chat

    PostCSS hfill lets you style contextual headings in CSS, like the proposed <h> element.

    x-h { display: block; font-size: 2em }
     
    article x-h,aside x-h,nav x-h,section x-h { font-size: 1.5em }
     
    article article x-h,article aside x-h,article nav x-h,article section x-h,
    aside article x-h,aside aside x-h,aside nav x-h,aside section x-h,
    nav article x-h,nav aside x-h,nav nav x-h,nav section x-h,
    section article x-h,section aside x-h,section nav x-h,section section x-h { font-size: 1.17em }
     
    /* etc. */

    Only element specificity is used so that heading styles may be more easily overwritten. Despite the longevity of selectors, default styling contributes, at most, 311 bytes.

    The default <x-h> element is used to prevent stomping on the native namespace. This plugin is intended to produce contextual headings in JavaScript-free experiences, and may improve seach engine crawling. For dynamic usage, see hfill. For an HTML preprocessing option, see posthtml-hfill.

    Options

    tag

    Type: String
    Default: "x-h"

    The tag used by contextual headings.

    sizes

    Type: Array
    Default: [ "2em", "1.5em", "1.17em", "1em" ]

    The font sizes given to each heading as it descends into the outline.

    Usage

    Add PostCSS hfill to your build tool:

    npm install postcss-hfill --save-dev

    Node

    Use PostCSS hfill to process your CSS:

    require('postcss-hfill').process(YOUR_CSS, { /* options */ });

    PostCSS

    Add PostCSS to your build tool:

    npm install postcss --save-dev

    Use PostCSS hfill as a plugin:

    postcss([
        require('postcss-hfill')({ /* options */ })
    ]).process(YOUR_CSS, /* options */);

    Gulp

    Add Gulp PostCSS to your build tool:

    npm install gulp-postcss --save-dev

    Use PostCSS hfill in your Gulpfile:

    var postcss = require('gulp-postcss');
     
    gulp.task('css', function () {
        return gulp.src('./src/*.css').pipe(
            postcss([
                require('postcss-hfill')({ /* options */ })
            ])
        ).pipe(
            gulp.dest('.')
        );
    });

    Grunt

    Add Grunt PostCSS to your build tool:

    npm install grunt-postcss --save-dev

    Use PostCSS hfill in your Gruntfile:

    grunt.loadNpmTasks('grunt-postcss');
     
    grunt.initConfig({
        postcss: {
            options: {
                use: [
                    require('postcss-hfill')({ /* options */ })
                ]
            },
            dist: {
                src: '*.css'
            }
        }
    });

    Install

    npm i postcss-hfill

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    CC0-1.0

    Last publish

    Collaborators

    • avatar