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

Someone has a bootstrap like grid system - Sass

HI,

Does someone has a code in Sass for BEM that has bootstrap or most likely foundation CSS in Sass gird system made with BEM?

I got one now, which is somewhat okay.. but it doesn't work quite well, and i don't know how to make different , phone, tablet and desktop code.

1 Answer

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

lol who said Sass was easy lol or maybe I'm trying to grasp too much at once lol but grid is essential anwyas. At least I learned about mixins and mediaqueries today more in deepth lol

Thank you.

btw

Since I’m new to Sass and BEM..

And i did start my site GOOD, Sassy, BEM style but.. which It feelt good! Clean and beautiful, thats what im striving from when is tarted to code lol it's amazing, but then i got lost..

I got lost when it came to footer and main content, and now it’s a bit of a mess..

Now that i read abot BEM more and Sass..

I understood a lot more.. i shoudl have done that before i started to code but anuwas..

Do you think it’s a good idea to start my blog again? lol it woudl be 100% more clean etc.. or you think it will be better to make a webstie, code it the way i can, and i will have something extra to put on my portfolio, and once I’m happy with my conventions and Sass, do my blog?

And thats how it looks, but it's messy already.

do you have or know some site with BEM naming conventions, like bootstrap? if you get me. So e.g. card__wrapper--image , then title, paragraph, and button, you know.. : p

and that was my code if you know what i mean

<!DOCTYPE html>
<html>
<head>
    <title>My Blog | Aurelian Spodarec</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--    <link rel="icon" href="../../favicon.ico"> -->

    <!-- Core CSS -->
    <link rel="stylesheet" href="css/main.css">

    <!-- Fonts -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">


</head>
<body> 


    <!-- HEADER
    ================================================== -->
    <header class="main-header">
    <div class="inner-header">

        <div class="top-header">
        <div class="container">

            <span id="toggle-menu" class="is-displayed-mobile">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </span>

            <a class="site-logo" href="/">
                <h1>Brand Name</h1>
            </a>

        </div>
        </div><!-- /top-header -->

        <div class="bottom-header  is-collapsed-mobile">
        <div class="container">

            <nav class="navbar clearfix" role="navigation">
            <ul class="nav">
                <li class="nav__item--current"><a href="">Articles</a></li>
                <li class="nav__item"><a href="">Videos</a></li>
                <li class="nav__item"><a href="">About</a></li>
                <li class="nav__item"><a href="">Snippets</a></li>
                <li class="nav__item"><a href="">Resources</a></li>
                <li class="nav__item"><a href="">Contact</a></li>
            </ul>

            <input placeholder="hello" class="is-hidden-mobile" id="search-site">
            </nav>

        </div><!-- /container -->
        </div><!-- /bottom-header -->

    </div><!-- /inner-header -->
    </header>




    <!-- Article/Videos
    ================================================== -->
    <main class="main-content">
    <div class="container">

        <!-- Main and Extra -->
        <div class="grid">
        <div class="grid__col--8 full-md-less random-blog">
        <article class="grid__col--12">
            <img src="https://assets.entrepreneur.com/content/16x9/822/20150729211514-man-reading-book-hipster.jpeg">
        </article>
        </div>
        <div class="grid__col--4 is-hidden-tablet">
        <article class="grid__col--12">
            <iframe height="200px;" width="100%;" src="https://www.youtube.com/embed/ZHdoDiXouOE" frameborder="0" allowfullscreen=""></iframe>
        </article>
        <article class="grid__col--12">
            <iframe height="200px;" width="100%;" src="https://www.youtube.com/embed/ZHdoDiXouOE" frameborder="0" allowfullscreen=""></iframe>
        </article>
        </div>
        </div>


        <!-- Articles -->
        <div class="grid">

        <article class="grid__col--4 card">
        <div class="excerpt-img">
            <div class="overlay self-dev"></div>
            <img src="http://media02.hongkiat.com/programming-myth/programmer.jpg">

             <div class="excerpt-img-icon">
            <i class="fa fa-code" aria-hidden="true"></i>
            </div>
        </div>


        <div class="excerpt-content padding-light">
        <header class="teritary-paragraph">

            <span class="blog-date">August 25, 2016 in </span>
            <span class="category"><a href="">HTML</a></span>

            <a href="">
                <h3 class="teritary-header">adsfse</h3>
            </a>
        </header>
        <p class="teritary-paragraph">
        Lrema df dsf dsf sdaf dsf lorema df dsf dsf sdaf dsf lorema df dsf dsf sdaf dsf lorema df dsf dsf sdaf dsf lorema df dsf dsf sdaf dsf lorema df dsf dsf sdaf dsf lorema d
        </p>
        <p class="blog-author teritary-paragraph">by <italic>Aurelian Spodarec</italic> </p>
        </div><!-- /excerpt-content -->
        </article>










        </div><!-- /grid -->

    </div>
    </main>


    <!-- FOOTER
    ================================================== -->
    <footer class="main-footer">
    <div class="bar">
    <div class="container">

        <ul class="menu-footer-menu">
            <li><a href="">Archive</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Terms</a></li>
            <li><a href="">Privacy Policy</a></li>
            <li><a href="">Contact</a></li>
        </ul>

    </div><!-- /container -->
    </div><!-- /bar -->


    <div class="footer-content">
    <div class="container">

        <div class="grid">
        <div class="grid__col--4">
            <h3>About Blog</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do o tempor incididunt ut labore et dolore proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div><!-- /col -->

        <div class="grid__col--4">
            <h3>Recent Posts</h3>
            <ul>
                <li><a href="">The Designer Wok Space</a></li>
                <li><a href="">A natural city</a></li>
                <li><a href="">How I build a million dollar company</a></li>
                <li><a href="">Design Quotes</a></li>
            </ul>
        </div><!-- /col -->

        <div class="grid__col--4">
            <h3>Subscribe & Follow</h3>
            <p>Get latest update & newest products from us!</p>
        </div><!-- /col -->
        </div>

    </div><!-- /container -->
    </div><!-- /footer-content -->


    <div class="bar copyright">
    <div class="container">

        <p>Copyright 2016 Brand name - Designed by <a href="">Aurelian Spodarec</p></a>

    </div><!-- /container -->
    </div><!-- /bar -->
    </footer>



    <!-- Scripts
    ================================================== -->

    <script type="text/javascript" src="scss/vendors/js/jquery.js"></script>
    <script type="text/javascript" src="scss/vendors/js/scripts.js"></script>

</body>
</html>
Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Actually thats a video I'm watching https://youtu.be/LqBm9R9nrlE?t=2m51s

and you see the conventions, and i did a excerpt-blog whatever, that's bad lol so that's what im looking for, kinda hard to find.

WHy treehouse doens't has a course on that, fully on that ;d woudl make css learning a lot faster.