APEX Developers Do More With Less!! How do YOU manage your APEX CSS? Storage Options 1. Web server 2. APEX repository 3. In line 4.

Size: px

Start display at page:

Download "APEX Developers Do More With Less!! How do YOU manage your APEX CSS? Storage Options 1. Web server 2. APEX repository 3. In line 4."

Darrell Pitts
6 years ago
Views:

2 How do YOU manage your APEX CSS? How do YOU manage your APEX CSS? Reference Options 1. Theme 2. Theme Style 3. User Interface Definition 4. Page Template 5. Page 0 6. Page 7. And probably a couple more So it s easy to create a MESS LESS Leaner CSS

3 SASS Syntactically Awesome StyleSheets SCSS Sassy CSS

4 OOCSS Object Oriented CSS Issue 1 Issue 2 You need a CSS Expert Your CSS File(s) grows

5 Issue 3 Issue 4 No CSS code re-use Result CSS is fragile Your Solution CSS increases 1:1 with HTML 20

6 #button { width: 200px; height: 50px; padding: 10px; <html> <div id= box > <button id= button /> </div> <div id= widget ></div> </html> Separating Structure from Skin #box { width: 400px; overflow: hidden; #widget { width: 500px; min-height: 200px; overflow: auto; #button { width: 200px; height: 50px; padding: 10px; #box { width: 400px; overflow: hidden; #widget { width: 500px; min-height: 200px; overflow: auto;.button { width: 200px; height: 50px;.box { width: 400px; overflow: hidden;.widget { width: 500px; min-height: 200px; overflow: auto;.skin { <html> <div class= box skin > <button class= button skin /> </div> <div class= widget skin ></div> </html>.button { width: 200px; height: 50px;.box { width: 400px; overflow: hidden;.widget { width: 500px; min-height: 200px; overflow: auto;.skin {

7 Separating Structure from Skin Separating Container from Content div{ width: 200px; height: 50px; padding: 10px; div h3{ margin: 0px; overflow: hidden; div p{ margin: 3px; min-height: 200px; overflow: auto; <html> <div> <h3>header</h3> </div> <div> <p>paragraph</p> </div> </html>

8 .bordered{.container{ width: 200px; height: 50px; padding: 10px;.region-header{ margin: 0px; overflow: hidden;.flexbox{ margin: 3px; min-height: 200px; overflow: auto; <html> <div class= bordered container > <h3 class= bordered region-header > Header </h3> </div> <div class= bordered container > <p class= bordered flexbox >Paragraph</p> </div> </html> Separating Container from Content.less file(s) LESS does MORE client preprocessor server.css file

# compile bootstrap.less to bootstrap.css $ lessc bootstrap.less bootstrap.css # compile bootstrap.

css Theme Roller <link rel="stylesheet" type="text/css" href="/css/demo2.

html">item 1</a> </li> <li> <a href="page2.

rel="stylesheet" type="text/css" href="/css/demo2.

9 # compile bootstrap.less to bootstrap.css $ lessc bootstrap.less bootstrap.css # compile bootstrap.less to bootstrap.css and minify (compress) the result $ lessc -x bootstrap.less bootstrap.css Theme Roller <link rel="stylesheet" type="text/css" href="/css/demo2.css"> <aside id="sidemenu"> <h2>side menu</h2> <ul> <li> <a href="page1.html">item 1</a> </li> <li> <a href="page2.html">item 1</a> </li> </ul> </aside> #sidemenu h2{ color: black; #sidemenu ul li a{ color: green; <link rel="stylesheet" type="text/css" href="/css/demo2.css"> <aside class="sidemenu"> <h2 class="menu-header">side menu</h2> <ul class="menu-list"> <li class= menu-list-item"> <a class="" href="page1.html">item 1</a> </li> <li class= menu-list-item"> <a class="" href="page2.html">item 1</a> </li> </ul> </aside>.sidemenu color: black;.sidemenu color: green;

10 .sidemenu color: black;.sidemenu color: green;.sidemenu{ color: black; color: green;.sidemenu{ color: black; color: : : : 16px;.sidemenu{ Nesting { color: #000000;.sidemenu.menu-link { color: #008000; Variables : : : 16px;.sidemenu{ font-size: 12px;.sidemenu.menu-header { color: #000000;.sidemenu.menu-link { color: #008000; font-size: : : : / 4;.sidemenu{ Calculations : green; : lighten(@menu-header-color, green; : / 4;.sidemenu{ background-color : greyscale(@menu-header-color,@menu-link-color); { color: none; background-color: #404040; { color: #008000; ul{ { Built-ins color: #00e600; font-size: 12px;.sidemenu ul { color: #00e600;

border-radius: @rad; http://127.0.0.1:8887/7.mixins.html @menu-header-color.

greyscale(@menu-header-color,@menu-link-color); 20%); @menu-font-size.

-moz-border-radius: @rad; border-radius: text-decoration: @rad; none; color:

sidemenu{ background-color ul{ : greyscale(@menu-header-color,@menu-link-color);.

11 @import "library.less";.roundedcorners{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; : 10px ){ : background-color : lighten(@menu-header-color, : greyscale(@menu-header-color,@menu-link-color); : 16px; 25px / 4; font-size: : 10px ){ border-radius: none; background-color ul{ : greyscale(@menu-header-color,@menu-link-color);.roundedcorners( 25px ); Use Building Blocks ul{ Other People s Use Building Blocks Q & roel@apexconsulting.nl 44 Copyright 2016 APEX Consulting

APEX Developers - Do More With Less!!

APEX Developers - Do More With Less!! Roel Hartman Copyright 2014 APEX Consulting 2 LESS Leaner CSS SASS Syntactically Awesome StyleSheets SCSS Sassy CSS OOCSS Object Oriented CSS Issue 1 You need a CSS