UI Improvements II (Simplification)

Owned by Ben Cato (Unlicensed)
Last updated: Jun 01, 2015
2 min read

//Documentation in progress!

The objective here is to simplify the UI piece in our SCORE platform. New updates need to be addressed in two areas:

  • HTML markup
  • LESS/Sass styling (via inheritance)

 

HTML: For our HTML that is generated from our default components, we have to trim the class names down. I'm proposing that we keep our components down to a "3 class name" limit. 

 

  • The first class name could simply be called ".score". All score components are automatically delegated with the ".score" class. 

  • The second class name would be the actual component name; ".score-highlight", or ".score-hero", or whatever. 
     
  • The third class name would be any class selection name. If one component has the ability to accept a class selection, then they all should. With this in place, any UI dev would have a tremendous advantage over control and portability of all SCORE components. (Right now we are doing this with our grid, ".score-page/.score-structural". Why not apply this to all of our inherited components?)

 

Example:

As of now, our jumbotron/hero component looks like this (in respect to the HTML output):

 <div class="jumbotron score-section-hero score-component score-content score-image score-hero (class selection)">

 

Needs to be simplified to this: 

 <div class="score score-hero (class selection)">


LESS/Sass styling: As a UI developer, I know this will work. I can simply inherit ".jumbotron" styles within my LESS/Sass extension. There is no need to include the framework class name within the markup. Inheritance is key. Tommy says a Sitecore developer will need a way to address all score components. This would easily be accomplished by applying the ".score" class to all SCORE components. And of course, we have our class selection parameter available to style and maintain different versions of single components.
Goals:
  • simplify our HTML output
  • simultaneously create versatility and portability
  • to be included in our next release of SCORE

 

 

CONTAINERS

Page Elements

<header></header>    //no class needed

<footer></footer>    //no class needed

Page Layout

<div class="container"> //.score-container is not needed
     <div class="score score-column(col) (class selection)"></div>    //.score-page is no longer needed
</div>

Inner Layout

<div class="score score-column(col) (class selection)"></div>    //.score-structural is no longer needed

CONTENT

Typical Component

<div class="score score-component-name (class selection)"></div>


NAVIGATION