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

ui-flex

v0.0.2

Published

> A CSS Library with built in grid using display:flex

Downloads

6

Vulnerabilities

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

Links

Git

Maintainers

joelcoxokcjoelcoxokc

Keywords

Readme

ui-flex

A CSS Library with built in grid using display:flex

##Installation

bower install --save ui-flex

Include the following in the <head> of your <html>

<link rel="stylesheet" href="bower_components/ui-flex/dist/ui-flex.css">

NOTE Inorder for the library to work properly, make sure your current CSS files are not modifying the min and max widths or min and max heights of any default HTML Element EXAMPLE body, main, div, header, footer, section, aside.

If your css requires that you modify the defaults for HTML elements, then dont't use these elements when using the flex- classes

##Usage

Immediately after the <body> tag create an element with the .ui-flex Class. DO NOT PLACE .ui-flex ON THE BODY *- It will not work. *

Example

<html>
    <body>
        <div class="ui-flex"></div>
    </body>
</html>

The .ui-flex class creates a flex-column layout. within this class you can create the following elements

flex-column: One collum contains many rows

.flex-header | flex-basis: $header-height .flex-body | flex: 1 0 auto .flex-footer | flex-basis: $footer-height

.flex-header,
.flex-body,
.flex-footer

    flex-direction : row

Example

<div class="ui-flex">
    <header class="flex-header"></header>
    <section class="flex-body"></section>
    <footer class="flex-footer"></footer>
</div>

A row can have many columns or rows.

Inside the .flex-body you are given a flex row layout, so you can then specify elements that will be flexed within the current row.

.flex-main | flex-direction: column, order 0

.flex-aside, .flex-aside-left flex-basis $aside-width, order -1 .flex-aside-right flex-basis $aside-width order 1

Dont't worry about the positions of these elements in the Dom, If you use the .flex-aside-<right or left> the flex container will know how to properly position the elements.

If you don't use the -left or -right you can use the .order-* class to specify the correct order for each element.

Checkout the API for .order-* for the .order- classes

You can also use Checkout the API for using the .flex-aside-*

That said. . . We can flex two asides for sidebars, and a main area for the center.

Example

<div class="ui-flex">
    <header class="flex-header"></header>
    <section class="flex-body">
    <!-- Start Example -->
        <div class="flex-main"></div>
        <aside class="flex-aside-left"></aside>
        <aside class="flex-aside-right"></aside>
    <!-- End Example -->
    </section>
    <footer class="flex-footer"></footer>
</div>

##Flex

The Flex Class is pretty straight forward. .flex by default , has the CSS property

flex: 1

.flex Will take up all the given room possible, Evenly distributing it's size to it's siblings.

Example

<section clas="flex-row">
    <div class="flex"></div>
</section>

The inner div will be 100% tall and 100% wide

If we place two divs inside this .flex-row They Will evenly take up all the available space

<section class="flex-row">
    <div class="flex"></div>
    <div class="flex"></div>
</section>

Each inner div will now be 50% wide and 100% tall

The width in this case is known as flex-basis

This will work on up to as many inner elements possible.

##Flex-*

##.flex-{size}

The .flex-* Grid can be used in the same way Bootstrap's Grid works.

NOTE There are 12 Columns!

.flex-1
.flex-2
.flex-3
.flex-4
.flex-5
.flex-6
.flex-7
.flex-8
.flex-9
.flex-10
.flex-11
.flex-12

You can use .flex- like the following

Example

<section class="flex-row">
    <div class="flex-3"></div>
    <div class="flex-6"></div>
    <div class="flex-3"></div>
</section>

##.flex-{media}-{size}

The .flex-{media}-* Grid can be used in the same way BootStrap's Media Queries work.

@media min-width: $breakpoint-xs
    .flex-xs-1

@media min-width: $breakpoint-sm
    .flex-sm-1

@media min-width: $breakpoint-md
    .flex-md-1

@media min-width: $breakpoint-lg
    .flex-lg-1

@media min-width: $breakpoint-xl
    .flex-lx-1

You can use .flex-{media}-* like the following

Example

<section class="flex-row">
    <div class="flex-xs-2"></div>
    <div class="flex-sm-2"></div>
    <div class="flex-md-2"></div>
    <div class="flex-lg-2"></div>
    <div class="flex-xl-4"></div>
</section>

##.flex-{offset} - - {size}

Similar to BootStrap's offset classes, Except this is one Class.

.flex-3--6

This will be half the size, and in the center... The first number is the offset size, and the second is the actual size of the element.

.flex-1--1
.flex-2--1
.flex-3--1
.flex-4--1
.flex-5--1
.flex-6--1
.flex-7--1
.flex-8--1
.flex-9--1
.flex-10--1
.flex-11--1

You can use .flex-{offset}--{size} like the following in order to center an element that is half the full width.

Example

<section class="flex-row">
    <div class="flex-3--6"></div>
</section>

##.flex-{media}-{offset} - - {size}

Similar to BootStrap's offset media classes, Except this is one Class.

@media min-width: $breakpoint-xs
    .flex-xs-1--1

@media min-width: $breakpoint-sm
    .flex-sm-2--1

@media min-width: $breakpoint-md
    .flex-md-3--1

@media min-width: $breakpoint-lg
    .flex-lg-4--1

@media min-width: $breakpoint-xl
    .flex-xl-5--1

You can use .flex-{media}-{offset}--{size} like the following in order to center an element that is half the full width, even on a mobile screen

Example

<section class="flex-row">
    <div class="flex-xs-3--6"></div>
</section>

##.flex-header

    flex 0 0 $header-height
    flex-direction: row
    display: flex
    order -1

##.flex-body

    flex: 1 0 auto
    flex-direction: row
    display:flex
    order 0

##.flex-footer

    flex: 0 0 $footer-height
    flex-direction: row
    display:flex
    order 1

##.flex-main

    flex 1 0 auto
    flex-direction column
    display flex
    order 0

##.flex-aside

    flex-basis $aside-width
    flex-direction column
    display flex
    order -1

##bg-colors

In order to visualize these elements you can add .bg- classes to them for background colors.

<div class="flex-body bg-red"></div>
<div class="flex-body bg-pink"></div>
<div class="flex-body bg-purple"></div>
<div class="flex-body bg-deeppurple"></div>
<div class="flex-body bg-indigo"></div>
<div class="flex-body bg-blue"></div>
<div class="flex-body bg-lightblue"></div>
<div class="flex-body bg-cyan"></div>
<div class="flex-body bg-teal"></div>
<div class="flex-body bg-green"></div>
<div class="flex-body bg-lightgreen"></div>
<div class="flex-body bg-lime"></div>
<div class="flex-body bg-yellow"></div>
<div class="flex-body bg-amber"></div>
<div class="flex-body bg-orange"></div>
<div class="flex-body bg-deeporange"></div>
<div class="flex-body bg-brown"></div>
<div class="flex-body bg-grey"></div>
<div class="flex-body bg-bluegrey"></div>

Note You can append the following numbers to any of these given classes

100,200,300,400,500,600,700,800,900
or
A100,A200,A400,A700

For Example

<div class="bg-green"></div>
or 
<div class="bg-green-300"></div>

You can find the resource for these colors in the Goolge Material Design Palette