Awesome Open Source
Awesome Open Source



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, tested for сross-browser compatibility through, and works in the latest versions of all popular browsers (including IE11).


How to use

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

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,049,824
Js (1,049,823
Html (237,920
Css (140,480
Jquery (26,473
Scss (17,889
Sass (14,509
Layout (13,812
Count (7,882