[Silk UI Framework] Simply adding per-element, per-breakpoint columnation

[Silk UI Framework] Simply adding per-element, per-breakpoint columnation

  
I understand that Silk is Bootstrap-like while introducing some parent classes in order to streamline responsive behavior. This makes some globally-responsive stylings easier to configure, and that's good, but the framework seems to lack a key feature that BS3 has a fundamental component: context-specific columnation at the element level.

The SilkUI approach seems more similar to the BS2 paradigm: an element has a fixed columnation defined at "not phone" sizes, and it is full width when on small glass. There are some break-first, -last, -etc helpers in Silk that offer some variation, but this only covers a fraction of possible element-size cases.

BS3 offers a very simple way to define the size of each element at each breakpoint. I don't see a way to do this in Silk without creating (many) custom classes, which of course would be a great deal of work.

Below (and in the attached video) is an overly-simplistic use case, but you can see here that each of these two elements has multiple size definitions, quickly added as additional classes for each breakpoint. In doing so the fields are never larger nor smaller than they need to be for the content they are intended to contain.



Hm, the add-file attachment field is broken here. Instead, a link: https://youtu.be/Kcbj6GTeEoY
Solution
Hello Jeff,
 
Silk UI uses an approach that allows even the most novice user in web technologies to build great looking applications without much effort. This means that in some cases we had to balance between easiness of use and flexibility, so we tried to cover the most common use cases. 
 
This means that for the remaining use cases, such as this one, the developer is in charge of extending the framework. But even then, Silk UI can help you with that:
 
Silk UI provides some CSS classes that covers 6 different types of displays: 
  • Phone
  • Tablet
  • Desktop
  • Desktop small
  • Desktop big
  • Desktop hd
For each of these displays, you can also have Portrait and Landscape modes.
 
So, to cover your example, you could do something like:
 
<div class="myContainer">

.tablet .myContainer{
    width: 20%;
}
.phone .landscape .myContainer{
    width: 50%;
}
.phone .portrait .myContainer{
    width: 100%;
}
 
or even 
 
<div class="col-xs-6 col-md-3">

where your css could be something like:

.phone .col-xs-6 {
   width: 16.6667%
}

.phone .col-md-3 {
   width: inherit;
}

.tablet .col-md-3 {
   width: 33.3334%;
}
 
Bear in mind, that we try to help non-geek css users (unlike you and me :) ), by making it a no brain to use. For scenarios, which aren't (from our analysis) so common, we are leveraging the framework extensibility.
 
Let me know if this makes sense to you, or if we can help you out in any other way.
 
Cheers,
Samuel Jesus
Solution