Building Semantically - Foundation


#1

Poceli smo raditi na jednom projektu gdje planiramo koristiti samo grid od navedenog frameworka.

I tako citajuci dokumentaciju vidim da imaju SASS mixin-e koji omogucavaju izradu tog nekog semantic grida.Na prvu mi i nije bilo jasno, pa nisam obracao paznju na to, ali sam se ponovo vratio i dopada mi se taj pristup izradi grida.

Evo jedan primjer

<main id="main" role="main">
    
    <section class="section-content">
        
        <article class="article">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quidem atque reiciendis, dignissimos tempore voluptate minima quia maiores eos et ducimus, non cum repellendus delectus culpa sapiente quam sed esse.
            </p>    
        </article>

        <article class="article">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quidem atque reiciendis, dignissimos tempore voluptate minima quia maiores eos et ducimus, non cum repellendus delectus culpa sapiente quam sed esse.
            </p>    
        </article>

        <article class="article">
            <h3>Lorem ipsum dolor sit amet</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quidem atque reiciendis, dignissimos tempore voluptate minima quia maiores eos et ducimus, non cum repellendus delectus culpa sapiente quam sed esse.
            </p>    
        </article>

    </section>

</main>


.section-content {
	@include grid-row;
	.article {
		@include grid-col;
		@include breakpoint(large) {
			@include grid-col-size(1 of 3);
		}
		@include breakpoint(small) {
			@include grid-col-size(3 of 3);
		}
	}
}

Ovo mi se svidja zbog toga sto mi je HTML prilicno cist, a to ima svoje prednosti i sto ne moram koristiti dosadne klase, i strukture od Foundationa, koje u biti ucine stranicu totalno nepristupacnom, u biti isti primjer Foundation way (Bootstrap je jos gori po tome, jer ima jos jedan parent element .container, u koga idu row i ostala sranja).

<main id="main" role="main">        
    
    <section class="section-content">
        
        <div class="row">
            
            <div class="large-4 column">
                <article class="article">
                    <h3>Lorem ipsum dolor sit amet</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum inventore enim sint vero dicta, expedita eveniet hic sed. Reiciendis molestias pariatur ut mollitia sunt sequi consequatur, quod in neque quisquam.
                    </p>
                </article>
            </div>

            <div class="large-4 column">
                <article class="article">
                    <h3>Lorem ipsum dolor sit amet</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum inventore enim sint vero dicta, expedita eveniet hic sed. Reiciendis molestias pariatur ut mollitia sunt sequi consequatur, quod in neque quisquam.
                    </p>
                </article>
            </div>

            <div class="large-4 column">
                <article class="article">
                    <h3>Lorem ipsum dolor sit amet</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum inventore enim sint vero dicta, expedita eveniet hic sed. Reiciendis molestias pariatur ut mollitia sunt sequi consequatur, quod in neque quisquam.
                    </p>
                </article>
            </div>
        </div>         

    </section>

</main>

Neka vasa misljenje, da li ste radili da li koristite ? I koji su moguci nedostatci ovog pristupa ?

Hvala i pozdrav.