You can add an icon by putting an icon directly before the input element, then adding the inputIcon class to
both the input and the icon. If your input has margin, it will need to be added to the icon as well. You can
add the "filled" class to an input to show the filled style with shadow effects. For filled inputs, you can
add the "noshadow" class to remove the shadow effect. You can also add the "shadow" class to make it always
show the shadow effect. Use the default input style for forms or other areas with lots of inputs and buttons
and use the filled style for standalone inputs, like a search box.
Add an icon by placing a span next to a material icon instead of text. You can add the "outline" class to
make the button use an outline instead of a background, acting as a secondary button. You can add the "small"
class to a button to make it smaller. You can also add the "primary" class to use the theme color.
Dropdowns in Fluid do not need any special HTML and are styled the same as Fluid UI buttons. Dropdowns also
support the outline and small classes, but do not support other button features such as button rows or context
menus.
Checkboxes work the same way as switches in FLuid UI. Fluid UI will automatically toggle the active class
when clicked and they can be used for boolean user preferences.
Radio buttons work the same way as button rows in Fluid UI. Fluid UI automatically manages the active class
when clicked and they can be used for multiple choice user preferences.
Buttons can be placed on rows to create a selector. Plus, they handle the active class with no additional
code required! If you want to handle the active class yourself, you can add the "manual" class to the buttons.
This also works for lists, sidenavs, and sidebars. You can add the active class to the default button, and
handle the clicks yourself to get the data. You can also add the "multiple" class to allow multiple to be
selected at once, making it act as checkboxes.
Adding settings in your website can be annoying. You have to load a switch, make sure the switch is toggled
correctly, make sure that code can check for that setting, then make sure that everything updates properly
when the setting is changed. This can add up to a lot of extra code.
The name of the setting can be any string starting with "pref-". Your setting's name is used as a CSS class
for elements on your page that represent the setting
(like a switch, checkbox, or button for a boolean, or a button row or radio buttons for multiple choices)
The button row demos, switch demo, checkbox demo, and radio button demo above all also act as preferences
demos. Prefrence changes sync instantly to all UI elements and across tabs.
Setting a preference (If the prefrence is a boolean, call fluid.set without a value to toggle it)
fluid.set([setting string], [value string])
Getting a preference. If the preference is true by default, check if this is equal to "false". If it's false
by default, check if this is equal to "true".
fluid.get([setting string])
Listening to a preference change (use event.detail for the new value)
If your value is a boolean, you can use a switch, button, or checkbox to represent the setting. When using an
element to represent
a setting, add the setting string to the class list. The default value should be represented with the active
class for true and no active class for false.
If your value is a string, you can use a button row to represent the setting. When using an element to
represent a setting, add the setting string to the button row's class list, and the value string to each of
the button's class lists. The default value of the setting should be represented by adding the active class to
the respective child button.
Elements that are properly configured to toggle or change a setting will automatically do so without needing
any extra code. You do not need to call fluid.set every time a switch is toggled if it is configured to toggle
the setting. Remember to call fluid.init to add the event listeners if you add an element representing a
setting after the page loads.
moodEmoji
Fluid UI automatically parses emoji on your site on load into Twitter emoji 🙂. Add the "notwemoji" class to
the body if you want to use native emoji instead.
<body class="notwemoji">
If your site renders emoji after load, tell Twemoji to re-parse
twemoji.parse(document.body);
format_list_bulletedLists
If you want it to act as a select element list, you can add the "select" class, and handle the clicks. This
will cause it to act the same as a button row (see above). You can also add the "multiple" class in addition
the the select class to make it work like checkboxes.
Fluid UI includes a powerful theme system with support for standard light and dark themes, colorful themes,
and background images. Custom themes in Fluid UI v5 are defined in JavaScript for a more easy to use and
reliable theme system. Themes in Fluid UI have control over almost every part of the UI, including control
over the color pallete, font family, border radius, shadows, and more.
Fluid UI automatically manages the selected theme using the fluid.theme function, which handles changing the
theme CSS, updating the theme selector UI state, saving the theme preference, and automatically selecting a
theme when the auto theme is selected. The fluid.theme function can be used for getting and updating the
current theme. Users can control the selected theme using the built-in theme selector.
Fluid UI includes the themes listed below (note that auto and system both show up as "Auto" in the UI. The
user can change which version they want to use by clicking the more button in the theme selector):
Automatic (system-theme, default) (ID: "system")
Automatic (time-based) (ID: "auto")
Light (ID: "light")
Dark (ID: "dark")
Midnight Black (ID: "midnight")
Tome (dark purple) (ID: "tome")
Get the current theme (When using the auto theme, this will return the theme that was automatically chosen)
fluid.theme();
Set the current theme
fluid.theme([theme ID]);
brightness_autoTime-based auto theme
Fluid UI includes a time-based auto theme, which chooses if a light or dark theme should be used based on the
time.
Light
theme: 6AM - 7PM Dark theme: 7PM - 6AM
Click the try button below to try the time-based auto theme. Note that this theme is enabled by default if
you have your system theme unset or in light mode.
buildSetting the
default theme
You can set the default theme using the fluidConfig object
fluidConfig = {
config: {
defaultTheme: {string}, //The themeID to use by default
lockTheme: {boolean} //If this is true, Fluid UI will only allow the default theme to be used (default: false)
}
}
arrow_drop_down_circleTheme Selector
The theme selector is a built-in theme selection UI element. The theme selector shows the auto, light, and
dark themes with a more button to open the theme menu card. The theme menu card shows the entire theme list
with the color themes and additional settings for changing the auto theme version and background image.
You can control what themes the user can set via the UI using fluidConfig.config.allowThemeMenu,
fluidConfig.config.allowedThemes, and fluidConfig.config.allowBackgroundImages. You can see the details
about the fluidConfig object in the fluid.js source code.
fluidConfig = {
config: {
allowThemeMenu: {boolean}, //Show the "More" button in the theme selector. This disables all color themes.
allowedThemes: {boolean|string[]}, //An array of theme IDs to allow, or true to allow all themes. Ignored if allowThemeMenu is false. Dark, light, and auto are always allowed.
allowBackgroundImages: {boolean} //Allow the user to set background images.
}
}
Theme selector demo
<div class="themeSelectionUI"></div>
color_lensCustom
themes
Custom themes in Fluid UI are set using the fluidConfig variable. For details about the colors set by custom
themes, check the tome theme source at the top of the fluid.js source code.
fluidConfig = {
themes: {
myThemeID: { //The theme ID is the object key
name: {string}, //Theme name
icon: {string}, //Theme icon
base: {string}, //"light" for themes with dark text on a light background, "dark" otherwise
colors: {
//See fluid.js for details on the colors object
}
}
}
}
star_borderIcons
Fluid UI uses Google Material Icons. You can choose any icon from this website to use in Fluid UI. Material Icons come in 5
different styles. You can choose which style you want to use on your site by setting the --icons CSS variable.
See the list below for how to change the icon style.
This icon set uses the default filled Material Icon style and includes all of the icons from the
Material design website, plus some extra ones
This icon set is enabled by default
featured_video "Material
Icons Outlined"
This is the icon set used on this site. To use this icon set, remove the Material Icons Extended
stylesheet code from your site and replace it with the code shown below. Then, set the --icons CSS
variable to "Material Icons Outlined".
To use this icon set, remove the Material Icons Extended
stylesheet code from your site and replace it with the code shown below. Then, set the --icons CSS
variable to "Material Icons Round".
To use this icon set, remove the Material Icons Extended
stylesheet code from your site and replace it with the code shown below. Then, set the --icons CSS
variable to "Material Icons Sharp".
Fluid UI now has a transparency effects with Fluid UI Acrylic. Acrylic is enabled by default on cards with
sidenavs, sidebars, toolbars, and navbars. You can also use Acrylic with any element by adding the
"acrylicMaterial" class. Make sure you test custom Acrylic implementations, and make sure you don't overuse
Acrylic on your site.
Acrylic is designed to work on any background (images, solid colors, and even if there is no background) and
to provide enough contrast to allow most colors to be displayed and legible. Custom Fluid themes can set the
acrylic tint color by setting the --acrylicBase CSS variable. Fluid Flex themes do this for you automatically.
You can provide a solid color and have Fluid UI calculate the opacity for you or provide a color with an
opacity of at least 70%. When setting the Acrylic tint color, make sure that it also works over your page's
background since Acrylic should be able to be used without a custom background.
Acrylic can be completely disabled on your site by adding the "disableAcrylic" class to the body element. If
Fluid UI couldn't calculate the acrylic variables and during page load before the variables are calculated,
acrylic will fallback to --acrylicBase or --elements.
This element uses Fluid UI Acrylic You can drag this and change themes to see
how the color changes. Browsers that do not support Acrylic will not see the blur effect.
navigation
Navigation
Navigation elements in Fluid UI are highly experimental. Each site has different needs for its navigation,
and Fluid UI's options are limited. Navigation elements listed below are not fully supported.
The navigation on this site is a sidebar. Sidebars should be used to navigate between content on the same
page or navigate between a large quantity of pages. See the navbar section above for navigating between a
small amount of pages.
Sidebars support collapsing and item groups. In order for Fluid UI to save the sidebar group collapsed state,
you'll need to add a unique ID to every group.
Navbars and sidebars can be used together with no additional code changes.
Fluid UI Screens is a flexible way to manage multiple different screens on the same page. You can define a
function that will load each screen, then use Fluid UI to change screens. Fluid UI will save the screen in
the URL so that it will show the screen on reload and so the user can bookmark the screen. Fluid UI screens
also supports the browser back button.
Screen names and the screen ID parameter cannot include slashes (/) or periods (.)
Define a screen:
fluid.screens.folderScreen = function(id, entry) {
//screens have an optional ID for whatever the screen is showing (in this example, the ID would be the ID of the folder the user is navigated to)
//the screen ID must be a string and able to fit into the URL
//the entry parameter is a boolean specifying whether this screen is the first to load on the page
//code that will show this screen
};
Define the default screen:
fluid.defaultScreen = "homeScreen";
Open a screen:
fluid.screen("folderScreen", "folder18232372");
When your site is done loading and you want to show the user the screen from the URL or the default screen,
run fluid.screen with no parameters:
fluid.screen();
Screens Demo
Try moving between screens, using your browser's back button, and reloading
Use side navigation for cards with a lot of content. Cards using side navigation must have a fixed height.
Teleport 3
by jottocraft
settings Controls
folder Chips
devices Devices
info About
If putting side navigation into a card, make sure that the card has the "withnav" class, and make sure
that the card is a fixed height. Add the content div next to the side nav for proper padding.
Blocks are a new way of displaying and organizing information in Fluid UI v5. There are several different
block types that should be used depending on the information being displayed. Blocks can be displayed without
any styling (default), as a card, or as a clickable element depending on the use case.
Status blocks
12
folder Folders
251
insert_drive_file Files
4
people Users
8
download Downloads
6
cloud_upload Uploads
check
No errors
60%
hourglass_empty Loading...
Info blocks
folderpeoplestar
Secret Folder
Last modified
Fluid UI
Latest version: v5.0.0-beta.4
Open Website
This block doesn't have an icon
folder_shared
New files shared
text_fields
A lot of text
This block has a max width of 400px and a max height of 200px. When displaying a lot of text in a
block,
make sure to restrict both the max width and the max height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Aliquam nulla facilisi cras fermentum odio eu feugiat pretium nibh. Fringilla ut
morbi tincidunt augue. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at. Et netus et
malesuada fames ac turpis egestas.
Image blocks
attach_money
Block Title
Block description text
layers
Block Title
Block description text
mouse
Block Title
Clickable blocks can't have buttons in them
layersCards
Note that cards do not work on mobile and can cause lag
if you use too many of them. Avoid putting a card in a card.
Add the "close" class to make the card hidden by default
<div id="democard" class="card close">
Add the "focus" class to make the card act as an alert and blur the background. Clicking on the background
will also close the card!
<div id="democard" class="card focus close">
Show a card:
fluid.cards(card-id)
To close cards (Use .card.focus for focused cards):
fluid.cards.close(elementSelector);
This is a card!
Hello World!
view_quilt
Layout
grid_onResponsive
Grids
Fluid UI includes 3 different responsive grids for different use cases. They all support an unlimited number
of items and have 10px of space between items.
The flex grid uses flexbox and has a minimum width for each grid item, set using the --size variable on each
item. The minimum width can be
different for each grid item. When there is not enough space for all of the grid items on a single row, it
will create a new row for the overflow. The grid items are then stretched to fill the entire row. The height
of each grid item is stretched to the same size as the largest height on the row.
The samesize grid uses the grid display and has a minimum width for all grid items, set using the --size
variable on the grid itself. The minimum width is the same for each grid item. When there is not enough space
for all of the grid items on a single row, it will create a new row for the overflow. The samesize grid does
not stretch items, which can lead to empty space on rows. The height of the grid items are stretched to match
the largest height on the row.
The fixed grid is the closest to a traditional CSS grid and uses the grid display to keep each item the same
size on one row with no minimum width, collapsing to one column on mobile screen sizes. The width of each grid
item is always the same, and the height is not automatically stretched, which may lead to empty space.
Shimmer can be added to an element by adding the "shimmer" class or by adding the "shimmerParent" class to
its parent.
Sample content
This content cannot be seen because of the shimmer effect
<div class="shimmerParent">
<h5>Sample content</h5>
<p>This content cannot be seen because of the shimmer effect</p>
<button>Sample button</button>
</div>
The header element is used for organizing site's main title, image, date, author, and other info at the top
of the page. The example below has an image, but the header can be used without one. Each site should only
have one header per page.
Fluid UI
personBy jottocraft
event7/26/2020
table_viewTables
Fluid UI includes basic styling for HTML tables and support for the active class on table rows
#
Item
Item
Item
1
Item
Item
Item
2
Item
Item
Item
3
Item
Item
Item
4
Item
Item
Item
5
Item
Item
Item
notifications
Alerts
fullscreenSplash
Screens
Show your div as a splash screen with fluid.splash()
<div class="splashScreen"> fluid.splash(element)
infoAlert Components
Use alert components to show info, warning, error, or success messages as a component. You can also omit the
alert type to show a generic alert.
info Generic alert
This is a generic alert
info Important info
This is some important information
warning Warning message
This is a warning message
error Error message
This is an error message
check Success message
This is a success message
<!-- The alert type in the class can be omitted for a generic alert. The alert header is optional. -->
<div class="alert {info|warning|error|success}">
<div class="header">
<h5><i class="fluid-icon">info</i> Generic alert</h5>
</div>
<p>This is a generic alert!</p>
</div>
notificationsAlert
Popups
Fluid UI has native alerts and also supports Sweetalert. The check,
info, warning, and error icons all have default colors.
fluid.alert(title, body [, icon] [, actions array])
The actions parameter is optional. The actions parameter should be an array of objects representing different
action buttons shown on the alert. Each action will close the alert before running the action. An action
should have the following properties:
name {string}: The name of the action
[icon] {string}: The icon of the action
[action] {function}: The function to run when this action is clicked
code
Install
publicBrowser
Requirements
Fluid UI is designed for small independently created websites. Fluid UI is not designed for compatibility and
accessibility.
Fluid UI requires the following:
JavaScript-enabled
CSS variable support
All versions of Internet Explorer are NOT supported
Ideally, browsers should also be:
A major modern browser
A version released less than 2 years ago
Chromium-based browsers work best
warning Fluid UI is deprecated
Fluid UI should not be used in any new projects. Read the deprecation notice at fluid-old.jottocraft.com.
buildInstall Fluid
UI
Click the download button on the card above to download Fluid UI. Code below assumes Fluid UI is in the
/fluid directory
Fluid UI uses the following libraries:
Google Material Icons (Extended) | Used for Icons in Fluid UI
The Fluid UI CDN is for testing sites with the latest version of Fluid UI. The Fluid UI CDN may serve a
version of Fluid UI that is not stable and can update without notice. Use the Fluid UI CDN at
your own risk.
Fluid UI uses the following libraries:
Google Material Icons (Extended) | Used for Icons in Fluid UI
Focus cards are displayed like alerts, but are HTML elements that can include anything you want them to.
Loading...
Splash screen
You can put anything you want in a splash screen, but if you want your users to be able to leave it, you'll
have to manually add a button that runs fluid.unsplash().
