460aca5b01
Replaces #4965. Rolls back #4895. Fixes #4964. Partially fixes #4819. The previous attempts to add a stylised "focus" ring, while with the best intentions, did not take into account how "outline" normally works for people using visual aids. Most high contrast software will effect the outline if its available (ie. make it bolder or more prevalant), thus the "outline" property is paramount to maintaining accessibility. The previous changes also present issues with elements using box-shadows already, and again, on high contrast, box-shadows are no longer rendered. This change will bring back the outline property for focus, but with an addition to allow a blue highlight for Firefox, would should keep it in "parity" with WebKit. Refs: - https://a11yproject.com/posts/never-remove-css-outlines/ - http://www.outlinenone.com - https://stackoverflow.com/questions/52589391/css-box-shadow-vs-outline |
||
|---|---|---|
| .. | ||
| docs | ||
| font | ||
| images | ||
| js | ||
| less | ||
| vendor | ||
| README.md | ||
| storm-min.js | ||
| storm.css | ||
| storm.js | ||
| storm.less | ||
README.md
October Storm
Welcome to the client-side framework designed exclusively for the OctoberCMS back-end area, referred to as October Storm. The library is quite large as it has many features and it is not really itended to be used outside of October.
Design consideration
Each LESS library should always include the global.less to ensure all mixins and variables are available.
Compiling JavaScript depends on October's asset combiner as the =require directive was invented here to emulate the LESS @import functionality.
UI Components
Components are a mixture of CSS and JavaScript (Controls), or can be solely style-based (Styles) or solely script-based (Scripts).
Each component has a strong name, for example the loading indicator has the name loader. For complex components, they can be broken in to child components, for example loader.stripe. Not all child components can be used independently of their parents, but this is certainly possible and a nice idea.
Note: Documentation for each component can be found in the docs/ directory.
Naming conventions
In most cases a control will be styled in CSS with the prefix control-something and the JavaScript is applied using data-control="something". This allows a rendering as a styled control only, without the JavaScript and vice versa.
<div class="control-list" data-control="list">...</div>
The appearance of a control can be modified using additional CSS classes. These modifiers should be prefixed with the control name or the word is if the modification is binary (a boolean). For example:
<div class="control-list list-purple is-sortable"></div>
The above uses two modifiers; one to make it purple and one to declare that it is sortable. In the above example, the class is-purple is not recommended because it is a variable attribute as opposed to a binary one. Here are some common words used for attributes and their meanings:
- flush: The control will use no margin, padding and/or border to the controls or containers surrounding it. Eg:
list-flush - inset: The control will use a negative margin on the left or right side to negate a padded container. Eg:
list-inset - offset: The control will use a positive margin or padding on the left or right to assist a container with padding. Eg:
list-offset - padded: The control will use padding all around. Eg:
list-padded