This is very much a work in progress, and is not suitable yet for using in any project as fundamental changes will occur...
A simple Svelte wrapper for Fomantic UI. This is a very shallow and light layer on top of the standard fomantic UI as found at https://fomantic-ui.com.
For more details, look inside the svelte-fomantic-ui folder, and in particular, check the README
The source code is found in the folder src/lib
. There are some examples and tests in the src/lib/tests
folder.
To see this working, follow this link. If for some reason it isn't working, then node has probably crashed. I'll replace this soon with a more robust solution.
- Minimum set of features complete - enough for a working website - all the Elements, Collections and Views - will work with pure css.
- To date: implementation of features is at about 90%, and I'm about three quarters of the way through testing and documentation.
- Main features complete - as above, but also the Modules.
- A couple of modules have been completed, tested and documented.
- All features complete - as above, but also the Behaviours and Theming.
- This hasn't been looked at yet (but it might work - see below).
Note that in essence all these do already work (except for the Modules) because you can include Fomantic UI directly into your code using classes as with any javascript.
- Where there is a cross in the Implemented column; that means the basic code is in place and should work.
- Where there is a cross in the Tested and Documented column; the examples from the Fomantic UI website have been sveltised and compared for accuracy with the ones on the Fomantic UI website, and where necessary, tweaks to the svelte-fomantic-ui code made. Often, there are sub classes like 'metadata' and 'description' that need adding, for example.
- Where there is an underscore in the Tested and Documented column, this means I've started the process of testing and documenting, but not yet finished - but I've done at least one, so am confident that it is working - however, there may be some tweaks to come.
- For example, when working on the Table element, there is an option for sorted tables that required some extra scripting to be added to work as per the example, and to function seamlessly in the Svelte environment.
Element | Implemented | Tested and Documented | Example Code | Fomantic UI page |
---|---|---|---|---|
Button | X | X | /Button | Button |
- Interactive | X | X | /ButtonInteractive | |
Container | X | X | /Container | Container |
Divider | X | X | /Divider | Divider |
Emoji | X | X | /Emoji | Emoji |
Flag | X | X | /Flag | Flag |
Header | X | X | /Header | Header |
Icon | X | X | /Icon | Icon |
Image | X | X | /Image | Image |
Input | X | X | /Input | Input |
Label | X | X | /Label | Label |
List | X | X | /List | List |
Loader | X | X | /Loader | Loader |
Placeholder | X | X | /Placeholder | Placeholder |
Rail | X | X | /Rail | Rail |
Reveal | X | X | /Reveal | Reveal |
Segment | X | X | /Segment | Segment |
Step | X | X | /Step | Step |
Text | X | X | /Text | Text |
Textarea | X | X | /Input | Input |
Collections | Implemented | Tested and Documented | Example Code | Fomantic UI page |
---|---|---|---|---|
Breadcrumb | X | X | /Breadcrumb | Breadcrumb |
- Interactive | X | X | /BreadcrumbInteractive | |
Form | X | |||
Grid | X | X | /Grid | Grid |
Menu | X | X | /Menu | Menu |
Message | X | X | /Message | Message |
Table | X | X | /Table | Table |
Views | Implemented | Tested and Documented | Example Code | Fomantic UI page |
---|---|---|---|---|
Advertisement | X | _ | /Ad | Ad |
Card | X | X | /Card | Card |
Comment | X | X | /Comment | Comment |
Feed | X | X | /Feed | Feed |
Item | X | X | /Item | Item |
Statistic | X | X | /Statistic | Statistic |
Modules | Implemented | Tested and Documented | Example Code | Fomantic UI page |
---|---|---|---|---|
Accordion | X | X | /Accordion | Accordion |
Calendar | X | X | /Calendar | Calendar |
Checkbox | X | X | /Checkbox | Checkbox |
- Indeterminate | X | X | /CheckboxIndeterminate | |
Dimmer | X | _ | /Dimmer | Dimmer |
Dropdown | X | _ | /Dropdown | Dropdown |
Embed | X | X | /Embed | Embed |
Flyout | ||||
Modal | X | X | /Modal | Modal |
Nag | ||||
Popup | X | X | /Popup | Popup |
Progress | X | X | /Progress | Progress |
Radio | X | X | /Checkbox | Checkbox |
Rating | X | |||
Search | X | |||
Shape | ||||
Sidebar | X | |||
Slider | X | |||
Sticky | ||||
Tab | ||||
Toast | ||||
Transition |