NativeUI is a CSS and JavaScript library that adheres to the KISS principle and focuses on utilizing standard features provided by browsers, which are most optimized for each specific platform, and therefore provide the best performance and user experience. The library ensures cross-browser behavior and styling of built-in browser elements of user interface and text formatting, adding commonly used user interface elements such as modal windows, image viewer, menus, tabs, form messages, etc. It also contains some useful JavaScript functions for development, such as request() and getFormData().
Features
- A "graceful degradation" approach is used, where modern CSS and JS features are used wherever possible, and if they are not supported by the browser, functionality and appearance are preserved as much as possible. For example, if the browser doesn't support linear-gradient, a single-color background is used, and the drop-down menu still works with JavaScript disabled, including the drop-down delay on hover, which is implemented on CSS.
- Support for legacy browsers up to IE 9.
- User selectable light and dark color schemes.
- Interface elements, such as menus, have responsive design to make the interface convenient to use with any viewport resolution.
- All sizes are specified in em. This means that the scale of elements depends on font size and is inherited from parent elements.
- Supports all formatting elements used in Markdown.
Questions and answers
- How to use the library?
-
Load the js-cookie library if you want to be able to save a user-selected color scheme. You can download it here, or with npm:
npm i js-cookie. To support older browsers, you can download and link polyfills.js. Link all the necessary files using the code:<link type="text/css" href="css/nativeui.css" rel="stylesheet" /> <script type="text/javascript" src="js/js-cookie.js"></script> <script type="text/javascript" src="js/nativeui.js"></script>Then call
app.init();from your JS code. If the application is not a single-page application, declare a variableappUribefore loading the library as follows:<script type="text/javascript">app = {"appUri": "/app-root-path/"}</script>.
- How is this library better than existing solutions such as Bootstrap?
- About the same as the C language is better than Java. That is, the comparison is inherently incorrect. It's not better/worse, but for those who prefer more low-level web development, using the built in browser interface elements and using the browser's JavaScript APIs directly.
NativeUI — CSS и JavaScript библиотека, сделанная в соответствии с принципом KISS и ориентированная на использование стандартных возможностей, предоставляемых браузерами, которые наиболее оптимизированы под каждую конкретную платформу, а значит обеспечивают наилучшую производительность и удобство для пользователя. Библиотека обеспечивает кроссбраузерное поведение и стилизацию встроенных в браузер элементов пользовательского интерфейса и форматирования текста, добавляет часто используемые элементы, такие, как модальные окна, просмотрщик изображений, меню, вкладки, сообщения в формах и т. д. Также содержит некоторые полезные в разработке JavaScript-функции, например request() и getFormData().
Особенности
- Используется подход «graceful degradation», при котором по возможности используются современные возможности CSS и JS, а если они не поддерживаются браузером, то функциональность и внешний вид сохраняются настолько, насколько это возможно. Например, если браузер не поддерживает linear-gradient, то используется одноцветный фон, а выпадающее меню сохраняет работоспособность с отключенным JavaScript, включая задержку выпадания при наведении, которая реализована на CSS.
- Поддержка старых браузеров вплоть до IE 9.
- Доступны светлая и темная цветовые схемы с возможностью их выбора пользователем.
- Элементы интерфейса, такие, как меню, имеют адаптивный дизайн (responsive design), обеспечивающий удобное использование интерфейса при любом разрешении viewport'а.
- Все размеры указаны в em. Это значит, что масштаб элементов зависит от размера шрифта и наследуется от родительских элементов.
- Поддерживаются все элементы форматирования, используемые в Markdown.
Вопросы и ответы
- Как использовать библиотеку?
-
Подключите библиотеку js-cookie, если вы хотите иметь возможность сохранения выбранной пользователем цветовой схемы. Скачать её можно здесь, либо с помощью npm:
npm i js-cookie. Для поддержки старых браузеров вы можете скачать и подключить polyfills.js. Подключите все необходимые файлы с помощью кода:<link type="text/css" href="css/nativeui.css" rel="stylesheet" /> <script type="text/javascript" src="js/js-cookie.js"></script> <script type="text/javascript" src="js/nativeui.js"></script>Затем вызовите
app.init();из вашего JS-кода. Если приложение не является одностраничным, объявите переменнуюappUriперед загрузкой библиотеки следующим образом:<script type="text/javascript">app = {"appUri": "/app-root-path/"}</script>.
- Чем эта библиотека лучше существующих решений, таких, как Bootstrap?
- Примерно тем же, чем язык Си лучше, чем Java. То есть, сравнение изначально некорректное. Она не лучше/хуже, а для тех, кто предпочитает более низкоуровневую веб-разработку с использованием встроенных в браузер элементов интерфейса и использованием JavaScript API браузера напрямую.
