Menu

What's New
An introduction to new features found in the latest release

Toasty Emotion

Fomantic 2.8 brings some of the best updates yet including variation feature customization for components, more toast changes and EMOTES and of course A LOT of critical and much needed bug fixes.

Since this is a breaking changes update here is a list of breaking changes:

API
Context for the beforeSend function now is set to the initialized element instead of the content of stateContext (was already correct in the docs)
Calendar
New callback onBeforeChange does, what onChange was doing before (being called before changing the date, given the chance to deny the change)
onChange instead is now called after the date was changed
When a month is parsed it is now mapped against the whole month name instead of only the first three characters
Dropdown
A "required" attribute on a select-tag gets removed automatically
When a search entry is not found in the dropdown list and no additions are allowed, the searchterm is now removed on blur
When multiple items are selected set.value() internally provided a wrong additional parameter which probably isn't correctly fetched in an own onChange callback
Emoji
An existing theme.config needs to have @emoji: 'default'; added to the elements block
Slider
New option preventCrossover is set to true by default to avoid range sliders to cross each other avoiding wrongly calculated values
Toast
New defaults (progressbar decreases, title uses ui header having a slightly larger font size, shadow, white background, centered icon)
Other
Possible heavy reduce of the created CSS file via dynamic LESS compilation: A new file variation.variables exists to control, which variants of the elements should be created in LESS. Setting some of them to false (in your own site.variables, you don't need to (but of course can) touch the variation.variables files!) By default everything is enabled and every component is rendered in any existing size (just as before)

Sneak peak at some new features

Toast

In 2.8 we added lots of new variations and features to the toast component, here is just a few of the amazing new changes.

A Toast created from a DOM element

EMOJIS

2.8 introduces the new emoji element with support for all Unicode 12.1 Emoji Characters.

You can find a full list of all emojis here.

Dynamic LESS Compilation

In 2.8 we are introducing a new feature for building custom themes, Dynamic LESS Compilation. This new feature allows you to disable specific variations of components allowing you to generate CSS files which only contain features you require. This makes your custom distribution files much smaller in size speeding up your website

Icon Update

Once again we have updated the icons to FontAwesome 5.11.2

You can see a list of all the available icons here.

Merry Christmas 🎅

Fomantic 2.7 brings lots of new goodies and fixes and just in time for christmas!

Announcement

With 2019 around the corner and a lot of discussion we (core contributors) have agreed to move our core focus to FUI v3.0. This doesn't mean we won't be working on 2.x but means releases may be slowed down a little due to more work being put into v3.0. You can read more about the future of FUI and v3.0 here

Notes:

  • With this release we removed the dependency of prompt-sui which removes the child dependency of event-stream this ensures that the library won't be downloading any (now deprecated) malicious code. If you want to learn more about the recent security issues with event-stream please read this issue.
  • In this release we had a big focus on removing a lot of the !important usage which in turn produced lots of issues. Now with a big help from our core contributors we have removed ~85% of the usage and reduced the complexity of a lot of the color code base which makes it easier to make changes and helps reduce the size of the general code base aswell as removing duplicate code.

New features

Slider

In 2.7 we renamed the range component to slider and also add a lot of new features to play around with.

Labeled & Ticked Sliders

Range Slider (yes an actual range slider)

Vertical Slider


And a lot more, check the release notes to see all slider changes

Loader

We have added some new loader styles in 2.7 so your not restricted to a boring spinner

Doubled





Elastic





You can also apply all loader modifiers to these loaders

Colors

In 2.7 we went colors mad and changed a lot of the code base to make colors more consistent across the framework and to make it so you can define your own colors 🎉

In /globals/colors.less you will find a list of colors which you can tweak to your liking. You can change color values and even rename or add your own colors! You will notice there is a lot of variables like @primaryColor which are located in /globals/site.variables this allows this change to stay backwards compatible.

We also have added a new element called text which allows you to color text with the framework colors via wrapping text in side of a <span>.

As you can see I am red and I am blue.

Oh and you can use inverted colors like this inverted purple and orange text

Modal

In 2.7, we can position modals. Default is middle aligned.

$('.ui.top.aligned.modal').modal('show') ;
$('.ui.bottom.aligned.modal') .modal('show') ;

We can open modals that completely overlay the entire screen.

$('.ui.overlay.fullscreen.modal') .modal('show') ;

Dropdown

In 2.7, dropdown module has new variant to display more contents at glance. These could be useful if you have tons of options in dropdown.

One is columnar. We can make dropdown columnar, from three column to five column.

Another is height variation. We can make dropdown long or very long.

Show me classes currently available.

Progress

In 2.7, progress now can have multiple bars.


We didn't just stop there we also added a lot of cool new features for other components and addressed lots of bugs. You can find a full list of changes here

Toasty loaders

Fomantic 2.6 brings a new components for handling content loading ui placeholder, as well as a new type of segment used to reserve space for content: ui placeholder segment.

Additionally several important component updates are included in this release.

Modals have been re-architected to use hybrid flex support, falling back to JS positioning for more complex use-cases (or older browsers).
Dropdowns now include a clearable setting for letting users reset dropdowns to its empty state.

We are also introducing the new Toast component

If you are upgrading from a previous SUI version, be sure to add @placeholder & @toast to your theme.config to include the placeholder or toast components in your code.

New UI Component

Placeholders

Placeholders can be used to reduce the jarringness, and perceived load time when loading new content

Simulate Loading
Add
Delete
Lindsay
Joined in 2013
Primary Contact
Add
Delete
Semantic-Org/Semantic-UI-Docs
Updated 22 mins ago

Placeholder Segment

Placeholder segments allow you to reserve space in your design for where content is intended to appear. This is useful when a page should prompt a user about its intended functionality, even when no content is present.

No users have been added yet
Add User
Or
Find Country
Add New Country
Create

New Features

Clearable Dropdowns

Now dropdowns can specify that their content can be cleared with clearable: true.

Show me classes currently available.

Improved Flexbox Modals

Although flex-box were introduced in 2.3.0 there were limitations which may have prevented some advanced use-cases. For example, flexbox modals did not support modals that used detachable: false and werent directly inside dimmer flex containers. Also some flex browsers (IE11) do not support absolutely positioned elements inside flex containers, so multiple overlapping modals could not be used in those cases.

2.4.0 solves this by introducing a hybrid flex system, that will fall back to javascript positioning for browsers or layouts that aren't compatible with flex.

The beginning of something new

Fomantic-UI is starting to mature and we are starting to push bigger and better updates, we hope you like the new Calendar and Range slider modules!

New Components

Calendar

Range Slider


FontAwesome 5.3.1

We have updated the icons to the newest FontAwesome release

Colored Loaders

More Inverted Components

In 2.5 we made a big push to add more support for inverted components

Comments

Comments

Matt
How artistic!
Elliot Fu

This has been very useful for my research. Thanks as well!

Jenny Hess
Elliot you are always so right :)
Joe Henderson
Dude, this is awesome. Thanks so much
Feed
Just now
Elliot Fu posted on his page
Hey there !
Elliot Fu added you as a friend
1 Hour Ago
Step
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Cards
Matt Giampietro
Matthew is an interior designer living in New York.
Joined in 2013 75 Friends
Molly
Coworker
Molly is a personal assistant living in Paris.
Joined in 2011 35 Friends
Elyse
Elyse is a copywriter working in New York.
Joined in 2014 151 Friends

Horizontal Cards

Matt Giampietro
Matthew is an interior designer living in New York.
Molly
Coworker
Molly is a personal assistant living in Paris.

A new life

With active development slowing down the community has stood up to start a new life for Semantic, welcome to Fomantic-UI.

You can read the release notes here.

New Features

Inverted & basic Primary and Secondary buttons

You can now use primary and secondary basic and inverted buttons.

Tertiary buttons

New tertiary buttons allow for less important buttons

Primary & Secondary colors

Headers, Icons and Cards now all have primary and secondary colors

Primary Header
Secondary Header

Inverted dropdown variation

Dropdowns can now be inverted, they look sweet in inverted segments.

A New Approach

After an extended period of patches, Semantic UI 2.3 marks the return to significant feature changes for the project.

In upcoming Semantic releases we will be releasing more frequently, but with smaller changesets, to make it easier for users to upgrade and adjust to global changes.

New Features

Font Awesome 5.0 & Better Icon Searching

In 2.3 icons now include a full port of Font Awesome 5.0.6, including 929 icons.

Icon categories now match icon categories in Font Awesome's documentation, making it easier to find icons between docs.

Smile
Smile Outline
Hand Rock
Hand Paper
Hand Scissors

Semantic UI icon docs now includes a global icon search with easy copy and paste access to html

Global Font Weight Variables

Theming now uses two no global variables @bold and @normal making it easier to modify font weights in a more complex font stack

/* Use some custom font weights */ @bold: 600; @normal: 400;

Local Category Search

You can now use category search with the source option without having to add API callbacks

var categoryContent = [ { category: 'South America', title: 'Brazil' }, { category: 'South America', title: 'Peru' }, { category: 'North America', title: 'Canada' }, { category: 'Asia', title: 'South Korea' }, { category: 'Asia', title: 'Japan' }, { category: 'Asia', title: 'China' }, { category: 'Europe', title: 'Denmark' }, { category: 'Europe', title: 'England' }, { category: 'Europe', title: 'France' }, { category: 'Europe', title: 'Germany' }, { category: 'Africa', title: 'Ethiopia' }, { category: 'Africa', title: 'Nigeria' }, { category: 'Africa', title: 'Zimbabwe' }, ]; $('.local-category.example .ui.search') .search({ type: 'category', source: categoryContent, searchFields: [ 'title', 'category' ] }) ;

Arrow Aligment on Small Popups

Semantic popups now detects when horizontally aligning the popup on it's arrow is more reasonable than matching edges with a popup.

To use this feature be sure to specify movePopup: false in your settings
$('.centering.example .avatar.image').popup();

Popups Support Multiple Coordinate Systems

Popups now can correctly place elements with two different coordinate systems. These are typically caused by having a parent element with css properties transform or position.

Button is in here

Button

Popup is in here

Button is in here

Button

Popup is in here

/* Activating element is inside #one with different positioning context */ #one { display: block; position: relative; padding: 50px 100px; background-color: #F0F0F0; } /* Popup is inside two with position relative (creating another positioning context) */ #two { display: block; background-color: #E2EAE4; position: relative; top: 10px; padding: 50px 8px; }
$('.complex-popup.example .ui.button') .popup({ movePopup: false, popup: $('.complex-popup.example .popup') }) ;

New Matching Options

In addition, search now includes three tiers of matched results, similar to the options available in dropdown. Fuzzy results now are turned off by the new default fullTextSearch: 'exact'

Query matches the start of field exactly
Query matches any part of field
New
Query "fuzzy" matches field
$('.ui.search') .search({ fullTextSearch: 'exact' // only matches exact matches (no fuzzy matching) }) ;

Dimmer Message
Dimmer sub-header