Hi Guangrong, Below is the documentation on portal UI styling and provides the references to create your first application page with appropriate CSS.
* https://wiki.onap.org/display/DW/Portal%27s+SDK+UI+documentation * https://docs.onap.org/en/beijing/submodules/portal.git/docs/tutorials/portal-sdk/your-angularjs-app.html Regarding “CSS files under ecomp-portal-FE-common<https://urldefense.proofpoint.com/v2/url?u=https-3A__gerrit.onap.org_r_gitweb-3Fp-3Dportal.git-3Ba-3Dtree-3Bf-3Decomp-2Dportal-2DFE-2Dcommon-3Bh-3Ddbc46e177bbd1cf8219f12a4adcb5ce9d50d9a7b-3Bhb-3Drefs_heads_master&d=DwMFaQ&c=LFYZ-o9_HUMeMTSQicvjIg&r=WrNqy1qTY6qs8trIiLe-U2OvGp0SXnE4nO3a-LJ-q_w&m=c6FVR36j87AP144DyDwjjfIOqb0LGpJtxyZ-HYuMuME&s=VXUcn5DBHgpmkwR046iK3XLckNmPEfD2nV26vVanCgY&e=> and ecomp-portal-FE-os<https://urldefense.proofpoint.com/v2/url?u=https-3A__gerrit.onap.org_r_gitweb-3Fp-3Dportal.git-3Ba-3Dtree-3Bf-3Decomp-2Dportal-2DFE-2Dos-3Bh-3D1d159f94b092a8b3684b9e58adb226cd26101235-3Bhb-3Drefs_heads_master&d=DwMFaQ&c=LFYZ-o9_HUMeMTSQicvjIg&r=WrNqy1qTY6qs8trIiLe-U2OvGp0SXnE4nO3a-LJ-q_w&m=c6FVR36j87AP144DyDwjjfIOqb0LGpJtxyZ-HYuMuME&s=fcppWtBvKBlBDE3gi6iYYET8kVEUyAEVGEHtCCG6Css&e=>”, they are structured in sucha way that, css files in “*-common” are general purpose which can be used commonly by any applications (app), but the css files in “*-os” are specific to your app. If your GUI is based on the portal-sdk (which is recommended), then you need both “*-common” and “*-os”; If not based on portal-sdk, then you can pick appropriate css elements from these projects to make your GUI output align closely with the other ONAP apps. In case of any specific questions, please reach out to Portal experts on these topics (CCed Sunder and Saravanan). Thanks. Manoop From: Guangrong Fu <[email protected]> Date: Monday, September 17, 2018 at 2:27 AM To: "TALASILA, MANOOP (MANOOP)" <[email protected]> Cc: "[email protected]" <[email protected]>, onap-discuss <[email protected]> Subject: [portal] ONAP GUI Styling Guidance Hi Manoop, The Holmes team is developing its GUI to make itself more user-friendly. Because our ultimate goal is to integrate it with CLAMP (or Policy), we want to make the appearance of the GUI well aligned with other components in ONAP. I've looked through the Portal repo and found some CSS files under ecomp-portal-FE-common<https://urldefense.proofpoint.com/v2/url?u=https-3A__gerrit.onap.org_r_gitweb-3Fp-3Dportal.git-3Ba-3Dtree-3Bf-3Decomp-2Dportal-2DFE-2Dcommon-3Bh-3Ddbc46e177bbd1cf8219f12a4adcb5ce9d50d9a7b-3Bhb-3Drefs_heads_master&d=DwMFaQ&c=LFYZ-o9_HUMeMTSQicvjIg&r=WrNqy1qTY6qs8trIiLe-U2OvGp0SXnE4nO3a-LJ-q_w&m=c6FVR36j87AP144DyDwjjfIOqb0LGpJtxyZ-HYuMuME&s=VXUcn5DBHgpmkwR046iK3XLckNmPEfD2nV26vVanCgY&e=> and ecomp-portal-FE-os<https://urldefense.proofpoint.com/v2/url?u=https-3A__gerrit.onap.org_r_gitweb-3Fp-3Dportal.git-3Ba-3Dtree-3Bf-3Decomp-2Dportal-2DFE-2Dos-3Bh-3D1d159f94b092a8b3684b9e58adb226cd26101235-3Bhb-3Drefs_heads_master&d=DwMFaQ&c=LFYZ-o9_HUMeMTSQicvjIg&r=WrNqy1qTY6qs8trIiLe-U2OvGp0SXnE4nO3a-LJ-q_w&m=c6FVR36j87AP144DyDwjjfIOqb0LGpJtxyZ-HYuMuME&s=fcppWtBvKBlBDE3gi6iYYET8kVEUyAEVGEHtCCG6Css&e=>. But I don't know which of them could be used as our basic styling guidelines. Is there a wiki page telling us how to style our pages? Or are there any existing CSS files for us to follow? Thanks, Guangrong -=-=-=-=-=-=-=-=-=-=-=- Links: You receive all messages sent to this group. View/Reply Online (#12455): https://lists.onap.org/g/onap-discuss/message/12455 Mute This Topic: https://lists.onap.org/mt/25724032/21656 Group Owner: [email protected] Unsubscribe: https://lists.onap.org/g/onap-discuss/unsub [[email protected]] -=-=-=-=-=-=-=-=-=-=-=-
