SASS PERSONAL LIBRARY

"SASS Personal Library" started initially as a way for me to learn the basics of CSS and pre-processor - SASS. As the time passed by, I realized that it's better to have custom made HTML and CSS Components; so that I can reuse them in different projects.

PROJECT'S WIKI TABLE OF CONTENTS

1. HTML Snippets
2. Utilities: Box Model
3. Utilities: Component Mixin
4. Utilities: Flexbox
5. Utilities: Resets
6. Utilities: Typography

PROJECT INSTALLATION

You can import the whole library by adding the following line inside your scss file and compile the CSS properties:

@import 'SASS-Personal-Library/main-styles'

If you do not want to import the whole library you have the possibility to add one or more of the following lines in your scss file and compile the CSS properties:

• Importing the RESET file:

  @import 'utilities/resets/_resets';

• Importing one/all of the BOX MODEL mixin:

  @import 'utilities/box_model/_all-border';

  @import 'utilities/box_model/_all-margin';

  @import 'utilities/box_model/_all-padding';

  @import 'utilities/box_model/_border-radius';

  @import 'utilities/box_model/_box-shadow';

  @import 'utilities/box_model/_width-height';

• Importing one/all of the HTML Components mixin:

  @import 'utilities/component_mixins/_alert';

  @import 'utilities/component_mixins/_btn-filled';

  @import 'utilities/component_mixins/_btn-outlined';

  @import 'utilities/component_mixins/_btn-badge';

  @import 'utilities/component_mixins/_button-group';

  @import 'utilities/component_mixins/_card';

  @import 'utilities/component_mixins/_dropdown-button';

  @import 'utilities/component_mixins/_fa-icons';

  @import 'utilities/component_mixins/_list';

  @import 'utilities/component_mixins/_pagination-group';

  @import 'utilities/component_mixins/_text-group';

  @import 'utilities/component_mixins/_tooltip-button';

  @import 'utilities/component_mixins/_user-input';

• Importing one/all of the FLEX BOX mixin:

  @import 'utilities/flexbox/_flex-center-left';

  @import 'utilities/flexbox/_flex-center';

  @import 'utilities/flexbox/_flex-center-right';

• Importing one/all of the TYPOGRAPHY mixin:

  @import 'utilities/typography/_a-typography';

  @import 'utilities/typography/_btn-typography';

  @import 'utilities/typography/_font-size';

  @import 'utilities/typography/_h1-typography';

  @import 'utilities/typography/_h2-typography';

  @import 'utilities/typography/_h3-typography';

  @import 'utilities/typography/_h4-typography';

  @import 'utilities/typography/_h5-typography';

  @import 'utilities/typography/_h6-typography';

  @import 'utilities/typography/_letter-spacing';

  @import 'utilities/typography/_line-height';

  @import 'utilities/typography/_p-typography';

  @import 'utilities/typography/_standard-typography';

  @import 'utilities/typography/_text-indent';