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

@javascriptfox/modulox

v1.1.4

Published

Core building blocks for your UI in React.

Downloads

4

Readme

Just another robust UI library that tries to solve every problem? No way. ModuloX is a small and lightweight library that contains core building blocks which helps you to build your UI in React. Scalable, easy to use, perfect for prototyping. Enjoy.

Why?

Because working with styles is always a pain. As your application grows, it's tough not to lose your mind, even harder when the project has to be perfect on all kinds of different screen sizes. ModuloX enables you to easily specify your styles via props for all breakpoints you defined in your theme.

Getting started

Install ModuloX via npm:

$ npm install @javascriptfox/modulox --save-dev
$ yarn add @javascriptfox/modulox --dev

Documentation

Let's start with an example:

Row - Keeps children in one row (obviously) with space between Box - Basic block, you can use align/justify props with this component (it's display flex by default)

This code will output two boxes that are in one row with width and height of 250px for each box. Boxes will change it's size on smaller screens to 100px.

What the hell is this?

height="t:|100px|, m:|250px|"

This is breakpoint style syntax (got to work on the name), which basically allows you to write media queries for this component in one line. These are the default breakpoints:

{ size: `xt`, prefix: `t:`, minWidth: 0 },
{ size: `xs`, prefix: `s:`, minWidth: 565 },
{ size: `xm`, prefix: `m:`, minWidth: 769 },
{ size: `xl`, prefix: `l:`, minWidth: 1200 },
{ size: `xg`, prefix: `g:`, minWidth: 1980 }

Legend: | t = tiny | s = small | m = medium | l = large | g = gigantic |

In a nutshell, if you want to have different styles for a specific breakpoint, you pick up the prefix that is connected to that breakpoint and put a value inside brackets/pipes / whatever.

In the example above, the height of the component will be 100px on tiny screens up to medium screens, which starts on 769px by default. Height will be 250px on this component if the screen size is 769px or bigger.

If you want to use only one rule for each breakpoint, pass only one value without any prefix like this:

height="200px"

... Rest of the documentation is in progress ...

Customize theme

Behind the scene, ModuloX is using the default theme. You can override this theme by generating your own theme and exporting all ModuloX components with your theme.

Let's generate a theme. We provided CLI utility to generate a theme and components file easily:

$	npx modulox init
$	yarn modulox init

Command should create 2 files - modulox.theme.js & modulox.components.js

You can add your own colors, breakpoints, fonts, override default properties defined in the theme you generated, but keep in mind, that you should keep the structure of the theme. For example, breakpoints and splitter is required, if you delete these, you wouldn't be able to use ModuloX.

Feel free to override existing breakpoint prefixes, sizes, min-widths or adding colors, defining your own line-heights, letter-spacings and so on.

Generated theme file should look like this: (if init command failed, just create your theme manually)

module.exports = {
  breakpoints: [
    { size: `xt`, prefix: `t:`, minWidth: 0 },
    { size: `xs`, prefix: `s:`, minWidth: 565 },
    { size: `xm`, prefix: `m:`, minWidth: 769 },
    { size: `xl`, prefix: `l:`, minWidth: 1200 },
    { size: `xg`, prefix: `g:`, minWidth: 1980 }
  ],
  colors: {
    red: '#d41111',
    blue: '#add8e6',
    green: '#228B22'
  },
  typography: {
    fonts: {
      h1: "'Playfair Display', sans-serif",
      h2: "'Playfair Display', sans-serif",
      h3: "'Playfair Display', sans-serif",
      h4: "'Playfair Display', sans-serif",
      h5: "'Playfair Display', sans-serif",
      h6: "'Playfair Display', sans-serif",
      p: "'Roboto', serif",
      a: "'Roboto', serif",
      li: "'Roboto', serif",
      span: "'Roboto', serif",
      small: "'Roboto', serif"
    },
    sizes: {
      h1: 't:|24px|, m:|36px|, l:|42px|',
      h2: 't:|21px|, m:|32px|, l:|38px|',
      h3: 't:|19px|, m:|28px|, l:|34px|',
      h4: 't:|18px|, m:|26px|, l:|31px|',
      h5: 't:|17px|, m:|22px|, l:|26px|',
      h6: 't:|16px|, m:|19px|, l:|22px|',
      p: 't:|16px|, m:|16px|, l:|16px|',
      a: 't:|16px|, m:|16px|, l:|16px|',
      li: 't:|16px|, m:|16px|, l:|16px|',
      span: 't:|15px|, m:|15px|, l:|15px|',
      small: 't:|12px|, m:|12px|, l:|12px|'
    },
    weights: {
      h1: 't:|900|, m:|900|, l:|900|',
      h2: 't:|900|, m:|900|, l:|900|',
      h3: 't:|700|, m:|700|, l:|700|'
    },
    lines: {
      h1: 1.35,
      h2: 1.375,
      h3: 1.4,
      h4: 1.45,
      h5: 1.475,
      h6: 1.5,
      p: 1.6,
      a: 1.6,
      li: 1.6,
      span: 1.7,
      small: 1.75
    },
    spaces: {
      h1: 0.25,
      h2: 0.2,
      h3: 0.15,
      h4: 0.1,
      h5: 0.1,
      h6: 0.1,
      p: 0.25,
      a: 0.25,
      li: 0.25,
      span: 0.3,
      small: 0.35
    }
  }
}

After generating and defining your own theme

Don't forget to open modulox.components and uncomment all lines to apply your theme! Then you need to import your components directly from this file.

Default modulox.components file should look like this:

import { Box, Row, List, Text } from '@javascriptfox/modulox'
import theme from './modulox.theme'

const MX = {
  Box: props => <Box theme={theme} {...props} />,
  Row: props => <Row theme={theme} {...props} />,
  List: props => <List theme={theme} {...props} />,
  Text: props => <Text theme={theme} {...props} />
}

export default MX

Now you can import ModuloX components directly from this file:

import MX from './modulox.components';

const { Box, Row, Text } = MX;

const MyReactComponent = () => {
	<Row>
		<Box hover="border-bottom: 1px solid red;">
			<Text space={0.5} transform="uppercase">Hello World!</Text>
		</Box>
		<Box display="t:|block|, m:|none|" background="red" width={50) height={50} />
	</Row>
}

export default MyReactComponent;

Another option is to pass the theme down via Context API. This way, you don't need to create modulox.components file, just your theme. Then you can create ThemeProvider and pass down your theme.

Todo

  • [ ] Add more components (Link, Image, Icon...)
  • [ ] Add more flexibility customizing the theme
  • [ ] Add animations properties
  • [ ] Add whatever useful that comes to my mind

License

MIT