morganbarrett / vanilla-semantic-ui

Semantic UI component framework without jQuery

Vanilla Semantic UI

Vanilla Semantic UI removes the jQuery dependency from Semantic, a UI framework designed for theming.

Features

• 50+ UI elements
• 3000+ CSS variables
• 3 Levels of variable inheritance (similar to SublimeText)
• Built with EM values for responsive design
• Flexbox friendly

Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices.

Vanilla Semantic UI is not yet production ready, but will soon have all the power of Semantic UI without jQuery as a dependency.

Browser Support

• Last 2 Versions FF, Chrome, Safari Mac
• IE 11+
• Android 4.4+, Chrome for Android 44+
• iOS Safari 7+
• Microsoft Edge 12+

Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.

Installation

NPM

$ npm i vanilla-semantic-ui

Yarn

$ yarn add vanilla-semantic-ui

CDN

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanilla-semantic.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vanilla-semantic.min.js"></script>

Usage

Old (jQuery) way

$('.star.rating').rating({
	initialRating: 3
});

New (Vanilla) way

ui('.star.rating').rating({
	initialRating: 3
});

To Do

Behaviors

• api.js
• form.js
• visibility.js

Globals

• site.js

Modules

• accordion.js ✓
• checkbox.js ✓
• dimmer.js ✓
• dropdown.js
• embed.js ✓
• modal.js
• nag.js ✓
• popup.js
• progress.js ✓
• rating.js ✓
• search.js
• shape.js
• sidebar.js
• sticky.js
• tab.js
• transition.js ✓

vanilla-semantic-ui's Issues

is this project still active?

CDN

can we get a this loaded on CDN

[Dimmer] mouse out called when hovering child element

Describe the bug
The mouse out even is called when hovering child elements of the dimmer.

To Reproduce
Steps to reproduce the behavior:

1. Create a dimmer with child elements such as a buttton
2. Hover over the dimmers children
3. See flickering dimmer

Expected behavior
No flickering

• OS: macOS High Sierra
• Browser: Chrome
• Version: 65

[Accordion] error 'targets is not defined' on click event

Describe the bug
An error is show 'targets is not defined' on the click event of titles in accordions.

To Reproduce
Steps to reproduce the behavior:

1. Create an accordion
2. Click on a closed title
3. See accordion not update
4. Check log for error

Expected behavior
Accordion should update to expected state and error should not be shown.

• OS: macOS High Sierra
• Browser: Chrome
• Version: 65

dropdown.js is slow

dear Vanilla-Semantic-UI, please keep up the fight for better performance

this is a copy-paste from Semantic-UI issue 6703

Semantic-UI should run faster. jQuery is slow. prefer native JS

Expected Result

run faster

Actual Result

running slow : P

Version

2.4.2

Desc

this concerns the abuse of jQuery.

when i see code like ...

              module.debug('Creating entire dropdown from select');
              $module = $('<div />')
                .attr('class', $input.attr('class') )
                .addClass(className.selection)
                .addClass(className.dropdown)
                .html( templates.dropdown(selectValues) )
                .insertBefore($input)
              ;

in src/definitions/modules/dropdown.js line 360

... i suspect: this cant be fast.

and its not:

• native createElement is faster by factor 4 (or faster by factor 2 if jQuery is needed afterwards)
• native setAttribute is faster by factor 4 (setProperty only works for standard attributes)
• native classList.add is faster by factor 2
• native innerHTML is faster by factor 1.5 (also faster than createDocumentFragment + createElement + appendChild)
• jQuery.html is really slow with 'complex xml input' (innerHTML should be fine, since most pages use XHTML, so strings are parsed as XHTML)

etc ...

templates.dropdown is fast, cos it only concats strings
in src/definitions/modules/dropdown.js line 3900

references

https://ilikekillnerds.com/2015/02/stop-writing-slow-javascript/