First of all, sorry for my english.
I used the t3 framework a few times.
I love it. It's not too big, it has a good grid system, mostly logic and easy to use.
When i used the framework, the steps were:
1. analyze the design (psd)
2. build a near pixel accurate fullwith site (build a global css)
3. recognize and fix the problems by the smaller and smaller screens (build css by the breakpoints)
The global css format all elements in the site alltime (till something overrides it).
From md-max to the zero the mediaqueries activates and applies their own styles.
So there are 4 layers:
lg = fullwidth: (global css, i sacrificed the lg part to do this)
md: md only media queries, but inherited from upper
sm: sm only media queries, but inherited from upper
xs: xs only media queries, but inherited from upper (i used 0px to do this)
The problem with this method: The T3 framework's theory is not this!
As i read the real T3 theory from the code:
Write a global css for under xs size, because you cant catch it in other ways(built in).
Than if you want to see something different in bigger sizes, use the xs, sm, md, lg parts to format it.
I have to write codes in the global css (logically under xs size) and the exception styles for the bigger widths.
The problem with this, it's seems backward working for me.
This idea crashed if we read the built in hidden classes:
@media (max-width: 639px) {
.hidden-xs {
display: none !important;
}
}
@media (min-width: 640px) and (max-width: 767px) {
.hidden-sm {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 989px) {
.hidden-md {
display: none !important;
}
}
@media (min-width: 990px) {
.hidden-lg {
display: none !important;
}
}
The xs part dont have min-with, because the author want to hide the element under xs also!
At this point the theroy was broken for me!
Maybe the author want to do something like in my theory?
I feel the concept is a bit mixed and therefore not fully logic for me.
Please correct me if I'm wrong or i could not understand something.
