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

aldebarion

v0.1.4

Published

The frontend framework built for the future

Downloads

1

Vulnerabilities

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

Links

Git

Maintainers

friedritfriedrit

Keywords

futureinterfacestouch

Readme

Aldebarion

Aldebarion is the front-end framework built for the future.

Smark desk

This framework helps you to:

  • design interfaces for futuristic smart screens, touch tables and HUDs.
  • implement user interfaces for long life application and productivity based on maximum ergonomy and timeless design
  • increase efficiency with adaptive interfaces based on human experience

This project is still in development so do not hesitate to involve yourself.

Getting started

This project is more about guidelines than real implementation. Even so, A first sass/css implementation is available. It includes basic widgets, animations, layout and default theme.

npm install aldebarion --save

More implementations with reactjs will come.

Guidelines

You must follow aldebarion guidelines in order to get a continuity in user experience.

Multiplatform

  • ensure responsiveness compatible with all platforms including computers, smartphone, tablets, large screens and HUDs.
  • use a minimal set of contrasted colors to manage even the most lightning environments

Ergonomy

  • accompany the look of the user: display everything with transition
  • do not use no frills except to catch the user attention
  • use geometrical shapes
  • integrate several levels of reading

Adaptation to user

  • make interface adaptable/adaptive to user

Documentation

Semantic language

Since this project is a sass implementation, you interact with it through a combination of class names and attributes. The wording of this implementation is inspired by Semantic-ui. It is based on natural language and very simple to use.

However, this project is specialized on animations so you need to use complex html components. In order to help you understanding what you can change and what you cannot, the framework uses non-natural language for internal components you should not modify.

Example:

<button class="ad button"> <!-- you may add classes here to change the default behavior -->
  <span class="ad buttonLabel"> <!-- you should not change this class, the only
                                  thing you can do is to remove it if you don't want it -->
    simple button
  </span>
</button>

Notice that all components managed by Albebarion must have the class ad.

Responsiveness

A first level of responsiveness is implemented.

Example:

<html>
  <!-- head code -->
  <body class="ad body">
    <div class="ad screen <platform>">
      <div class="ad workspace">
        <!-- your code -->
      </div>
    </div>
  </body>
  <!-- js code -->
</html>
  • screen: the display place. Available platforms are only computer for now.
  • workspace: the interaction place (sometimes you may interact on a smaller zone than the full screen especially on very large screens).

However if your application manages several screens, add several screens div and override the positioning.

Widgets

A lot of widgets are already designed using the guidelines. The only tricky thing is to correctly build them in html because several of them have complicated html code (because of animation).

Links