felipefialho / Css Components
Licence: mit
☕️ A set of common UI Components using the power of CSS and without Javascript.
Stars: ✭ 592
Projects that are alternatives of or similar to Css Components
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+1229.73%)
Mutual labels: modal, carousel, tooltip, collapse
Jspanel4
A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.
Stars: ✭ 217 (-63.34%)
Mutual labels: modal, tooltip
React Layer Stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 152 (-74.32%)
Mutual labels: modal, tooltip
react-layer-stack
Layering system for React. Useful for popover/modals/tooltip/dnd application
Stars: ✭ 158 (-73.31%)
Mutual labels: modal, tooltip
Jquery Popup Overlay
jQuery plugin for responsive and accessible modal windows and tooltips
Stars: ✭ 511 (-13.68%)
Mutual labels: modal, tooltip
Reactjs Popup
React Popup Component - Modals,Tooltips and Menus — All in one
Stars: ✭ 1,211 (+104.56%)
Mutual labels: modal, tooltip
Hibiscus.js
Native Angular directives for Bootstrap4
Stars: ✭ 115 (-80.57%)
Mutual labels: carousel, tooltip
nglp-angular-material-landing-page
NGLP is an Angular Material Landing Page.
Stars: ✭ 32 (-94.59%)
Mutual labels: modal, carousel
ng-sq-ui
Flexible and easily customizable UI-kit for Angular 11+
Stars: ✭ 99 (-83.28%)
Mutual labels: components, modal
jsPanel3
A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
Stars: ✭ 89 (-84.97%)
Mutual labels: modal, tooltip
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (-29.56%)
Mutual labels: modal, carousel
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+111.32%)
Mutual labels: modal, tooltip
You Dont Need Javascript
CSS is powerful, you can do a lot of things without JS.
Stars: ✭ 16,514 (+2689.53%)
Mutual labels: carousel, tooltip
Ngx Bootstrap
Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
Stars: ✭ 5,343 (+802.53%)
Mutual labels: components, carousel
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件，包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-73.65%)
Mutual labels: tooltip, collapse
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (-69.93%)
Mutual labels: modal, carousel
tiny-wheels
一套基于原生JavaScript开发的组件库，无依赖、体积小、简单易用
Stars: ✭ 60 (-89.86%)
Mutual labels: carousel, collapse
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (-22.64%)
Mutual labels: modal, tooltip
A set of common UI Components using the power of CSS and without Javascript.
Install
Install via Bower or download the zip
bower install css-components
Components
Browser Support
| Chrome | Firefox | Internet Explorer | Opera | Safari | Edge |
|---|---|---|---|---|---|
| Android | Yes | Yes | N/A | Untested | N/A |
| iOS | No | N/A | N/A | Yes | Yes |
| Mac OS X | Yes | Yes | N/A | Yes | Yes |
| Windows | Yes | Yes | Yes (9+) | Untested | Yes |
| Internet Explorer | |
|---|---|
| Carousel | 9+ * |
| Collapse | 9+ * |
| Dropdown | 9+ * |
| Modal | 9+ * |
| Tab | 9+ * |
| Tooltip | 8+ * ** |
* CSS3 transitions are not supported in IE8 and below. ** Janky z-index. See tooltip on right example.
Notes:
- Most tests performed with Browserstack.
- Components that perform action on hover may not work on touchscreens eg. dropdown with hover. Oddly tooltip does work. Bootstrap mentions this, “Sticky :hover/:focus on mobile. Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make :hover ‘sticky’. In other words, :hover styles start applying after tapping an element and only stop applying after the user taps some other element.”
- Probably the main reason why the components fail in earlier versions of IE is because they use advanced CSS selectors which aren’t supported. It may be possible to patch this with the use of something like selectivizr. This may defeat the purpose of using these javascript free components but on the other hand it may be acceptable for older IE.
- The components do not fail gracefully. In most cases some elements are visible but interaction will not have any effect. The carousel component won't show anything.
- Some layout issues with tab when wrapping on smaller screen sizes.
- Weird flash when carousel loops around to first slide.
Contributing
Please read this Coding Style for Issues, pull requests and coding standards.
All changes must be made in /dev folder. The CSS should be modified using the Stylus preprocessor.
Getting Started
# 1. Fork this repository and clone it into the current directory
git clone https://github.com/<your-username>/css-components.git
# 2. Navigate to the newly cloned directory
cd css-components
# 3. Install the dependencies
npm install
Development
# For start the server, watching your .styl files changes and compile CSS
grunt w
Pull Requests
# Compress zip files
grunt build
# Build the project for deploy
grunt dist
# View your project release in GhPages
https://<your-username>.github.io/css-components/
# Open your Pull Request
License
MIT License © Felipe Fialho
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].