Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Markus Mönch
16,383 PointsHow would you go on about this?
I need to re-make this site.
First of all, how would you do the header? What is your idea on it?
Second, How would you go on about hiding or showing columns? e.g. col small-1 large-1-2 and you have two of them, but you hide one column on small?
Teritary, how would you structure the 3sections on the white background? In one section and give it background white, or three different sections?
2 Answers
Tim Knight
28,888 PointsHi Markus,
Like Steven mentioned this is a common thing you'll find in a lot of frameworks. In the case of Bootstrap it not only has the fixed navbar, but in this case since the style of it changes on scroll Bootstrap also has the affix JavaScript plugin that you'd use. In terms of your question about SMACSS, remember that SMACSS is a naming and organizational methodology, not something different from just using CSS.
So in terms of SMACSS though you'd have a state let's call it .is-fixed and that state would be applied to your navigation once the page had scrolled to a particular place. You'd then also need to include some JavaScript that would listen for that scroll position and aside the .is-fixed class whenever it met that condition.
Now keep in mind, framework or otherwise you can still apply SMACSS principles.
Steven Parker
243,656 PointsThis site has a common overall appearance.
In fact, this type of UX is readily created using the popular framework Bootstrap. The header would be a "navbar", and would include the class "navbar-fixed-top".
If you did choose Bootstrap, and wanted to hide a particular column on small format devices, you could include the class "hidden-sm" on that column.
The 3-part region could be either separate sections, or just 3 rows in the same section, whichever you prefer.
Markus Mönch
16,383 PointsThank you.
How would you do it with SMACSS? No frameworks.
Markus Mönch
16,383 PointsMarkus Mönch
16,383 PointsHi.
Thank you.
But I was about HTML structure. "First of all, how would you do the header? What is your idea on it?" I ment how would you code it, how would your HTML look like?
This was my first try on it
Now I'm doing it second time
And you see, the Join and ENglish, doesn't apear on desktop with the menu, but it's on the right, while the menu is in center.
But on mobile, you see Join and English in the same menu.
Woulc you give a class e.g. show from tablet up and float ir right in a div? or a new block?
Tim Knight
28,888 PointsTim Knight
28,888 PointsMarkus,
Your two examples are very different particularly because your first one is using a responsive grid system. In terms of your question about how I'd go about hiding the Join/English I would likely create a state for the nav items that could be
.is-mobile-hiddenwhich would have a media query to hide those items. Otherwise if you're just wanting to move them around based on the size of the viewport I'd add media queries to the nav module CSS file to control all of the view sizes and styles for various screen sizes.Markus Mönch
16,383 PointsMarkus Mönch
16,383 PointsSo how would you structure the HTML?
Because I can hide with the state on desktop, but then, I will need something else, a different block like
ANd this will be on the right, like on the desktop. While the menu on the middle, which I will hide the specific li right?
Tim Knight
28,888 PointsTim Knight
28,888 PointsMarkus,
I think you're getting caught up on the HTML and you really should be thinking more about the CSS here.
For example, here's one way I might consider addressing the layout using SMACSS & BEM style classing, but it's all going to come down to you actually positioning it with CSS and having your mobile navigation toggle show only on mobile with the added use of some JavaScript to make the toggle aspect work.
Here I'm choosing to create a modifier of the
.m-navclass to move it to the right, but it doesn't necessarily have to be that way... that's a personal decision.Markus Mönch
16,383 PointsMarkus Mönch
16,383 PointsAlright! Thank you Tim! I understand.
One more question.
E.g.
m-nav--rightIn SMACSS, this would be float none on mobile.
What if on tablet it would be float none as well, and then only on dektop float right?
So if i have m-nav-right, it will float to the right all the time. What if I want that specific element to be floated left on mobile, or no float at atll, but on dektop float left, an on tablet float right?
How should I use this general styles like l-aling-center , if something needs to be right, that specific item on tablet, needs to be on right, though the rest items need to be in center, apart from that one. How should I do it?
Tim Knight
28,888 PointsTim Knight
28,888 PointsTo be honest Markus, I would avoid using styles that communicate position unless that position is global for the application. That's my opinion. So in the case of the navigation on the right side, I'd probably call it something like
.m-nav--accountinstead. Then using media queries I'd adjust only the condition for when I wanted to float it right. Again, don't over complicate it... SMACSS is a suggestion of organization, you can do whatever you feel the most comfortable with as long as it helps you keep your code organized.