Stylus Wardrobe

TOC

• About
• Features
• Installing
  • Requirements
  • Install This Style
  • Additional Userstyles
• I Found a Bug
• Engaging with the Project
  • Contribution Guidelines
  • Development Scripts
• Screens
• Thanks

About

The Stylus Wardrobe style is designed to be used in conjunction with Stylus

It's made for my personal use only, and shared because... Why not.

Features

The Stylus Wardrobe style has optional and built in redesigns that fix, modernize or allow consistence styling through all accessible areas. if you wish to view complete list click below.

Click to Expand

Preset styles

• Custom colors
• Cobalt
• Material
• Material Darker
• Pastel on Dark
• Solarized Dark
• Twilight
• Ubuntu

Note: When using custom colors, remember that restrictions in what shades to use in contrast are limited, use wisely, as bugs reports regarding edge cases are not a priority.

Color Adjustments

• Optionally darken/lighten to some extent the background, foreground colors.

Navigation

• Optionally invert navigation colors

Redesigned Inputs/Buttons/Select elements

• Redesigned input styling for checkboxes, radio, dropdown and other interactable elements.

You can optionally choose the checkbox size, however not all sizes will look or align well.

The Kitchen Sink

Installing

Requirements

• Stylus - install the addon for Firefox, Chrome or Opera.

Install This Style

Click to install directly from this repository.

Additional Userstyles

Style-It Themes recommends the Global Overlay Scrollbars

• Overlay Scrollbars

I Found a Bug

At the first instance of finding a bug, have a look if there is already an open issue, if so add the required information as described in the issue template.

If your issue is new, please open an issue and report your problem.

You will need to be familiar with browser development tools.

Firefox development tools Chrome development tools

Engaging with the Project

There are many ways to engage with the project, all contributions types are most welcome and encouraged, e.g. ask for your fav color schemes, fix some typo(s), add documentation, prettify any included portions, provide feedback or ask a question, even help out with support/questions from other users, to name just a few ways you can engage with this project.

Open a pull request or ticket to start the ball rolling.

For Git related contributions you will need:

1. Fork the project.
2. Install devdependencies npm i --only-dev
3. Edit the desired files according to current requirement below, commit changes, run fix script npm run fix and push changes.
4. Open a pull request

Contribution Guidelines

Please expand the section below:

Click to Expand

• Limit to the K&R (KNF variation style), and 2 SPACE INDENTATION (no tabs, and no less than 2 spaces).

• K&R - KNF Variation Example:

  element[attr='value'] {
  ··property: value;
  }

• Not Allman

  element[property='value']
  {
  ··property: value;
  }

• Strict space between the selector and the {:

  /* good */
  element[attr='value'] { }
  
  /* bad */
  element[attr='value']{ }

• 2 Space indentation

  /* good */
  ··property: value;
  
  /* bad */
  ··property: value;
  --property: value;
  ·property: value;

*️⃣ Try to wrap lines at around 80 characters.

Development Scripts

• npm run authors: Regenerate the AUTHORS file based on Git history
• npm run ecfix: Run editorconfig via ECLint with --fix on the styl file.

For internal use Only

Releases are for internal use only, so remember to not include version bumps with your contributions

• npm run major: Creates a semantic major release.

• npm run minor: Creates a semantic minor release.

• npm run patch: Creates a semantic patch release.

• npm run update: Update development dependencies.

Note: Dependencies updates can be submitted as part of any contribution that is a separate commit from main contribution, or as a standalone contribution.

Screens

COMING SOON

More screenshots available in screens directory for your perusal.

Thanks

@vednoc kudos and thanks, for showing me another way to save retinas from the burn.

Openstyles for developing Stylus. The best userstyle extension on all the web.

⬆️ UP ⬆️