- This is a skeleton framework for projects built with the concept pf tidly scaling and is based off the Atomic Design theory by Brad Frost.
- This Atomic-esque Design structure is not a fit for every project.
-
FLAW: DRY is not being followed. The biggest problem with scalability from here is the lack of dynamic functionality. WITHOUT a more dynamic system in place there will be a lot of repetitive Code.
-
- TODO: (short term improvement for this static version) refactor styling in patterns/atoms/card--travel/card--travel.scss, it is overly repetitive.
-
- TODO: Accesibilty and Semantic HTML are not being fully utilized. Improve the cards there.
-
- PLANS: Either: Re-design cards to work with our psudo dynamic system of using Javascript/JSON to inject HTML at a target ID for less repitition (for this static version of the system skeleton) ||, A framework or Library system version would further improve the dynamic issue and prevent overly verbose/repetitive patterns. React would lend itself well to componentization in this Atomic style.
-
- FLAW: Cards have potential for uneven sizes (heights) compared to those in same row at some screen sizes, especially with unknown amounts of text possible: NEED to determine Product intentions and User Interaction before building further functionality.
-
-
- One possible solution is to clamp text overflow, example below. AGAIN: should determine Product/User further functionality is added.
.wt-card--travel-body-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-
-
- TODO: Cards are also may need links, BUT need more info on interaction intentions.
(in the spirit of keeping this a light weight skeleton that can adapted to to a wide variety of projects for me no tools other than sass were added to this version)
sass --watch css-core/wt.scss:style.css
&&
http-server -p 8080
-
TODO: Update links to be relative to readme.md
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
// IE10+ CSS here // ie bug
.targeted-class {
// do stuff here
}
}