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

flexlay

v0.5.2

Published

CSS library for easy use of CSS flexbox, based on Angular Material Layout

Downloads

4

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

shadowmanushadowmanu

Keywords

cssflexboxlibrarycss3layoutangularmaterial

Readme

Flexlay

Flexlay is a CSS-only library to simplify common use cases regarding CSS Flexbox properties. Heavily inspired by Angular Material 1 Layout System, flexlay allows you to setup flexbox layouts through simple attributes in your HTML.

Usage

  • NPM: npm install flexlay --save
  • CDN: https://unpkg.com/flexlay@latest/dist/flexlay.min.css

Layout Model

The easiest way to use this library is to think in the layout model it provides (powered by flex of course), based on 3 core concepts:

  • Define row or column layouts (provided by fl-layout)
  • Define layout alignment of its childs (provided by fl-layout-align)
  • Define flex behaviour of the childs (provided by fl-flex)

Thorough documentation will be available in the short future. Use the Material system as a temporary reference.

Responsive support

All attribute selectors have responsive support, initially following Material Design Breakpoints:

  • Add a -<breakpoint name> suffix to rules you only want targeting a specific screen size
  • Add a -gt-<breakpoint name> suffix to rules you want targeting screen sizes greater than a specific breakpoint.

Most work is laid out to support custom breakpoints but is yet to be finished. It needs enough support requests to be actually implemented.

Developer Notes

Contributors are welcome! I started out this library out of need to use the Material Layout outside Angular 1, and I ended up using it in all my projects now. I want you to find the value it provides as I do, and contribute to make it better.

The project is sourced in SCSS and commented enough to understand how it works. Open a PR or Issue to help or ask how things work.

Developer Roadmap

  • Create documentation website
  • Expose bower and more CDN's
  • Expose rules also as SCSS mixins
  • Expose entire project as a configurable SCSS mixin