npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@desinax/figure

v1.2.1

Published

Desinax LESS/SASS module for figure element and image presentation.

Downloads

15

Readme

Desinax Figure (LESS)

npm version Join the chat at https://gitter.im/desinax/figure

Build Status CircleCI

LESS module for styling the html elements <figure> and <figcaption> with images and image text and neabling css-classes to have images spread over the whol text area or float left/right.

The module also includes styling related to figures encapsulating asciinema and codepen objects.

The module includes basic responsive design for images through media queries and a set of css-classes.

Figure aligned to the center

Table of content

Documentation online

You can read this README and try out the example files htdocs/*.html by using GitHub Pages.

Viewing this documentation on GitHub Pages makes it easier to both read this documentation and try out the examples on the same time.

Install

You can install using npm to take advantage of version management. Semantic versioning is used to label the various versions.

npm install @desinax/figure

Or clone this repo and use it as is.

Usage

The grid consists of a set of namespaced mixins which you need to include and activate into your own stylesheet.

Include the module

Here is the files you can choose to include.

/**
 * Figure and figcaption for images and other media using figure/figcaption
 */
@import "asciinema.less";
@import "codepen.less";
@import "figure.less";

Activate the module

Once included you need to activate the style for your own set of classes. This is my general setup.

// Enable style from the module and optinally add customized layout
figure.figure {
    #desinax-figure.figure();
}

figure.asciinema {
    &:extend(figure.figure);
    #desinax-figure.asciinema();
}

figure.codepen,
figure.figure-codepen {
    &:extend(figure.figure);
    #desinax-figure.codepen();
}

The LESS construct :extend() allows a style to build upon a previois defined style. The style for .asciinema() and .codepen() both build upon the style defined by #desinax-figure.figure().

Use the module

Now you can define your html and it will be styled accordingly.

This is html for an image without figcaption.

<figure class="figure">
    <img src="img/kabbe_200x200.jpg" alt="kabbe">
</figure>

This is a image with a figcaption.

<figure class="figure">
    <img src="img/kabbe_200x200.jpg" alt="kabbe">
    <figcaption>
        <p>The dog Kabbe is out on a walk.</p>
    </figcaption>
</figure>

This is how it looks like.

Figure with caption

You might want to add your own special style to adapt the modules base style.

Position the image center, left, right

There are classes .center, .left and .right which enables you to positioning the figure.

The standard layout is that the figure is block-style and aligned to the left.

You might use the class .center to position the figure in the middle of its area, even if the image has less width than the text area.

<figure class="figure center">
    <img src="img/kabbe_533x200.jpg" alt="kabbe">
    <figcaption>
        <p>The dog Kabbe is out on a walk, just when the autumn has joined us.</p>
    </figcaption>
</figure>

Figure aligned to the center

You can position the figure to the left using the class .left and have the text flow around it.

<figure class="figure left">
    <img src="img/kabbe_533x200.jpg" alt="kabbe">
    <figcaption>
        <p>The dog Kabbe is out on a walk, just when the autumn has joined us.</p>
    </figcaption>
</figure>

Figure aligned to the left

You can position the figure to the right using the class .right and have the text flow around it.

<figure class="figure right">
    <img src="img/kabbe_533x200.jpg" alt="kabbe">
    <figcaption>
        <p>The dog Kabbe is out on a walk, just when the autumn has joined us.</p>
    </figcaption>
</figure>

Figure aligned to the right

Responsivness

There is a collection of responsive classes having a media query attached to it. The basic idea is to let the figure module aware of the max width of the text area and relate it to the standard width of each figure.

This only relates when using the classes .left and .right when the text flows around the figure.

The following classes exists.

| Class | Image width | |--------|-------------| | .w25 | The image has default a width to approximate 25% of the text area. | | .w33 | The image has default a width to approximate 33% of the text area. | | .w40 | The image has default a width to approximate 40% of the text area. | | .w50 | The image has default a width to approximate 50% of the text area. | | .w67 | The image has default a width to approximate 67% of the text area. |

The style applied does in general look like this, using the class .w50 as an example.

&.left,
&.right {
    @media screen {
        @media (max-width: round(@maxContentWidth * 2 / 3)) {
            &.w50 {
                margin-left: 0;
                margin-right: 0;
                float: none;
                img {
                    width: @maxContentWidth * 2 / 3;
                }
            }
        }
    }
}

You make the figure module aware of your @maxContentWidth during setup. There is an optional argument you can send when activating the figure module.

// Enable style from the module and optinally add customized layout
figure.figure {
    @maxContentWidth: 960px;
    #desinax-figure.figure(@maxContentWidth);
}

Now a set of media queries act on each class and modify its layout for responsive purpose.

Here follows a set of representations showing how the resposive class may affect them image.

This is the initial look, the browser is wider than the @maxContentWidth and the images is set to have the class .w50 since they initially take up half of the text area.

Responsive using .w50, step 1

The text flows around the image while the browser is ledd wide, the media query is not yet active.

Responsive using .w50, step 2

Now the breakpoint is reached for the media query and style is applied so the image takes up the full space and text does not flow around it.

Responsive using .w50, step 3

There are a set of examples, where you can see how it works, in htdocs/, using the various responsive classes.

License

The license is MIT, review it in LICENSE.

 . 
..:  Copyright (c) 2016-2018 Mikael Roos, [email protected]