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

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Extending, or including grid system in Sass

Hi,

Tim Knight , I'll tag you if you don't mind : p

I got an idea, when doing the site. I was thinking about how to make the HTML beautiful, and so i though, what if i have a code like e.g.

.footerColumn , or something, and i extend a class to it, so it's resposnive?

I see in a lot of sites that they don't use 'grid system' and their classes have the width % and stuff, so that would be stupid , in my opinion, to re-write that all the time, I don't know.

E.g. look at this site https://www.memrise.com/

and footer-col

but then they have same code, named differently, that does the same thing.

I like that HTML, but then the CSS?

1 Answer

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Bond,

One thing that's important to understand is that a lot of HTML goes through some server processing before it's sent to the browser. Sometimes it's minified or some other process, like server-side code (e.g. PHP) that messes up the indentation... and that's completely fine. When I'm hiring someone I'm not looking for all of there code to be beautiful. I'm looking at how they are solving the problem in general. Understand what I mean?

Now, in terms of having a footer class and then other classes that "extend that" I'm not sure if I understand what you mean. Based on the example you shared though basically it's footer class that has other divs with footer columns. And that's completely okay to do. Not everyone uses a grid system. It's really a personal decision on what you feel is most comfortable for you. There isn't a right or wrong way in terms of whether or not you should use a grid system.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

HTML goes throw server processing, yes, I think I might know what you mean there.

I'm re-doing the site, and I really like. The c-menu, i think i put it in organs or something folder o-menu or main m-menu maybe not sure, but anwyas..

That's what I'm currently doing

https://github.com/AurelianSpodarec/hclearnXOrginal/blob/master/index.html

And the grid system just destroys the beauty of the code. The CSS is easy to do, if the HTML is right. Or even if you were to use something like bootstrap4, ugly html but good CSS , though you get me..

I have a grid system there, that is DRY, because i use it weher i want.

But this site has e.g.

.footer-logo-col {
    width: 25%;
    float: left;
    min-width: 300px;
}

.c-landing__step {
    float: left;
    width: 25%;
    padding-bottom: 22px;
    margin-left: 0;
    margin-bottom: 0;
}

Not soo dry, rght. It repeats it's self, especially with the clearfix that comes before/after.

Or

It's good to have the 'main section' like footer, to have their own columsn, and then use grid system for the rest of the page like

.c-teamMember col xs-1 small-1-2 medium-1-3 large-4

Maybe

lol

But I'm really liking what I'm doing now, absolutelly love it. I love this architecture/theory stuff. ANd now I'm feeling, and it is, going the way I want. Just wanted some advice on grid stuff here again, on this specific thing I saw other were doing.

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

You're definitely moving in the right direction. Just always reminder there many ways to do things and there are valid reasons for each and that's completely okay.

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Also keep in mind the Nest grid I showed you earlier doesn't use classes to dirty up your HTML... it uses Sass mixins to control column calculations that happen right in your CSS. Good luck with everything!

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I didn't yet check properly the grid system you showed me then. Need to re-visit it again. I hate grid systems, that's the last thing I want to look at, but then I have to think about it straight away (or at least I like to : p ).

Yes, you are right, in CSS conferences, on yt, people , everyone had their own 'valid' reason to do the stuff they did. Which I didn't really like some of them.. but.. if that works, and it has a valid reason behind then sure. Though that definitelly wasn't for me, at least now.

I'm feeling I'm just stepping in the 'architecutre' word. What I'm doing, is very basic, I saw many sites doing what I do now, but a lot more complex, and 'better' for their project, which I like a lot, but think I need to mature for that, same with Sass. There are soo many things in Sass, that you just need to mature with time : p

I feel in the last week I learned more than in the last three months : d

But Thank you for all the help recieved from you Tim. You definitelly made a big impact on me so far, same as Kevin. Thank you!

I'm I hired? :D xD