Professional UI Design with APEX 5.1
DOAG 2017
First things first
English?
Deutsch?
About me
• Freelancer, Steven Grzbielok IT-Solutions
• Software Developer and Architect, Oliver Funk Myjur
Software Entwicklung
• Chairman, Entrepreneursclub Darmstadt e.V.
• Oracle since 4 years
• Microsoft since 3 months 🙃
Agenda
1. Design in General
2. APEX Best Practices
3. Chrome Dev Tools
4. APEX NITRO
Requirements
1. Should have worked with Oracle APEX (obviously)
2. Basic HTML knowledge
3. Basic CSS knowledge
4. Not very afraid of the command line
If not, look here: https://www.slideshare.net/StevenGrzbielok/apex-51-ui-design-crashkurs
UI Design: What is it?
Jesse James Garret: Elements of User Experience
Design Process
Lo-Fi Prototyping
Adobe Xd, invisoinapp, Sketch
High-Fi
Prototyping
High-Fi
Prototyping
Quick SQL for DB mockups
Blueprint for generating big apps
without effort
🚀
Basic concepts in APEX
Theme Template Template
Options
Don‘t unchain your theme!
Best practice: Customizing
1. Theme Roller
2. Templates & Template Options
3. Custom CSS-Classes
1. CSS-Code in Theme Roller
2. CSS-/JavaScript files
4. Custom templates
1. Define and adjust template options  flexible to use or use not
the change
2. Adjust template structure
Custom code: Always stay responsive!
1. Media Queries
@media screen and (max-device-width: 480px) { .column
{ float: none; } }
2. Flexible Images
img
{ height: auto; max-width: 100%; }
3. Fluid Grid
#region
{ max-width: 61.75em;
margin-top: 0.5%; }
Your new best friend
Your new best friendYour new best friend
Demo time!
LESS
.class1 {
background-color: #2d5e8b;
}
.class1 .class2 {
border-color: #fff;
color: #2d5e8b;
}
@color-base: #2d5e8b;
.class1 {
background-color: @color-base;
.class2 {
border-color: #fff;
color: @color-base;
}
}
Less CSS
 Less/Sass
Like CSS but
with…
•Variables
•Nesting
•Importing
•Mixins
•Functions
•Operations
•Scopes
Easier to maintain
😎
Looking for help?
https://apex.world https://thedesignership.com
Contact me!
Professional UI Design with APEX 5.1

Professional UI Design with APEX 5.1

Editor's Notes

  • #21 Local Changes DOM CSS Sync with local sources