{"id":17225138,"url":"https://github.com/mikekovarik/flexus","last_synced_at":"2026-04-09T07:33:40.816Z","repository":{"id":100879109,"uuid":"89956791","full_name":"MikeKovarik/flexus","owner":"MikeKovarik","description":"👓 Multiplatform app development framework","archived":false,"fork":false,"pushed_at":"2018-10-17T20:43:36.000Z","size":22117,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-30T15:15:59.726Z","etag":null,"topics":["android","chrome-os","cordova","css-framework","css-library","custom-components","custom-elements","electron","html","html-framework","javascript","javascript-applications","javascript-framework","javascript-library","multiplatform","shadow-dom","uwp","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeKovarik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-01T19:44:09.000Z","updated_at":"2018-10-17T20:43:37.000Z","dependencies_parsed_at":"2023-06-02T10:00:09.158Z","dependency_job_id":null,"html_url":"https://github.com/MikeKovarik/flexus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeKovarik%2Fflexus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeKovarik%2Fflexus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeKovarik%2Fflexus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeKovarik%2Fflexus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeKovarik","download_url":"https://codeload.github.com/MikeKovarik/flexus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245507652,"owners_count":20626645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","chrome-os","cordova","css-framework","css-library","custom-components","custom-elements","electron","html","html-framework","javascript","javascript-applications","javascript-framework","javascript-library","multiplatform","shadow-dom","uwp","web-components"],"created_at":"2024-10-15T04:12:50.213Z","updated_at":"2025-12-30T23:26:14.677Z","avatar_url":"https://github.com/MikeKovarik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# State of the project\n\n## Initially developed as Bachelor's thesis\n\nInitially a concept in many of my apps was later turned into a separate repo/module, registered as university thesis, developed, defended and released as version 1.0.\n\n* [Faculty's page with review and grade](http://www.fit.vutbr.cz/study/DP/BP.php?id=20182\u0026y=2016)\n* [University's page](https://www.vutbr.cz/en/students/final-thesis/detail/106502?zp_id=106502)\n* [Paper](https://www.vutbr.cz/www_base/zav_prace_soubor_verejne.php?file_id=159613)\n\n## This repo is outdated \u0026 Not maintained\n\nMicrosoft announced Fluent Design System \u0026 Google came with Material Design 2 spec since the release of this framework making it obsolete.\n\nCurrent version of the repo is working and somewhat maintained, but only as a testing grounds for a new verion.\n\n## Next version is under development\n\nI am currently developing next version (fresh start in a new private repo) and dogfooding it in other personal projects that are based on flexus.\n\nIt will be ligher, faster, more efficient, and overall better. For now, it's stil a **work in progress**.\n\n---\n\n### Notation\nThis documentation uses following CSS notation for describing HML element, attributes, classes and IDs:\n* `\u003celements\u003e`\n* `[attributes]`\n*  `.classes`\n*  `#ids`\n\n### Caveats\n\nFlexus is highly dependant on modern standards. Everything was tested and working in latest Chrome 58 (and Android and Chrome OS, running the same browser or Webview) as of May 2017. But Edge (and UWP) still lacks some of them. Polyfills can be used to run Flexus, but errors and bugs are expected to occur untill all required standards are implemented on this platform. Flexus internally tries to fix as much as possible but issues might still occur.\n\nDependant standards and known issues\n* **Web Components** - Shadow DOM and style encapsulation are effectively unpolyfillable. Using JS Flexus components might not work all that great and leaking outer style into shadowRoot is expected\n* **CSS Custom Attributes** - Edge doesn't propagate CSS Variables into pseudo elements, thus icons size might be off.\n\n### Launching Demos\n\nFlexus contains folder `demo` with variety of demo applications which just like any other `.html` has to be served from a webserver.\n\nNote: All demos in folder `demo` and test files in folder `test` have hardcoded absolute paths starting with `/flexus/...` (to make development and testing easier) and the paths will always resolve into `://localhost/flexus/css/flexus-material.css` for example. The whole `flexus` folder therefore has to be copied to the root of the webserver folder, or the absolute paths has to be changed to reflect location of flexus files. So for example\n````\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/flexus/css/flexus-material.css\"\u003e\n...\n\u003cscript src=\"/flexus/lib/flexus.js\"\u003e\u003c/script\u003e\n````\nhas to be changed to\n````\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"my_path_to_flexus/css/flexus-material.css\"\u003e\n...\n\u003cscript src=\"my_path_to_flexus/lib/flexus.js\"\u003e\u003c/script\u003e\n````\n\n### Launching Demos as UWP apps\n\nFolder `flexus` contains Visual Studio project `flexus.jsproj` which requires latest development SDK for Windows 10 Creator's Update.\n\nThis project lanches a `flexus/demo/theme-detect.html` file but it can be changed by editing `Start page` field in `package.appxmanifest`.\n\n### Launching Demos as Android Apps\n\nDue to complexity of project creation in Cordova (and dependencies on Android SDK toolchain), this thesis does not contain example Cordova project. Please see [https://cordova.apache.org](https://cordova.apache.org/#getstarted) for more information.\n\n### Launching Demos as PWA\n\nFor an example of how to deploy application as a PWA on the web, check out demo in `flexus\\demo\\pwa-hello-word-original` or  `flexus\\demo\\pwa-hello-word`\n\n### How to compile Flexus\n\nFlexus comes precompiled and it is not needed to do this step, but if some changes are made to the core of Flexus, run these scripts:\n\nDownload dependencies (with the Node.JS package registry npm)\n```\nnpm install\n```\n\nBuild, compile and transpile libraries, elements and css, except for icons\n```\ngulp\n```\nor add `ganymede`, `flexus`, `ui`, `elements`, `core`, `libs`, `libs` to specify which separate part to build.\n\nIcon can be built separately using\n```\ngulp icons\n```\n\n### Thirt party dependencies in this repository\n\nThis repository contains third party files that are required by flexus and/or are used for demonstration purposes.\n\nSpecifically:\n\ndirectory `flexus/fonts` contains icons and fonts openly distibuted by Microsoft, Google and https://materialdesignicons.com/\n\ndirectory `flexus/demo/scripts` contains framework Angular by Google, that is used in some of the demos\n\nI did not develop, nor do I claim ownership of these files.\nAll rights remain the property of the original developers.\n\n## Developing with Flexus\n\n### Setting up a new application\n\nJust like any HTML document there is some boilerplate code to be copy pasted. In case of Flexus the most important thing to include is the Core Support Library, which, along with custom compoents, has to be at the end of `\u003cbody\u003e` element.\n```\n\u003cscript src=\"/flexus/lib/ganymede.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/flexus/lib/flexus.js\"\u003e\u003c/script\u003e\n```\nIf the application wants to leverage advanced functionality of components like `\u003cflexus-toolbar\u003e`, their respective JS file has to be loaded afterwards.\n```\n\u003cscript src=\"/flexus/elements/toolbar.js\"\u003e\u003c/script\u003e\n```\nThen if the automatic design style detection and loading is not desired, concrete CSS files can be specified to load. Either `flexus-material` or `flexus-neon` (as well as icons).\n```\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/flexus/css/flexus-material.css\"\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/flexus/css/flexus-material-icons.css\"\u003e\n```\nThe polyfills are not required but it is recommended to include them for a good measure.\n```\n\u003cscript src=\"/flexus/polyfills/fx-polyfill.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/flexus/polyfills/animate-polyfill.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/flexus/polyfills/custom-elements.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/flexus/polyfills/shadydom.min.js\"\u003e\u003c/script\u003e\n```\n\nCaveat: Flexus can take care of feature detection and loading required polyfills to fix missing platform features,  but some environments limited by CSP (Chrome OS apps and Windows 10 UWP apps) prevent application from dyamically injecting scripts and styles into the document, resulting in error. Manually importing both CSS stylesheets and all polyfills improves chances of avoiding potential problems.\n\nNote: It is recommended to run a localhost webserver to host files during development.\n\nThen comes the styling part. Theme (`[light]` or `[dark]`) and colors (`[primary=\"...\"]` and `[accent=\"...\"]`) can be specified on `\u003cbody\u003e`. Additionally, to prevent Flexus from adjusting UI for non/touch-screens `[touch]` or `[nontouch]` can be added to `\u003chtml\u003e` element. Flexus also marks its enty point with attribute `[fx-app]` and can be specified anywhere, but flexus by default assigns it to `\u003cbody\u003e` (together with theme if it'S not defined).  \n\nThis is a complete boilerplate code that can be copy-pasted to kickstart the development.\n\n```\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\n\t\u003cmeta charset=\"utf-8\"\u003e\n\n\t\u003c!-- load flexus material design ---\u003e\n\t\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/flexus/css/flexus-material.css\"\u003e\n\t\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"/flexus/css/flexus-material-icons.css\"\u003e\n\n\t\u003c!-- polyfills neeed by some older platforms ---\u003e\n\t\u003cscript src=\"/flexus/polyfills/fx-polyfill.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"/flexus/polyfills/animate-polyfill.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"/flexus/polyfills/custom-elements.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"/flexus/polyfills/shadydom.min.js\"\u003e\u003c/script\u003e\n\n\u003c/head\u003e\n\u003cbody light fx-app primary=\"blue\" accent=\"yellow\"\u003e\n\n\t\u003c!-- application code goes here ---\u003e\n\n\t\u003c!-- flexus core ---\u003e\n\t\u003cscript src=\"/flexus/lib/ganymede.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"/flexus/lib/flexus.js\"\u003e\u003c/script\u003e\n\n\t\u003c!-- import toolbar custom component ---\u003e\n\t\u003cscript src=\"/flexus/elements/toolbar.js\"\u003e\u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n### Mixing\n\nMost attributes are available to used in any combination unless they are in contrast (e.g. `[primary]` and `[accent]` both change background of the element, `[fullwidth]` and `[halfwidth]` change width to different values, etc..).\n\nFor Example\n\n* `\u003cflexus-view\u003e` element can be used with:\n  * `[primary]` to change color the the view\n  * `[panel]` to turn the view into hideable panel. This in turn enables to use `[left]` or `[right]` to set position\n  * `[fullwidth]` to make the panel fill up the whole screen when opened. Specifier can also be used to only make the pannel fullwidth on small screens `[fullwidth=\"small\"]`\n  * etc ...\n\n* `[icon]` attribute adding icon to the element:\n  * Can be mixed with color and size changing attributes like `[tinted]`, `[red]`, `[small]`, `[bold]`.\n  * Should ideally be used on `\u003cbutton\u003e`, `\u003cspan\u003e`, `\u003clabel\u003e`, elements or with `[fx-item]` attribute on `\u003cdiv\u003e`.\n  * But it can be added to anything (as long as `::before` is not already defined), since `[icon]` creates custom `::before` pseudo element within the element. Adding `[icon]` to `\u003cflexus-view\u003e` is therefore posible, but does not make sense to add inline icon into a block container.\n\n# APIs\n\n## Custom Components\nEvery custom components emits these additional lifecycle events:\n* `created` - Instance of element was created\n* `connected` - Element was inserted into DOM\n* `ready` - Element was configured and is ready to use\n* `disconnected` - Element was removed from DOM\n\n### `\u003cflexus-toolbar\u003e`\nImplements `Scrollable`\n\nToolbar inherits the same behavior as `[fx-item]`. It is a horizontal flexbox with predefined spaces between children. First children is usually a button with `[icon=\"arrow-back\"]` or `[icon=\"home\"]`. Then follows a title of the toolbar, usually a `\u003ch1-6\u003e` or a `\u003cdiv flex\u003e` where `[flex]` fills out the rest of the space of the toolbar, allowing for additional icons or buttons to display on the right.\n\nToolbar can be safely used without the JS component file. Even `[multisection]` stuctures are available as long as the attribute `[multisection]` is hard coded. Otherwise, if the JS component file is imported, it can be omitted since the component can recognize its content.\n\nin multisection mode, children of toolbar can use the following attributes:\n* `[sticky]` or `[collapse]`\n* Flexus tries to automatically guess and assign these properties properly\n\t* If no element is assigned with either of these attributes, \u003cflexus-toolbar\u003e automatically tries to guess if any element is collapsible (mostly `\u003cimg\u003e` elements) and assigns `[collapse]` to it and `[sticky]` to all other elements.\n\t* If at least one element has `[collapse]`, all other are automatically assigned `[sticky]`.\n\t* If at least one element has `[sticky]`, all other are automatically assigned `[collapse]`.\n\t* For fully customized behavior, these attributes can be manually assigned to all elements and Flexus will respect it.\n\n`[seam]` removes shadow (`[elevation]`) in Material design and adds thin border at the bottom of the toolbar (in both Material design and Neon)\n\nTypical color modifying attributes can be used: `[tinted]`, `[primary]`, `[accent]`, `[translucent]`, `[transparent]`, `[opaque]`\n\n#### Available with JS only\n* `[waterfall]` sets `[elevation=\"0\"]` (hiding the shadow the element casts) when adjacent content is scolled to top. Material Design Only.\n\n#### Examples:\nsimple toolbar:\n```\n\u003cflexus-toolbar\u003e\n  \u003cbutton icon=\"home\"\u003e\u003c/button\u003e\n  \u003ch2\u003eTitle\u003c/h2\u003e\n\u003c/flexus-toolbar\u003e\n```\nmultisection toolbar:\n```\n\u003cflexus-view id=\"layout-defender\"\u003e\n  \u003cflexus-toolbar\u003e\n    \u003csection tinted thin display1\u003e\n      Your device is being monitored and protected\n    \u003c/section\u003e\n    \u003cflexus-tabs center small\u003e\n      \u003ca href=\"#\" icon=\"home\"\u003eHome\u003c/a\u003e\n      \u003ca href=\"#\" icon=\"sync\"\u003eUpdate\u003c/a\u003e\n      \u003ca href=\"#\" icon=\"history\"\u003eHistory\u003c/a\u003e\n      \u003ca href=\"#\" icon=\"settings\"\u003eSettings\u003c/a\u003e\n      \u003ca href=\"#\" icon=\"help\"\u003eHelp\u003c/a\u003e\n    \u003c/flexus-tabs\u003e\n  \u003c/flexus-toolbar\u003e\n```\n\n\n### `\u003cflexus-view\u003e`\nImplements `Visibility`, `Panel`, `Draggable`, `Scrollable`\nVisibility can be controlled by `hide()` and `show()` but it is recommended to only do it for view's with `[panel]` or let Flexus control app layout with `\u003cflexus-scene\u003e`.\n\nView usually only hosts `\u003cflexus-toolbar\u003e` (alternative `\u003cflexus-tabs\u003e` if tabs are not part of the toolbar) and a content container `\u003cmain\u003e`:\n```\n\u003cflexus-view\u003e\n  \u003cflexus-toolbar\u003e...\u003c/flexus-toolbar\u003e\n  \u003cmain\u003eContent goes here\u003c/main\u003e\n\u003c/flexus-view\u003e\n```\n\n### `\u003cflexus-drawer\u003e`\nImplements `Visibility`, `Panel`, `Draggable`\nDue to complexity of three collapsible third state the drawer can have in Neon design it is recommended to only use `toggle()` to open and close drawer, instead of `hide()` and `show()`\nDrawer automatically closes itself uppon clicking any child elements unless they have `[no-auto-hide]` or `[auto-hide=\"false\"]` attributes.\n\n#### Neon Design Specific Behavior\nDrawer has three states depending on screen size\n1) small screen size - Drawer is hidden, hamburger buttons in toolbars are shown\n2) medium screen size - Drawer is shown as thin strip pinned to left side of the screen. It can be expanded temporarily by clicking hamburger icon, but drawer closes itself again after clicking some child element. `[collapsed]` is automatically set. Hamburger buttons in toolbar are supressed and only single hamburger button inside the drawer is shown.\n3) large screen size - Drawer is pinned to the left side of the screen and expanded (`[collapsed]` is automatically removed).\n\nAutomatical expansion on large screens can be prevented by assigning attribute `[collapsed]` in template, before the element is created, or by setting property `expandable` to `false` at runtime (initial presence of `[collapsed]` sets default value for `expandable` to be `false`)\n\n`[transparent]` applies transparency on drawer in Neon design and only in collapsed mode (thin pinned column)\n\n#### Material Design Specific Behavior\n\nDrawer is by default hidden at all times and opens up above the content.\n\n### `\u003cflexus-tabs\u003e` and `\u003cflexus-pages\u003e`\nImplements `LinearSelectable`\n\nThese elements can be to a view to add sub navigation. `\u003cflexus-tabs\u003e` is a list of names and is usually placed `\u003cflexus-toolbar\u003e`. `\u003cflexus-pages\u003e` hosts the contents of tabs defined in `\u003cflexus-pages\u003e` and should contain the same number of children elements, each representing a tab. The pages element replaces `\u003cmain\u003e` inside `\u003cflexus-view\u003e`.\n\nConfiguring and connecting the two components is not necessary as long as they are together in a a view where these two elements can find each other and interconnect themselves. This can be circumvented by assigning `[no-auto-connect]` or `[auto-connect=\"false\"]` on `\u003cflexus-tabs\u003e` and both of these components can be used separately. Or `[for=\"...\"]` attribute could be assigned to tabs with matching `[id=\"...\"]` on the pages element to specifically link these two components together-\n\nCaveat: `\u003cflexus-pages\u003e` should not be used together with collapsible `\u003cflexus-toolbar\u003e` because every page could have different height and there is no clear scrollable content to anchor the transitions to.\n\n### `\u003cflexus-scene\u003e`\n\nScene controls layout of two Views on the screen.\n\nUsage:\n\n```\n\u003cflexus-scene type=\"master-detial\"\u003e\n  \u003cflexus-view\u003e...\u003c/flexus-view\u003e\n  \u003cflexus-view\u003e...\u003c/flexus-view\u003e\n\u003c/flexus-scebe\u003e\n```\n\n## Shared Classes\nFollowing classes are part of Flexus Core Support Library and define behavior shared and implemented by Flexus Custom Components \n\n### `Visibility`\n#### Properties\n* `hidden` (synchronized with attribute `[hidden]`) hides the element using css rules `display: none` and or `visibility: hidden` depending on other elements features and needs\n* `visible` (synchronized with attribute `[visible]`) is opposite of `hidden` and makes the element visible with `display: initial` and or `visibility: visible`\n\n`[hidden]` and `[visible]` are mutually exclusive and setting one changes value of the other automatically.\n\nNote: Other classes inheriting this class usually override css rules to fit their needs element, but semanticity stays the same.\n\n#### Methods\n* `hide()` - Hides the element\n* `show()` - Shows the element\n#### Events\n* `hide` - Element changed visibility and is now hidden\n* `show` - Element changed visibility and is now visible\n\n### `Panel`\n* `[pinned]` element will be by default shown on larger screen in pinned state (within the flow, not flying above the content)\n* `[pinnable]` in sets mode to `[pinned]` when the panel is opened\n* `[auto-show]`, `[auto-hide]` automatically opens or closes the panel when screen size changes\n* `[top]`, `[right]`, `[bottom]`, `[left]` controls positioning of the element using respective css rules in conjuction with `position: absolute`.\n\n`Panel` is always implemented with `Visibility` and shares the same properties, methods and events.\n\nPanel can be remotely controlled via by buttons with a `[for=\"...\"]` attribute matching with `[id=\"...\"]` of the panel, similar to linking HTML's built in `\u003clabel\u003e` and `\u003cinput\u003e`.\n\n### `Draggable`\n* Draggable is always implemented with Panel as it shares the same positioning attributes.\n* `[draggable]` is only public API allowing or (temporarily) disabling drag and drop functionality\n\n### `LinearSelectable`\n\n`LinearSelectable` is implemented by container of other elements of which one at a time can be selected. Selecting `[disabled]` elements will cancel the request as well as selecting outside of range (less than 0 or more than ammount of children).\n\n#### Events\n* `selected` - Position of selected item\n#### Methods\n* `prev()` - Selects previous item\n* `next()` - Selects next item\n* `select(n)` - Selects Nth item\n#### Events\n* `selected` - New item has been selected\n\n\n# CSS Attributes\n\n## Layout Attributes\n\n### Flexbox Layout\n\n#### `[layout]`\nTurns element into a flexbox which can be either `[horizontal]` or `[vertical]` and aligns content based on given position: `[top]`, `[right]`, `[bottom]`, `[left]`, `[center]`, or a combination like `[left][bottom]`, etc.\n\n#### `[fx-item]`\n\nBasic building block for creating a lists.\n\nTurns element into a flexbox with integrated margin and padding rules that align around indentation line.\n\nCan be used with icons, checkboxes, multiline text, etc.\n\nFew examples of use:\n```\n\u003cdiv fx-item icon=\"cloud\"\u003eCloud storage\u003c/div\u003e\n\n\u003cdiv fx-item\u003e\n\t\u003ci icon=\"cloud\"\u003e\u003c/i\u003e\n\tCloud storage\n\u003c/div\u003e\n\n\u003cdiv fx-item\u003e\n\t\u003ci icon=\"cloud\"\u003e\u003c/i\u003e\n\t\u003cspan flex\u003eCloud storage\u003c/span\u003e\n\t\u003cinput type=\"checkbox\"\u003e\n\u003c/div\u003e\n\n\u003cdiv fx-item\u003e\n\t\u003ci icon=\"cloud\"\u003e\u003c/i\u003e\n\t\u003cdiv two-line\u003e\n\t\t\u003cdiv\u003e1.227.638.0\u003c/div\u003e\n\t\t\u003cdiv muted\u003eVersion\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv two-line\u003e\n\t\t\u003cdiv\u003eYesterday\u003c/div\u003e\n\t\t\u003cdiv muted\u003eLast save\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cinput type=\"checkbox\"\u003e\n\u003c/div\u003e\n```\n\n\n### Sizing\n\n#### `[fullwidth]`, `[halfheight]`\nSets `width` or `height` to `100%`.\n\n#### `[fullwidth]`, `[halfheight]`\nSets `width` or `height` to `50%`.\n\n#### `[fullbleed]`, `[bleed]`\n`[bleed]` expands element beyond indentation line by setting `-1rem` to `margin-left` and `margin-right`.\n`[fullbleed]` is a shortcut for `[fullwidth][bleed]`\n\n#### `[fit]`\n\n### Visibility\n\n#### `[hidden]` and `[visible]`\nAttributes [hidden] and [visible] set visibility to hidden and visible respectively as well as overriding default behavior of [hidden], which also sets display to none, where needed.\nBoth [hidden] and [visible] can be used with a specifier value (small, medium, large, neon, material) to further control the behavior.\nAttributes [hidden] and [visible] should not be used with specifiers (small, medium, large, neon, material) on elements that have imported their advanced javascript behavior, because of built in behavior automatically adjusting visibility and display of the element to fit the needs and context.\n\n## Typography\n\n### Presets\n\n#### `[display4]`, `[display3]`, `[display2]`, `[display1]`\n\nApplies presets making the text thin and large.\n\n#### `[headline]`, `[title]`, `[subhead]`\n\nAdditional presets for headings.\n\n### `[normal]`\n\nresets font size and style.\n\n### Size\n\n`[small]`, `[normal]`, `[large]`\n\n### Style\n\n`[italic]`, `[underline]`, `[strike]`, `[uppercase]`, `[lowercase]`, `[capitalize]`\n\n### Weight\n\n`[thin]`, `[strong]`, `[bold]`\n\n### Alignment\n`[text-left]`, `[text-center]`, `[text-right]` or more specific variants:\n`[text-align=\"left\"]`, `[text-align=\"center\"]`, `[text-align=\"right\"]`\n\n## Color\n\n### Themes\n\n#### `[dark]`, `[light]`\n\nSets light or dark theme for the `\u003cflexus-view\u003e` or `\u003cbody\u003e`.\n\n#### `[subtle]`\n\nChanges shade of the theme when used with `[dark]` or `[dark]`.\n\n### Primary and accent colors\n\nFlexus can detect and use and/or update theme color related meta tag and use it as a primary color.\n```\n\u003cmeta name=\"theme-color\" content=\"#2196F3\"\u003e\n```\n\n### Color palette\n\n```\nred, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, gray, blue-gray\n```\n\n### `[primary]`\nPrimary color can be set through `[primary=\"value\"]` with a value of color name from Material Design Color Palette. This defines CSS variable that children in scope of this attribute may or may not use.\n\nThis color can be then applied using read only attribute `[primary]`.\n\n### `[accent]`\nSame as `[primary]`\n\n\n### `[tinted]`\n`[tinted]` is a read only attribute that is an adaptive combination of primary and accent color. This attribute changes foreground in inline elements and background in block elements.\n\n### Transparency\n\n#### `[transparent]`\nMakes element transparent.\n\n#### `[translucent]`\nMakes element see-through.\n\n#### `[opaque]`\nDisabled transparency.\n\n### `[foreground]`\n\nCan be used to fine-tune styles. Applies immediate foreground color of the element.\n\nUses the same color palette names `[foreground=\"color\"]`\n\n### `[background]`\n\nMuch like `[foreground]`, but changes backgorund\n\n### `[red]`, `[blue]`, `[green]`, etc...\n\nDirectly applies the color to the element. Like with `[tinted]` foreground or background is changed based on element type.\n\n\n## Multipurpose Attributes\n\n### `[elevation]`\n\nChanges shadow - position in Z axis.\n\nValues can be used from range `0-5` or in a `dp` unit: `0dp`, `2dp`, `4dp`, `6dp`, `8dp`, `10dp`\n\nBased on and only available in Material Design.\n\n### `[avatar]`\nAvatar is multipurpose attribute that can be used with various elements such as `input[type=\"checkbox\"], img, i[icon], div`, etc and was built specifically (but not exclusively) for list items (`[fx-item]`).\n\nExample of simple item with avatar and name\n\n```\n\u003cdiv fx-item\u003e\n\t\u003cimg src=\"avatars/zenyatta.jpg\" avatar\u003e\n\tZenyatta\n\u003c/div\u003e\n```\n\nNot that it wouldn't be possible to support children within avatar but various Chrome rendering glitches, performance hickups and extensive codebase lead to withdrawing support for this.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikekovarik%2Fflexus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikekovarik%2Fflexus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikekovarik%2Fflexus/lists"}