Central Processing End Language, also known as the CPE Language and the Evelution Design System is an open source Visual Language framework that is used as the base of later Web Qore releases and is the main framework used accross Evelution. This framework and will be constantly updated every four months in the CPE Language GitHub repo and every time an Evelution release comes out.
What are the goals of Central Processing End Language?
CPE Language is an alternative to the various other design systems we've used in other projects before such as Web Qore (Then known as Mpisto War 2018 and Ryneeeel Zekzphire Grooze) and the defunct Ryneeeel Zekzphire Zentral. The main goals are to:
Provide as much quality as needed
Evolve as the time passes in order to compete with more modern frameworks and operating system designs
Experiment as much as needed inside the Evelution Skin in order to gather feedback from other users. This means that some concepts may never make into CPE Language
Is Central Processing End Language made exclusively for the Evelution ecosystem?
Of course not. Anyone is able to use this framework to create their projects and is licensed under the Apache 2.0 License. Contributions to this project can be done by sending a pull request to the SkinEvelution GitHub repo as changes approved will go into Evelution first
Buttons
In CPE, all buttons are made out of round corners and should not contain any gradient at all. We use 3 types. Primary, Secondary and Text
Primary Buttons
To Inject a primary button, use an element and put the cpe-button class in it. Primary buttons take advantage of Highlight Background Color:
To Inject a secondary button, use an element and put the cpe-button and is-secondary class in it. Secondary buttons take advantage of Hyperlink Background Color:
To Inject a secondary button that becomes primary when focused, put the is-primary-when-selected class in it alongside cpe-button and is-secondary classes.
To Inject a tertiary button, use an element and put the cpe-button and is-tertiary class in it. Tertiary buttons take advantage of Hyperlink Background Color:
To Inject a Frameless button, use an element and put the cpe-button and is-text class in it. Frameless buttons take advantage of Anchor Background Color:
To Inject a button that takes advantage of Inactive Text and Canvas Text Background Colors instead of Highlight and Hyperlink, use an element and put the cpe-button and is-unaccented classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that takes advantage of Active Title and Active Text Background Colors instead of Highlight and Hyperlink, use an element and put the cpe-button and is-alternate classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that takes advantage of Alert Background Color instead of Highlight and Hyperlink, use an element and put the cpe-button and is-alert-color classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that takes advantage of Pause Background Color instead of Highlight and Hyperlink, use an element and put the cpe-button and is-pause-color classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that takes advantage of Warning Background Color instead of Highlight and Hyperlink, use an element and put the cpe-button and is-warning-color classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that takes advantage of Success Background Color instead of Highlight and Hyperlink, use an element and put the cpe-button and is-success-color classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that takes advantage of Progress Background Color instead of Highlight and Hyperlink, use an element and put the cpe-button and is-progress-color classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that takes advantage of Message Background Color instead of Highlight and Hyperlink, use an element and put the cpe-button and is-message-color classes in it. Opitionally, the is-secondary, is-tertiary or is-text classes may be added as well.
To Inject a button that has a square size, use an element and put the cpe-button and is-square classes in it. Opitionally, other classes like the is-secondary, is-tertiary or is-text ones may be added as well.
Button Groups
You can make a group of buttons as well. You can mix colors like having altenate and regular button color but not types (Having text and primary button is not recommended althought button preview in theme designer does it)
Regular
You add cpe-button-group and series of cpe-button
Multiple Button Groups
It is also possible to have nested button groups. Just wrap all cpe-button-group elements into a cpe-button-groups element as seen in the following example
Button Group with Dropdown
It is also possible to do button group with a dropdown
It is also possible to do button group with an input box
Dropdowns
In CPE, all dropdowns are clickable (Hoverable for nested levels) and may contain shadows (Always with Shadow on Global Navigation)
Regular
You use a div with cpe-dropdown any container you want, preferably cpe-button with a dropdown chevron but other containers should work as well. Then use cpe-dropdown__content class on the div inside the dropdown container. You use a ul with the class cpe-list, preferably with the is-linked as well. Then you add li and an anchor tag. By putting the is-flipped class to the cpe-dropdown element, dropdown will open from the opposite direction as seen in some examples.
You can set the cpe-orient attribute to land in cpe-dropdown element to make dropdown open from the right. If that dropdown has the is-flipped class as well, it will open from the left
Dropdowns may have 2 or more levels. Inside a dropdown-link, you must use the cpe-dropdown-level-nested. And another div with the class cpe-dropdown-level-nested__content, then following the same procedures as the level 1 version minus this one. Note that the 2nd level menu is aligned to the top of 1st level dropdown by default, but it doesn"t work for shorter list so we need to add class is-sticked-to-parent to elements that contains shorter level 2 menu. Note that scrolling version and thick shadows are not recommended.
In CPE, all text boxes are made out of round corners and should not contain any gradient at all. Two types exist, Primary and Secondary and both have a similar appearance but they have different colors
Primary Text Inputs
To Inject a primary text input, use an element and put the cpe-input class in it. Primary text boxes take advantage of Highlight Background Color:
Secondary Text Inputs
To Inject a secondary text input, use an element and put the cpe-input and is-secondary class in it. Secondary text boxes take advantage of Hyperlink Background Color:
Unaccented Color
To Inject a text input that takes advantage of Inactive Text and Canvas Text Background Colors instead of Highlight and Hyperlink, use an element and put the cpe-input and is-unaccented classes in it. Opitionally, the is-secondary class may be added as well.
Alternate Color
To Inject a text input that takes advantage of Active Title and Active Text Background Colors instead of Highlight and Hyperlink, use an element and put the cpe-input and is-alternate classes in it. Opitionally, the is-secondary class may be added as well.
Alert Color
To Inject a text input that takes advantage of Alert Background Color instead of Highlight and Hyperlink, use an element and put the cpe-input and is-alert-color classes in it.
Pause Color
To Inject a text input that takes advantage of Pause Background Color instead of Highlight and Hyperlink, use an element and put the cpe-input and is-pause-color classes in it.
Warning Color
To Inject a text input that takes advantage of Pause Background Color instead of Highlight and Hyperlink, use an element and put the cpe-input and is-warning-color classes in it.
Success Color
To Inject a text input that takes advantage of Success Background Color instead of Highlight and Hyperlink, use an element and put the cpe-input and is-success-color classes in it.
Progress Color
To Inject a text input that takes advantage of Progress Background Color instead of Highlight and Hyperlink, use an element and put the cpe-input and is-progress-color classes in it.
Message Color
To Inject a text input that takes advantage of Message Background Color instead of Highlight and Hyperlink, use an element and put the cpe-input and is-message-color classes in it.
Textarea Text Input
It is also possible to use the cpe-input class into a textarea element. As with all other textarea elements, it will use a monospaced font by default
Tabs
Tabs can be made by using a ul element of cpe-tabs. Use a li with a class of cpe-tabs__tab which a is-alternate can be used as well for alternation of color. Then inside it, use an anchor or a div with the class cpe-tabs__tab-label
Regular
Following the above procedure will produce these three tabs
Simple Tab
Simple Tab
Simple Tab
Dropdown Tabs
Tabs can also consist of dropdowns. Follows the same procedure as buttons with dropdowns
You can make floating buttons with the use of cpe-floating-button. Only one icon is allowed
Button Group
Use cpe-floating-button-group class and wrap floating buttons to make a list of floating buttons. Use is-vertical for column group of floating buttons
Banner Notifications
Banners can be made by the use of cpe-banner-notification class.
info
Stacked notification 1.close
pending
Stacked notification 2 with very long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque ullamcorper sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus.close
done
Stacked notification 3.close
report_problem
Stacked notification 4 with very long content. Lorem ipsum dolor sit amet,close
pause
Stacked notification 5.close
report
Stacked notification 6 with very long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque ullamcorper sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus.close
Toggle Inputs
Toggle is a control that is used to quickly switch between two possible states. All toggles require a label due to fact that styling inputs is tricky cross browser. All toggle inputs should have a unique id for label to work correctly
Disabled Toggles
To make toggles disabled, put the disabled attribute on both the input and the label as seen in the following examples
Tables
In CPE, you can use tables with wikitable and fancytable class.
Wikitable Tables
Put the wikitable class to the table element. This creates a basic table styling reminiscent of the MediaWiki table styling with translucent background on special-colored cells
Name
Surname
Gender
John
Doe
Male
Carrina
Smith
Female
Albert
Williams
Male
Camile
Shay
Female
Tom
Edisson
Male
Erica
Granger
Female
Name
Color
Alert
Red
Pause
Orange
Warning
Yellow
Success
Green
Progress
Blue
Message
Gray
Fancytable Tables
Put the fancytable class to the table element. This creates a table styling with a small shadow, highlight-colored table headers and opaque background on special-colored cells
Name
Surname
Gender
John
Doe
Male
Carrina
Smith
Female
Albert
Williams
Male
Camile
Shay
Female
Tom
Edisson
Male
Erica
Granger
Female
Name
Color
Alert
Red
Pause
Orange
Warning
Yellow
Success
Green
Progress
Blue
Message
Gray
Settings
palette
App Theme
This setting sets CPE Documentation's device theme