CSS Framework ชีวิตเราดีขึ้นเพราะนายเลยนะ

CSS Framework นี่จะมีส่วนประกอบหลายๆอย่าง ครับแต่ สิ่งหนึ่งที่มีส่วนใหญ่ จะมีเลยคือ Grid Layout Grid Layout ปกติเวลาเราจะเขียน CSS เนี่ยเราก็ต้องวาง Layout กันก่อน ส่วนใหญ่จะเป็นแบบ Grid layout แบบนี้ สังเกตตรง แถบแดงๆ นะครับจะเป็นตัวแบ่งขอบเขตของ Layout, และจากรูปตัวอย่างจะบ่งบอกได้ชัดเจนเลยครับว่าเขาออกแบบตาม Grid ต่างๆ ดังนั้นเมื่อเราใช้บ่อยกันอย่างนี้ก็ทำเป็น Framework กันเลยดีกว่าจะได้สะดวกเวลาเริ่มทำ Website กันใหม่ขึ้นมา // 1 <div class=”row”> <div class=”col-md-4″>.col-md-4</div> <div class=”col-md-4″>.col-md-4</div> <div class=”col-md-4″>.col-md-4</div> </div> // 2 <div class=”row”> <div class=”col-md-3″>.col-md-3</div> <div class=”col-md-6″>.col-md-6</div> <div class=”col-md-3″>.col-md-3</div> </div> // 3…

LESS VS SASS

เมื่อเราได้รู้จักความสุดยอด LESS กันไปแล้ว (Part 1 และ Part 2) และบางคนอาจเคยได้ลอง SASS กันมาแล้วคงมีคำถามว่า ใช้ LESS หรือ SASS ดี ซึ่งก็ค่อนข้างตอบยากเล็กน้อยเพราะ Featured พื้นฐานของทั้งคู่นี่ก็พอกันเลยครับ แต่ ยังไงก็ยังคงต่างครับ ลองชมกันเลย ในบทความนี้เราจะเปรียบเทียบในด้านการใช้งานเท่านั้น ไม่นับด้านอื่นๆที่ไม่ค่อยเกี่ยวข้องเช่น SASS สร้างมาจาก Ruby, LESS สร้างมาจาก Javascript หรืออะไรเล็กๆน้อยๆ อย่าง Document ก็จะไม่นำมาเปรียบเทียบนะครับ, ซึ่งจริงๆแล้ว LESS กับ SASS นี่โดยพื้นฐานแล้วแทบจะเหมือนกันจะหมดครับ แต่จุดความแตกต่างนั้น ก็มีนัยสำคัญเลยละครับ LESS แพ้ SASS Mixin ของ LESS ไม่มีแบบ return ค่า (SASS มี) LESS ไม่มี Selector…

LESS – ยุคใหม่ของ CSS – 2

จากความเดิมตอนที่แล้ว LESS – ยุคใหม่ของ CSS ไม่นึกว่าจะยาวขนาดนี้ เลยยกมาเป็น Part 2 ซะเลย มาเริ่มกันเลยดีกว่าครับ Get Started #2 4. Nested rules การเขียนเป็น ชั้นๆ Featured นี้สามารถทำให้เราเขียน CSS ได้ง่ายขึ้นมากครับ (แนะนำๆ) [code]// In LESS you can nest your rulesets. // This is a very important feature because: // -You don’t have to write out repeating long // selectors // -It helps to…

LESS – ยุคใหม่ของ CSS

แนะนำง่ายๆเลยนะครับว่า LESS = CSS + Function + Variable ปกติเราจะเปลี่ยนแปลง CSS ของ Website เราเช่น Theme สี, สีของขอบ, ขนาดพื้นฐานของ Element ก็ต้องใช้ Search & Replace เอาและมาดูว่า อันที่ไหนเราหลุดไป ก็มานั่งเก็บกัน ยกตัวอย่างนะครับลองดูจากรูปนี้ (มาจาก Classic CV) ดูตรงส่วน highlight สีเหลืองๆนะครับ เวลาผมจะเปลี่ยนสีเนี่ย ผมก็ต้อง replace ปกติ แล้วก็มาไล่ดูใหม่ว่าผมพลาดอะไรรึเปล่า แต่ครั้งนี้ผมตั้งไว้แล้วโดยใช้ LESS ผมแค่เปลี่ยนค่าของตัวแปรเดียวมันก็จะเปลี่ยนสีทั้งหมดให้เลยครับ CSS Preprocessor ก็คือตัวช่วยในการเขียน CSS และ compile มาเป็น CSS อีกทีนั่นเองละครับ ซึ่งก็มีหลายตัวอยู่เหมือนกัน ดูเพิ่มเติมได้ที่นี่ ครับ ตัว Popular ก็มี…