[purecss] css framework ที่มีขนาดเพียง 4.0 KB

วันนี้ผมจะแนะนำเจ้า purecss กันครับ โดยเจ้านี้เป็น css frameworkที่มีขนาดเพียงแค่ 4.0 KB ตามที่ผมได้จั่วหัวข้อไว้เลยนั้นเอง

โดยเจ้า purecss ที่มีขนาด 4.0 KB นี้เค้านับแบบ minified and gzipped แล้วนะครับ เลยได้ขนาดเพียงเท่านี้ เพราะว่าถูกสร้างขึ้นมาเพื่อรองรับกับอุปกรณ์สายโมบายนั้นเอง เพราะทุกๆ ไบต์นั้นสำคัญเสมอนั้นเอง

purecss ซัพพอร์ทเบราเซอร์ดังนี้

  1. IE 8+
  2. Latest Stable: Firefox, Chrome, Safari
  3. iOS 6-8
  4. Android 4.x

วิธีการติดตั้งทำได้ 2 วิธีคือ

  1. <link rel="stylesheet" href="https://yui-s.yahooapis.com/pure/0.6.0/pure-min.css">
  2. Download Pure 
  3. bower install --save pure

วิธีการใช้งานคราวๆ นี้ครับ

  1. ใส่แท็กนี้ในส่วน head ของเว็บก่อนนะครับ เพื่อให้รองรับการย่อ/ขยาย หน้าจอ
    <meta name="viewport" content="width=device-width, initial-scale=1">
  2. การใช้ Grids จะเป็นการวางอย่างงี้นะครับ จะคล้ายๆ ของ bootstrap นั้นเอง แต่จะใช้คำว่า pure-g คุมก่อนแล้วเลือก pure-u-1-3 เพื่อเลือกขนาดของ Grid โดยถ้าเลือกเป็น pure-u-1-3 ทั้ง 3 อันที่ออกมาก็จะมีขนาดที่เท่ากันนั้นเอง โดยมีวิธีการคิดคือ เลข 3 ตัวหลังสุดคือ ความกว้างทั้งหมดของ Grid แถวนั้น แล้วแลข 1 คือ ขนาดความกว้างของคอลัมนั้นๆ นั้นเอง
    <div class="pure-g">
        <div class="pure-u-1-3"><p>Thirds</p></div>
        <div class="pure-u-1-3"><p>Thirds</p></div>
        <div class="pure-u-1-3"><p>Thirds</p></div>
    </div>

    ตัวอย่างการใช้ Grids
  3. การใช้ Form ก็ จะสร้างจาก TAG Form ใน html แล้วใส่ class pure-form และ pure-form-aligned ของ purecss ลงไปนั้นเอง
    <form class="pure-form pure-form-aligned">
        <fieldset>
            <div class="pure-control-group">
                <label for="name">Username</label>
                <input id="name" type="text" placeholder="Username">
            </div>
    
            <div class="pure-control-group">
                <label for="password">Password</label>
                <input id="password" type="password" placeholder="Password">
            </div>
    
            <div class="pure-control-group">
                <label for="email">Email Address</label>
                <input id="email" type="email" placeholder="Email Address">
            </div>
    
            <div class="pure-control-group">
                <label for="foo">Supercalifragilistic Label</label>
                <input id="foo" type="text" placeholder="Enter something here...">
            </div>
    
            <div class="pure-controls">
                <label for="cb" class="pure-checkbox">
                    <input id="cb" type="checkbox"> I've read the terms and conditions
                </label>
    
                <button type="submit" class="pure-button pure-button-primary">Submit</button>
            </div>
        </fieldset>
    </form>

    ตัวอย่างการใช้ Form
  4. การใช้ปุ่มกดก็ไม่ยากเหมือนกันคือแค่ใส่ class pure-button ลงไปก็สามารถใช้งานได้แล้ว
    <a class="pure-button" href="#">A Pure Button</a>
    <button class="pure-button">A Pure Button</button>

     

    การใช้ปุ่ม

     

    และก็ยังมีอีกหลายอย่าง เพื่อนสามารถลงไปเล่นดูได้ที่ http://purecss.io/start/ นะครับ

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s