radogado/niui

Lightweight, feature-rich, accessible front-end UI library

niui is a lightweight, powerful and accessible UI library

To use niui, get niui.min.css, niui.min.js and index.html and edit the latter. Or import the ES module js/niui.js. Check the homepage for details.

• Prefixed BEM class names
• Semantic structure
• Unbreakable, flexible, responsive grid with alignment, embedding, borders option.
• Baseline-aligned typography, quote block, drop caps.
• Built for edge cases (overflowing headlines, images etc)
• Flat default style without rounded edges, shadows etc
• Optional rounded edges, border, shadow via Sass variables
• Dark theme
• Dynamic components, initialised by MutationObserver
• (Mobile) navigation – horizontal, vertical, scrolling. Drop-down nav: Touch-first, CSS-only, JS enhanced, 1-3 levels, responsive, label/link items support
• Buttons with group container for proper line wrap and optional ripple effect
• Modal windows using the Dialog element with many options – shadow, blur, multiple data sources
• Native carousel, swipeable on mobile and desktop, vertical and full window options, carousel inside carousel, auto height option etc
• Lightbox gallery
• Tabs
• Tooltips with full HTML content, auto positioning and unaffected by overflow: hidden
• Nested (un)ordered lists
• Forms with validation, customisation and accessibility. Range input, file input, mandatory fields, optional fieldsets, rich select.
• Accordions – nested, grouped, in a grid
• Cards
• Tables accessible on narrow screens by scrolling; optionally sortable.
• Aspect ratio for image containers
• Masonry (vertical track only)
• Parallax scrolling
• Fixed background
• WordPress theme with lightbox gallery (Classic Editor only)
• Notification bar
• Click to copy to clipboard
• RTL layout ready
• Accessible by keyboard
• 14 KB first view CSS + optional 12 KB JS (combined, minified, gzipped)
• Functional without JS and accessible without CSS
• Seamless transition from CSS-only to JS enhancement
• No dependencies

© 2014-2023 rado.bg

Standalone components

Accordion, Carousel, Select, Modal, Tooltip

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

niui's Issues

Lightbox

• Reveal from top to bottom or wait till whole image loaded and then display?
• iOS Chrome top bar position, WP only
• A lightbox with thumbnails spread anywhere on the page, binded by an id –  …
• Open lightbox at specific image per URI: #lightboxid?image=DSC00001.jpg
• Mobile – √ behaviour on device rotation, √ background shouldn't scroll vertically
• Check if lightbox item is 'IMG' type (no longer needed)
• on load, images suddenly dropping down to proper position
• Lightbox anchors with any type of content. Broken on Android 2.3
• Image captions
• Auto-resizing lightbox via CSS only
• Images upscaled when lightbox is bigger
• Support for huge galleries. Lazy loading images. Load the relevant image first. Index navigation with too many items. Irrelevant slides to be hidden so animation doesn't try to move a huge container.
• Sometimes slides blinking during animation
• 100% image zoom for 1:1 pixel peep, with shift key

Form

• Conditional sections
• dragging a file over a "file" input
• IE8 file input style
• IE8, 9 select
• Flat layout version
• Outline effect is cut out on the right; missing on Checkbox, Select, File inputs.
• Dynamic form submit without page reload (JS only/PHP)
• Drop down with search field filter – datalist element?
• Tab key skips checkbox
• WebKit: Flat form file text moving up when focused by tab key
• Baseline mis-alignment (fix with calc/Sass)
• File drop not working
• Dynamic form not working in WordPress

Customer burger symbol

Looks like the burger symbol is hard-coded into the css. This doesn't seem necessary since you can just use whatever character the user wants inside the span:

<span class="burger">&bull;&bull;&bull;</span>

Microsoft demo page broken on small Chrome screen

If you shrink the Chrome window to its smallest horizontal size, the mobile menu that appears at the top incorrectly overflows to the next line. I assume of course it's supposed to be right-aligned at the top like every other mobile site.

Problems scaling at 640px or less

Many demo pages have problems once you scale the viewport below 640px. For instance, the drop downs in the menu on the Microsoft page stop working.

The Pebble demo has problems as well, namely the Buy Now/Learn More links snap to the top underneath the Pebble heading from the navbar.

The Tesla heading gets weird too. Just trying to give some constructive feedback for an ambitious project!

Missing demo pages on mobile

On my Android browser, the Tesla demo page is the last one that shows up in your demo page's showcase. I can't see the Amnesty, Stripe or Star Wars demos. I can see them on a scaled desktop browser, so it's a mobile issue only, and I don't see any annotations in the markup that explicitly exclude it on mobile.

Tooltips

• X Touch support

Modal

• init() to initialize new dynamic content like sliders, accordions etc inside the modal
• File: Loading progress
• Auto width and height, centered. Optionally full window.
• to accept any HTML content
• Modal anchor with children
• Get external domain content via PHP cURL
• X After page load, cache all modal external content for immediate display on click.
• Esc key not working after modalWindow('HTML')
• External content on iOS, Android?

HTML Sample page

I have tried the 'back to top' button on your sample page several times on different systems and it doesn't seem to work. I am using the latest Chrome browser.

Slider

• Option to make previous/next slides partially visible
• Tabs with image thumbnails
• Fade slider with cross-fade option, instead of fade-out/white/fade-in
• some indication on the sides (:before, :after) for CSS-only version
• choose which slider to control with the keyboard (alternating between Lightbox and first slider)
• CSS-only – next slide visible
• improve snapping – appropriate Pete's Pure JS One Page Scroll
• makeSlider() to set initial visible slide (for Lightbox galleries)
• Android 4.1 native browser – slider transform doesn't work.
• Improve vertical scrolling when touching the slider
• Auto sliding option. First auto-slide starts immediately on page load.
• Equal-height slides – faked with a 100% tall :before element
• Sometimes Slider 1 image appears squashed
• IE8: Slider controls not working
• IE8: sliding left from first to last or right from last to first (children.length counting comments IE8 bug)
• IE11: √ no slide animation, √ keyboard control stops after first use
• Firefox desktop swipe
• Vertical slider option
• Vertical thumbnails option (left/right column)
• Lightbox: up/down keys move page below lightbox/slider, don't work on vertical.full-screen slider
• Sometimes unwanted double slide on swipe

Stripe scroll issue

Hi, I am using this link to scroll to an element but it has a bug.
https://radogado.github.io/niui/demos/stripe#content

❌ Actual Behavior

✔️ Expected Behavior

Slider on mobile

The slider on your demo page doesn't quite render properly on my Nexus 5. The slider buttons actually overlap the content instead of appearing below (for the numbers) and beside it (for the arrows), as expected.

In portrait mode on mobile, the content of the first slide is only one line, so the buttons used to move to the next/prev slide are cut off, almost to the point where you can't see them.

Anchor links

• √ sometimes jumpy animation end
• √ 'Back to top' not working on Windows Chrome.
• √ Error when a child of the anchor link is clicked. animateAnchors(b) href

Cloning in Github Desktop...

Hello,

I have tried over the last few weeks to clone or re-clone this repo, with Github desktopbut it keeps erroring out.

I have one log here, from one of my systems and can create others if necessary.

https://dl.dropboxusercontent.com/u/30598156/GitHubLog.txt

WordPress

• Baseline alignment between content and sidebar
• Backend option for inline/full window/full screen gallery

Modal window doesnt work on chrome

Hello.

The modal window doesnt work on chrome in your "live" page.

Drop menu z-index

If you scale your viewport to around 1000px on Chrome and Firefox, the drop menus overlap the heading "A New Perspective". I'd expect the drop menu background to be on top of the heading so you can clearly see the text, but it's not, and text gets all garbled with the heading underneat. The drop menu z-index clearly just needs to be set higher than ordinary content.

Click this copy button doesn't work

The "Click this copy button to copy the contents of the above paragraph to the clipboard" doesn't work. I get the following error on Chrome:

natuive.js:1323 Discontiguous selection is not supported.(anonymous function) @ natuive.js:1323

It happens every time if, with the mouse, you select some of the text in this same paragraph, like "copy the contents", then click the button.

Android 2.3 / 4.1

• 2.3 native browser – X modal window/table can’t scroll, √ slider controls crash browser, √ Back to Top not working twice, √ tapping form input scrolls page, √ slider can't swipe
• Tab 2 Chrome – √ mobile nav appears only once, √ Back to Top dims screen
• Tab 2 native browser – √ mobile nav appears only after scroll, √ slide offset miscalculated

:hover and :active as overlays

Picnic CSS uses a neat trick to avoid having to specify explicit colours for elements that change on hover (see also the docs). Basically, you use an inset box shadow with a partial transparency value.

This way, I could include natuive css as-is and just specify my own palette where I want, and the overlays will just work.

Fixed background on mobile

The fixed background of your mobile page actually moves on my Nexus 5. I'm not sure what it's doing exactly, because it's not scrolling while I scroll, it looks like it's resizing the background based on how much of the image is in the viewport. It's most noticeable if you scroll quickly up and down before/after the point where 50-60% of the image is visible.

Google design page displays unresponsponsive hamburger on mobile

On my mobile device, the Google design page shows a hamburger menu even though the full menu is already expanded. The Hamburger does not respond to touches.

Some file Paths are way too long...

I am on Windows 10 and I can Not Clone your repo.

This was not an issue about 4 to 6 months ago, when I last Cloned it.

Autosliding stop functioning after manual sliding

First of all, great job!

Having data-autoslide="x" on slider, it starts autosliding. But after manually switching some slides autosliding stops. Confirmed on up-to-date version too. JS console hints: Uncaught TypeError: Cannot set property 'onchange' of null.

Nav

• Drop nav module with hover version
• Mobile nav – dim page while open
• Mobile nav selected by a class, not header > nav
• Mobile nav animation
• big drop-down

Undocumented markup

If you don't mind, I'd like to use this ticket as a central place to list features which aren't documented or explained sufficiently.

1. Drop down nav: this seems to require quite a bit of extra, non-semantic markup which isn't explained at all. For instance, under the <nav> element, there are immediately two <form> elements with classes level1 and level2, and each child list element has a reset and a radio input. I'm not sure what purpose these serve. Is it some kind of non-JS/pure-CSS fallback behaviour?
2. Android browser scroll polyfill: this isn't really explained, but obviously addresses some deficiency in some unspecified Android browser version. I recommend adding the Android browser version that exhibits this problem, although just applying the polyfill automatically instead of needing to opt-in would be ideal.
3. The drop-cap class has no explanation. I believe this increases the size of the first letter of the first word given the demo page.
4. There's no example from scrollable nav on the demo page and no explanation.
5. No example for span-relative-parent which you list under "Links" in the pdf doc.

Demo pages should not have minified HTML

Looks you have an interesting framework here. Featureful yet compact. The demo pages are a good modulo a few small bugs, but prospective users can't get a feel for natUIve just by viewing the source of those pages because the HTML is minfied.

Core

• Aspect ratio box when not 100% wide (inline-block)
• Relative baseline adjustment for images/videos for flexible dimensions
• 4 columns to become 2 columns on tablet, etc – grid breakpoints
• (picture)-like trick for loading lightweight low quality images at first, then replacing it with bigger version
• if fonts aren't loaded in 2", use local fonts instead – for browsers blanking text before font is loaded
• IE11 swipe
• row with min-height centers columns vertically
• Move JS fallback to ie.js – addClass without classList, forEach polyfill etc.
• IE8, 9 fallback fix; Flexbox fallback to support rows wrapping
• Grid spacing in FF .col45 + .col5. flex-basis: calc(% - 1.502em) fixes it. Only at box-sizing: content-box, which is needed for IE11-.
• ul.indent option
• Clean, seamless row embedding (no extra div & spacing)
• Flexbox with min column width and fallback to tables
• browser capabilities detection, instead of user agent
• SASS for automatic calculation of baseline values. CSS calc() can do that job. SASS still needed for variables.
• Option for 50% wide columns on narrow screens
• parentByClass() -> getClosest()
• option for vertical lines between columns (.row.border)
• overflow:scroll functionality for unsupportive touch Android Browser (polyfill)
• IE CSS hacks don’t survive minifying
• Video player
• Anchor link to another page
• Any element .full-screen, close button (headless option), consolidation with modal.
• Eliminate images load flash by setting aspect ratio by CSS and relative width
• .full-screen via HTML5 Fullscreen API
• Split into compilable SCSS modules
• X YouTube embeds with aspect ratio and no HTTPS errors

Replace **n-slider** with **n-carousel** ← https://github.com/radogado/n-carousel

Drop menu/hamburger behaviour on mobile

On my Android browser, the hamburger drop menu behaves a little strangely. If you expand the hamburger, tap one of the menu items it expands as expected. If you tap one of the other menu items, it collapses the previous one and expands the new one. That's all good.

But if you then tap the already expanded menu item, it collapses the whole menu back into the hamburger, which is surprising. I expected the expanded menu to collapse but leave the hamburger open.

RE: the readme.md

Your opening statement says that this solution is 9k in size, but when I forked it and got the files on my system the base CSS file comes in at 21+k.

Grid layout is broken on demo

http://radogado.github.io/natuive/#grid shows lines clipping out the left side while leaving gaps on the right side.

http://imgur.com/0eTYfF0

Prototype functions

.forEach() etc.

.nav-column broken without Javascript

On this page I can't see the navigation column without enabling Javascript, on both Firefox & Chromium :)

Tables

• X always visible head row on tables taller than the window
• √ without JS, wide tables are overflowing
• √ hovering on a row highlights it

Firefox

• √ scrolltTo doesn't work after engaging with the slider

Can't close tooltip on touch devices

If you view the demo page natuive.net on a touch device, and click the toolip text, the tooltip does indeed show up, but there's no way to get rid of it.

Use ARIA roles to designate behaviour

Like most CSS frameworks, you use classes to designate various controls which your JS enhances with dynamic behaviour. That works fine, but isn't great for accessibility.

I suggest an alternate, more semantic approach using ARIA roles to designate behaviour with the CSS and JS selecting on the role attribute, ie. [role~="tab"] to designate the clickable tabs, [role~="tabpanel"] for the panel with the content, use the aria-expanded attribute to track the state, etc.

Then you leave class attributes only for purely visual styling, like font, color, grids, whitespace, etc. The idea is basically something like this:

http://heydonworks.com/practical_aria_examples/

The roles attribute is supported all the way back to IE 8, which preserves your range of supported browsers. So this approach doesn't lose any behaviour or introduce extensibility problems, but you get proper accessibility for all of your core components for free.

Lightbox overflows to next line on small device

I'm not sure what the intent is on the features page, but on a mobile device the images of the lightbox don't show up on a single row, they overflow to the next line.

It displays correctly on a shrunk Chrome window on a desktop, just not on the mobile device.

An Example for starting a conversion...

More of a request for a little help than an Issue.

I am going to convert this site: Petteys Auto Service to responsive using your Framework.
It seems like a good fit and I have been waiting until a project came up to try it on.
I just need a little starter help, an example of the home page, just part of it would suffice.

Then I can use the example to finish converting the rest of the site on my own.

I would greatly appreciate this!