We should remove "middle man" from this variables

// small screen
@breakpoint-small-max: unit((@breakpoint-small-max-width / @root-font-size), em);

// medium screen
@breakpoint-medium-min: unit((@breakpoint-medium-min-width / @root-font-size), em);
@breakpoint-medium-max: unit(((@breakpoint-medium-max-width ) / @root-font-size), em);

// large screen
@breakpoint-large-min: unit((@breakpoint-large-min-width / @root-font-size), em);

and only leave these

// small screen
@breakpoint-small-max-width: (640px + (@wrapper-gap * 2));

// medium screen: starts after small-max and end before large-min
@breakpoint-medium-min-width: (@breakpoint-small-max-width + 1 / @base-font-size);
@breakpoint-medium-max-width: (@breakpoint-large-min-width - 1 / @base-font-size);

// large screens
@breakpoint-large-min-width: (@wrapper-max-width);

Remove Middle Man from wrapper variables

we should refactor this code:
@wrapper-min-width-output: (@wrapper-min-width + (@wrapper-gap * 2));
@wrapper-max-width-output: (@wrapper-max-width + (@wrapper-gap * 2));

remove the middle man.

Updating the docs

To update the documentation, install all dependencies on your machine and run the command npm run docs. You can find the source files for the documentation under the "src/docs" folder. After updating the documentation, run npm run rams to update the root folder docs. This will automatically update the website on a pull request.

Documentation checklist

We need to add documentation highlighting each one of Rams features:

• Layout
  • Container
  • Grid System
  • Flex Box
  • Breakpoints
• Navigation
  • Anchor
  • Breadcrumb
  • Tabs
  • Navbar
• Dropdown
  • Menu
  • Tooltip
  • Accordion
• Buttons
• Icons
• JavaScript
  • data-attributes manipulation

Be the first to contribute to this project and close this issue. Please read our contributing guidelines to better understand the nature and the direction of the project.

We need to develop a color system that uses CSS variables.