<h2>Overview:</h2>
<p>bem-components is an open-source library that provides a set of ready-made visual components (blocks) for creating web interfaces. The library also includes design themes, with the latest version introducing the new islands theme that implements the Yandex design. It supports multiple themes at once and allows for the creation of new themes.</p>
<h2>Features:</h2>
<ul>
<li>Provides a set of ready-made visual components (blocks)</li>
<li>Supports multiple themes at once</li>
<li>Allows for the creation of new themes</li>
</ul>
<h2>Summary:</h2>
<p>bem-components is an open-source library that provides a set of ready-made visual components for creating web interfaces. It supports multiple themes and allows for the creation of new themes. Installation can be done through pre-assembled CSS and JavaScript code, the library's source code, or compiled source code.</p>


<h2>Overview</h2>
<p>bem-express offers a robust setup for developing applications using BEMTREE and Express. It simplifies the development workflow by allowing automatic recompilation and live reloading of changes, which is particularly beneficial for developers who seek an efficient and responsive environment. With a focus on enhancing productivity, this tool streamlines the transition from development to production mode.</p>
<h2>Features</h2>
<ul>
<li><strong>Automatic Rebuilds</strong>: Automatically rebuilds the project when changes are detected in the specified directories, ensuring that your development environment stays up to date with minimal hassle.</li>
<li><strong>Live Reloading</strong>: Integrates livereload functionality, enabling changes to reflect instantly in the browser without needing a manual refresh.</li>
<li><strong>Custom Environment Variables</strong>: Provides options to toggle livereload and automatic rebuilds off or on using environment variables for tailored development experiences.</li>
<li><strong>Templating Support</strong>: Supports BEMTREE templating, starting from a root block and allowing context replacements for flexible page rendering.</li>
<li><strong>Development and Production Modes</strong>: Easily switch between development and production modes, with specific commands and environment setups to optimize workflow.</li>
<li><strong>Data Visualization Options</strong>: Allows developers to view raw data and BEMJSON outputs by appending specific parameters to the URL for debugging purposes.</li>
</ul>


<h2>Overview</h2>
<p>BEM React Boilerplate was once a go-to solution for developing applications using the BEM (Block Element Modifier) methodology in React. However, it's crucial to note that this project has been deprecated, as modern practices in the React ecosystem suggest that there is no longer a need for a specialized boilerplate. Developers are encouraged to leverage the flexibility of established tools like Create React App to streamline their workflows and enhance productivity.</p>
<p>This guide provides essential information for those who may have previously used the BEM React Boilerplate, covering the key tasks and features that support the transition to a more flexible development environment.</p>
<h2>Features</h2>
<ul>
<li><strong>Easy Project Setup:</strong> Leveraging Create React App for seamless project initialization without the complications of custom boilerplates.</li>
<li><strong>Comprehensive Script Availability:</strong> Quick access to essential scripts such as <code>npm start</code>, <code>npm test</code>, and <code>npm run build</code>, ensuring efficient development and testing.</li>
<li><strong>Custom Environment Variables:</strong> Simplifies the management of environment variables for different deployment scenarios and development stages.</li>
<li><strong>Error Handling and Debugging Tools:</strong> Includes support for displaying lint output and debugging settings directly in the editor, making it easier to catch and fix issues.</li>
<li><strong>Asset Management:</strong> Offers functionality for adding images, fonts, and other assets with straightforward guidelines on where and how to place them.</li>
<li><strong>Integration with APIs:</strong> Includes tips for configuring API requests in a development environment, allowing for smooth backend interactions.</li>
<li><strong>Testing Framework:</strong> Comprehensive guidance on testing components, covering everything from initializing the test environment to coverage reporting.</li>
<li><strong>Deployment Strategies:</strong> Provides a variety of options for deploying applications across popular platforms such as GitHub Pages, Azure, and Netlify.</li>
</ul>


<h2>Overview</h2>
<p>BEM React Components offers a robust library designed for developers looking to implement visual components using the BEM (Block Element Modifier) methodology. Built on the bem-react-core framework, this library streamlines the process of creating scalable and maintainable user interfaces. Whether you're a seasoned developer or just starting, BEM React Components can enhance your workflow by providing intuitive designs and structured development practices.</p>
<p>This library is under continuous development, ensuring that it remains relevant and up-to-date with industry standards. If you appreciate clean code and organized component structures, then BEM React Components could be the perfect addition to your toolkit.</p>
<h2>Features</h2>
<ul>
<li><strong>BEM Methodology:</strong> Utilizes a structured approach to developing user interfaces, promoting cleaner code and better maintainability.</li>
<li><strong>Comprehensive Component Library:</strong> Offers a multitude of pre-built components, such as Buttons, CheckBoxes, and Modals, to expedite the development process.</li>
<li><strong>Compatibility with Build Tools:</strong> Works seamlessly with popular tools like webpack and Babel, making integration straightforward and efficient.</li>
<li><strong>Documentation and Guides:</strong> Provides ample resources for getting started, including practical examples and configuration guides for various implementations.</li>
<li><strong>Active Development:</strong> Regular updates and maintenance, ensuring features and components are aligned with current trends and best practices.</li>
<li><strong>Community Support:</strong> Backed by a community of contributors, allowing for collaborative improvements and troubleshooting assistance.</li>
</ul>


<h2>Overview</h2>
<p>HTML-differ is an innovative tool designed for comparing two HTML documents efficiently and accurately. With this utility, developers can streamline their workflow by quickly identifying differences without getting bogged down in minor syntax variations. The software offers a straightforward API, making it accessible for both seasoned developers and those newer to the field.</p>
<p>Equipped with a robust comparison algorithm, HTML-differ evaluates HTML based on specific criteria that enhance the comparison process. It prioritizes readability and usability, ensuring that developers can focus on the core differences that matter most to them.</p>
<h2>Features</h2>
<ul>
<li>
<p><strong>Flexible Comparison Criteria</strong>: HTML-differ’s algorithm considers case insensitivity in <code>&#x3C;!DOCTYPE></code> declarations and ignores whitespace differences, allowing seamless comparisons of varying HTML structures.</p>
</li>
<li>
<p><strong>Attribute Handling Options</strong>: Users can customize which attributes to ignore or compare as JSON objects, providing flexibility in how data is analyzed and interpreted.</p>
</li>
<li>
<p><strong>Whitespace Ignorance</strong>: The tool can ignore whitespaces, including spaces, tabs, and new lines, ensuring that formatting variations do not interfere with the comparison results.</p>
</li>
<li>
<p><strong>Comment Ignorance</strong>: HTML comments can be excluded from comparisons, focusing the analysis purely on the structure and content of the HTML itself.</p>
</li>
<li>
<p><strong>End Tag Management</strong>: HTML-differ offers the option to ignore end tags during comparisons, which can simplify scenarios involving self-closing or repeated tags.</p>
</li>
<li>
<p><strong>Duplicate Attribute Handling</strong>: Users can specify whether to ignore duplicate attributes in tags, enhancing the clarity of the comparison by focusing on the first occurrence.</p>
</li>
<li>
<p><strong>Log and Output Options</strong>: The tool features built-in logging methods, allowing users to easily retrieve and review comparison results.</p>
</li>
<li>
<p><strong>User-Friendly Configuration</strong>: The ability to set preferences via a configuration file or direct API calls makes it simple for users to tailor the utility to their specific needs.</p>
</li>
</ul>


<h2>Overview</h2>
<p>Next Global CSS is a powerful preset designed for Next.js users who want to seamlessly integrate third-party libraries while utilizing global CSS. This solution simplifies the process of managing global styles across various components and libraries, making it an essential tool for developers looking to enhance their web applications' styling capabilities.</p>
<p>By bridging the gap between third-party libraries and Next.js' CSS management, Next Global CSS streamlines the development workflow, allowing for a more enjoyable coding experience customized to fit diverse project needs.</p>
<h2>Features</h2>
<ul>
<li><strong>Seamless Integration</strong>: Allows the easy incorporation of third-party libraries without worrying about CSS conflicts or scoping issues.</li>
<li><strong>Global Styles Management</strong>: Facilitates the use of global CSS, making it easier to maintain consistent styling across your application.</li>
<li><strong>Next.js Compatibility</strong>: Specifically tailored for Next.js, ensuring optimal performance and compatibility with its features.</li>
<li><strong>Developer-Friendly</strong>: Simplifies complex CSS setups, allowing developers to focus more on functionality and design rather than configuration.</li>
<li><strong>Flexible Configuration</strong>: Offers various setup options to accommodate different project specifications and requirements.</li>
<li><strong>Community Support</strong>: Benefit from a growing community of users and contributors who can provide help and share best practices.</li>
</ul>


<h2>Overview</h2>
<p>The project-stub is a template project repository used for creating BEM projects. It provides the minimal configuration files and folders necessary for a quick start. It includes two main BEM libraries by default: bem-core and bem-components. The installation requirements include having Node.js 4+ and Git Bash (for Windows users). The supported browsers depend on the versions of the bem-core and bem-components libraries. The project can be built using ENB or gulp.</p>
<h2>Features</h2>
<ul>
<li>Template project repository for BEM projects</li>
<li>Includes minimal configuration files and folders</li>
<li>Supports two main BEM libraries: bem-core and bem-components</li>
<li>Easy installation with Node.js 4+ and Git Bash</li>
<li>Works with ENB or gulp for building the project</li>
<li>Supports multiple browsers (excluding Internet Explorer 8.0 by default)</li>
<li>Provides commands for starting and stopping the development server</li>
<li>Allows creating blocks and pages with BEM commands</li>
<li>Offers documentation, tutorials, and videos for learning BEM</li>
</ul>
<h2>Summary</h2>
<p>The project-stub is a template project repository for BEM projects. It provides a quick start for creating BEM projects by including the necessary configuration files and folders. It supports two main BEM libraries and can be easily installed with Node.js and Git Bash. The project-stub also offers documentation and tutorials for learning BEM and provides commands for building the project. It is a valuable resource for developers looking to start BEM projects.</p>


<h2>Overview</h2>
<p>The @yandex/ui npm package is a UI Kit built on React and bem-react. It offers a collection of components and tools to help developers create user interfaces easily and efficiently.</p>
<h2>Features</h2>
<ul>
<li><strong>React Components</strong>: The @yandex/ui package provides a wide range of reusable React components to build UI elements.</li>
<li><strong>bem-react Integration</strong>: The UI Kit is built on top of the bem-react framework, allowing developers to use BEM methodology to style their components.</li>
<li><strong>Cross-Browser Compatibility</strong>: The UI Kit supports the stable versions of major browsers, including Chrome, Opera, Firefox, Android, iOS Safari, and Internet Explorer 11.</li>
</ul>
<h2>Summary</h2>
<p>The @yandex/ui npm package is a comprehensive UI Kit built on React and bem-react. It provides a collection of reusable components and integration with the BEM methodology for styling. With cross-browser compatibility, it supports major browsers, including Internet Explorer 11. Installation is straightforward, using either npm or yarn. It is an excellent choice for developers looking to build efficient and visually appealing user interfaces in React applications.</p>


Bem

Bem Components

Bem Express

Bem React Boilerplate

Bem React Components

Bh

Html Differ

Next Global Css

Project Stub

Yandex UI