Customize

# Variables

ASH is built upon less css and utilizes variables, mixins, logical functions, and list functions. You can easily customize ASH by changing variables. Variables are broken up by feature and are located in /ash/variables with the following file structure:

• _all.less - used to import all variables into the main /ash/ash.less file
• background.less - used to build the background utilities
• border.less - used to build the default borders and border utilities
• box-shadow.less - used to build the default box-shadows and box-shadow utilities
• color.less - used to build ASH's accessible color pallete and utilities
• cursor.less - used to build the cursor utilities
• display.less - used to build the display utilities
• flex.less - used to build the flex and alignment utilities
• grid.less - used to build ASH's flex-based grid system
• margin.less - used to build the default margins and margin utilities
• opacity.less - used to build the opacity utilities
• overflow.less - used to build the overflow utilities
• padding.less - used to build the default paddings and padding utilities
• select.less - used to build the select utilities
• side.less - used to declare the sides used for other utilities
• typography.less - used to build the default typography and typography utilities
• z-index.less - used to build the default z-indexes and z-index utilities

# Utilities

You can customize your layout and elements by using the plethora of utilities. All utilities are used by adding the --{utility} class to your elements and some even have responsive versions available by using ---{breakpoint}-{utility}. Utilities are broken up by feature and are located in /ash/utilities with the following file structure:

• background/
  • background-attachment.less
  • background-color.less
  • background-position.less
  • background-repeat.less
  • background-size.less
• border/
  • border-color.less
  • border-radius.less
  • border-style.less
  • border-width.less
• flex/
  • align-content.less
  • align-items.less
  • align-self.less
  • flex-direction.less
  • flex-grow.less
  • flex-order.less
  • flex-shrink.less
  • flex-wrap.less
  • flex.less
  • justify-content.less
  • justify-items.less
  • justify-self.less
• typography/
  • font-family.less
  • font-size.less
  • font-weight.less
  • letter-spacing.less
  • line-height.less
  • text-align.less
  • text-color.less
  • text-transform.less
  • vertical-align.less
• box-shadow.less
• cursor.less
• display.less
• margin.less
• opacity.less
• overflow.less
• padding.less
• select.less

# Optimizing

If you are building from source, which should be done over using the CDN or just including the minified file, then you should optimize the built CSS by either commenting out unneeded features and utilities in the /ash/ash.less file or by using a utility like PurgeCSS.

Using the default configuration, ASH CSS is 242kB uncompressed, 299kB minified, 25kB minified and compressed with Gzip, and 20kB when minified and compressed with Brotli. Half of the file size comes from the utilities.