X-Project Components - is a collection of the most useful components for page layout. For each component are presented description and code examples with the help of which you can easily understand and apply the right component on your website. In X-Project Components all css code was written by SASS (with SCSS syntax) and all javascript code with the use of a library jQuery.
All css code for components was written using BEM naming, meaning .block-name for independent block, .block-name__element-name for elements inside that block. And .-modifier-name for modifiers of the block. For javascript hooks was used prefix .js-*.
Every component are checked for validity through validator.w3.org, tested for сross-browser compatibility through browserstack.com, and works in the latest versions of all popular browsers (including IE11).
1) To start working with the X-Project Components you must to include jQuery library before your javascript code:
<!-- jQuery library -->
<script src="/path/to/jquery.js"></script>
<!-- Your JS file -->
<script src="/path/to/common.js"></script>
2) Also you should have SASS compiler (for example Prepros or Gulp) for compiling your CSS.
3) Find the right component and copy it to your project.
| Changes | Date |
|---|---|
| Refactoring of all components. | 17.10.2019 |
| Added SVG animation component. | 17.06.2018 |
| Fixed Count Up and Progress bars components (for the count up numbers used countUp.js), added HTML map marker component | 17.06.2018 |
| Added count up component, added function for scroll bar compensation, fixed decimal converting in progress bars | 20.05.2018 |
| Added progress bars component | 09.05.2018 |
| Added shuffle filter component | 01.05.2018 |
| Added preloader component | 15.04.2018 |
All components are presented here - X-Project Components