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

rectangles-npm

v1.1.0

Published

a react based front end design system that enforces glitch-free responsive apps.

Downloads

3

Readme

Rectangles.js Framework

Node Package

rectangles-npm : https://www.npmjs.com/package/rectangles-npm

Demo 1 :

https://jacobhoffman.tk/rectangles/demos/rpc_static

(The following demo is inpired by the UI of The PlainPad project)

Demo 2 :

https://jacobhoffman.tk/rectangles/demos/plainpad_static

(The following demo is a copy of the UI of The PlainPad project)

Demo 3 :

https://jacobhoffman.tk/rectangles/demos/plainpad_npm

(The following demo is a copy of the UI of The PlainPad project)

Summary :

Rectangles is a system for designing responsive layouts for front ends. it enforces glitch-free, responsive apps.

The Rectangles framework aims to decrease the number of ways to make the same layout in by enforcing strict constraints / design rules.

For two people to make the same front end layout in rectangles, it is likely that they wrote the same exact code.

Ingredients :

Rectangles provides the ingredients to run apps as Babel in browser transpiled react, so npm is not a requirement.

Local Hosting Advice For New Developers :

If you are new to web development, I recommend installing python.

To get started, navigate to the "plainpad_static" demo

Run the static webserver server built inside of python to host locally via http:// :

cd demos/plainpad_browser_transpile
python -m http.server

Then, go to localhost:8000 in your browser to view the project.

Use (Ctrl + Shift + R) to refresh the browser on code changes.

Static Rectangles vs. npm built Rectangles

npm built (via. npx create-react-app) [demos/plainpad-npm] :

  1. JSX components are imported the standard way as is done in a react project.

VS.

static [demos/plainpad-static] :

  1. Rectangles.css is attached to the index.html file as a link tag.

  2. loadComp.js is attached to the index.html as a script tag.

  3. JSX components are loaded in at the bottom of the index.html file with the loadComp function.

Explaining Rectangles

The root rectangle

The main rectangle (root rectangle) is a viewport sized Rectangle with the root attribute. There should be only one root rectangle, The root rectangle is the only rectangle that has no free dimensions.

relationships of rectangles

rectangles can have 1 parent [meaning they are the child of that parent]

rectangles can have multiple siblings.

rectangles can have at most one telescopic sibling.

Example [dummy demo]

https://jacobhoffman.tk/rectangles/demos/dummy_static

/* index.js */
import { pass, R, C, T, startRectangles } from 'Rectangles.js'
function App() {
    return (
        <R bb bt bl br root t theme={"dark"}>
            {/*root*/}
            <R bb l s={"70px"} theme={"brick"}>
                {/* A */}
                <R br s={"40px"}>
                <b> B </b>
                </R>
                <R br tel>
                <b> C </b>
                </R> 
                <R s={"60px"}>
                <b> D </b>
                </R>
            </R>
            <R>
            <b> E </b>
            </R> 
        </R>
    )
}
ReactDOM.render(<R><App /></R>, document.getElementById("root"));
startRectangles(document.getElementById("root")); // rectangles must be started after the render!
root
  • In the above example, A and E are children of the root rectangle.

  • A and E are siblings.

A
  • in the above example, B, C, and D are children of A.

  • B, C, and D are siblings.

  • C is a telescopic sibling.

parent rectangle influence on children

  1. child rectangles automatically inherits the theme of the parent rectangle.
  2. child rectangles float in the direction of their parent's float attribute {t,l,b or r}
  3. children inherit the size of the parent rectangles locking dimension.
  4. if the float is t or b, the locking dimension is width
  5. if the float is l or r, the locking dimension is height
  6. the telescopic sibling fills the space in the free dimension that its other siblings fail to occupy.
root
  • in the above example root has a float of t, which means its locking dimension is width.

  • A and E inherit width from the root rectangle, and float to the top.

  • A and E inherit the dark theme from root.

A
  • in the above example A has a float of l, which means its locking dimension is height.
  • in the above example B, C and D inherit the height of A which is {"70px"}
  • B, C, and D inherit the dark theme from A.
C
  • C is the telescopic sibling of B and D.
  • since the locking dimension is height, the free dimension is width
  • C stretches to fills the width of parent A that B and D fail to occupy

The ...pass(props) Pattern.

//The Credits Component is used in another rectangles component.
//You want it to inherit the themes and locked dimensions in its interior rectangles.
.....
   <Credits/>
    </R>
</R>
}

/* Custom Rectangles Based Component. */
function Credits(props){
    return(
        <R t {...pass(props)}>
            <C s={"70px"}> 
                <div style={{fontFamily:"monospace"}}>
                    <a href = "https://alextselegidis.com/...">Plain Pad</a>&nbsp;UI Copy in Rectangles.js
                </div>
            </C>
        </R>
    )
}

Rectangles Inheritance

  1. Routinely, developers will want to make custom rectangles components.
  2. These components need to be able to pass through inheritance of :
    • Themes
    • Locked Dimensions
  3. Developers must pass inheritance manually through the ...pass(props) pattern.
  4. A single break in the nesting without the ...pass(props) pattern breaks the inheritance.

Things You Shouldn't Do

// Do NOT do this...
<R>
	<div></div> //sibling 1
	<R> </R> //sibling 2
</R>

Rectangles based components should NOT be siblings with regular components.

Good Work Around

// This is a good work around.
<R>
	<R> //sibling 1
		<div></div> //only child
    </R>
    <R> </R> //sibling 2
</R>

Here, the problem is solved by encapsulating the div element in a R component.

  1. the div is made an only child.
  2. Rectangles based components are siblings with each other.
  3. There are no Rectangles based components that are siblings with regular components.

Attributes special to the Rectangle(R) Component.

| Attributes | Effect | | :--------------------- | ------------------------------------------------------------ | | root | The root attribute is given to the Rectangle that everything is nested inside of within in the App component. The root rectangle always fills the whole viewport. | | t | Children float top in their parent. | | l | Children float left in their parent. | | r | Children float right in their parent. | | b | Children float bottom in their parent. | | bt | Border top. | | bb | Border bottom. | | br | Border right. | | bl | Border left. | | h | Rectangle changes color on hover. | | c = {bool} | Collapse the rectangle if bool hook is true, otherwise show. | | s = {size} | Size of the rectangles free dimension. (Any valid css size format) | | ns | Prevent scrolling for the given rectangle. | | mc | Collapse on mobile. | | msc | Collapse on landscape mobile. | | nottel | set to rectangles with a set size. (default) | | tel | Telescopic rectangles accommodate siblings to meet the full size of the parent. | | theme = {cssClass} | A css class assigned to the given rectangle and inherited by all children. |

Built-In Components

| Component | Uses | | -------------- | ----------------------------------------------------------- | | Content(C) | Rectangle sub class with easy to position internal content. | | Input(T) | Content sub class that is a Minimalist text entry field. |

| Content (C) Attributes | Effect | | --------------------------------- | ------------------------------------------ | | ha = {Left,Center,or Right} | Horizontal Alignment in content rectangle. | | va = {Top, Bottom, or Center} | Vertical alignment of content in rectangle | | p = {tp rp bp lp} | Change the padding |