NOLS is a NodeJs package meant to be used during hybrid mobile app development. Other Node packages allow you to calculate a viewport conversion, but none of them actually help you streamline your development process by applying that conversion in your stylesheets for you. Until NOLS.
This replaces the need for media queries, if all you want is a uniform UI across any mobile device.
You can now write your stylesheet with one device in mind (such as Ionic Lab), and NOLS handles making it pixel perfect (within reason) everywhere else.
NOLS is currently under development and NOT RECOMMENDED for production use at this time.
I don't know about you, but I typically write my CSS with one device in mind. During development I work with a
device that has a view height of
812px and a view width of
Afterwards, I would always go back, and manually make the conversions, so that the CSS that looks good on my device, looks good on any device.
This takes a lot of effort on my part because there are a lot of little calculations to be done. So I wanted to streamline this process. Since no one likes stylesheets, NOLS came to life.
What started out as a way to help myself out, has now become a pivotal part of my development process. As a result, I opened-sourced NOLS under the MIT license. So others could benefit as well.
Still unsure? Check out this visual example of what NOLS does in a real project.
It is HIGHLY RECOMMENDED that you commit any files before using NOLS.
No One Likes Dirty Repos
NOLS changes your project level stylesheet files. As a result of this, some changes may be irreversible if you do not commit files before using NOLS or have an IDE with the ability to revert historical changes.
If you knowingly use NOLS before backing up your project, you accept all risks associated with NOLS potentially breaking your code.
This does not happen often, but it's always a possibility.
First make sure you have installed the latest version of node.js (You may need to restart your computer after this step).
Install NOLS From NPM:
npm install nols -g
If you have installed NOLS from npm, then from terminal in your project directory, run the command
nolsis meant to be run before any minification / compression is done. Running it on minified / compressed files will have adverse effects. Don't say I didn't warn you.
||A relative path of the directory you would like NOLS to start in. Unfortunately, NOLS cannot target specific files, it has to be a parent directory of the file.|
||The device viewport height you would like NOLS to use in it's conversions.|
||The viewport width you would like NOLS to use in it's conversions.|
||This is the bread and butter of the package. This will ask you a couple questions, such as the directory you would like to target and the viewport height & viewport width that you're working with. By default NOLS targets your
||Reverts all changes made by NOLS. This is currently dependent on the assumption that you did not remove any comments left behind by NOLS. So if you remove a comment, it will skip that value reversion.|
||This removes all conversion comments left behind by NOLS in your project. This will make it impossible to reverse a conversion in the future. This command depends on the comments left behind by
These are the attributes that NOLS will attempt to convert for you. If you would like something to be supported by NOLS that isn't currently, or estabilished as known in the unsupported attributtes list, add it to our attributes request-list.
|X Attributes||Y Attributes||XY Attributes|
|height / min-height / max-height||width / min-width / max-width|
|top / bottom||left / right|
|margin-top / margin-bottom||margin-left / margin-right||margin|
|padding-top / padding-bottom||padding-left / padding-right||padding|
|transform: translateY||transform: translateX||transform: translate|
|line-height||word-spacing / letter-spacing|
Nols has a few attributes that are not currently supported in this version. Some of them are because of usage limitations, others are because I simply haven't gotten around them yet.
|border-radius - All types|
NOLS is only compatible with pixel (
px) unit values at this time. That means NOLS will skip over any value
containing the following:
cm, mm, in, pt, pc
em, ex, ch, rem, vh, vw, vmin, vmax, %
- Implement unit tests as much as possible.
- Create more manual file tests.
- Run package on fresh project to test non-linked package.
- Include JSDocs for all appropriate functions.
- Optimize project code.
- Convert parser to use AST style parsing.
- Utilize RegEx where appropriate.
- Reduce Bundle Size (250kb gzipped isn't that bad is it?).
Copyright © 2018 Jordan Benge