IVORY- A Simple And Flexible Front-end Framework
IVORY is a lightweight front-end framework that can handle responsive layouts from 320px to 1200px widths.
It has a 12-column grid and comes with styles for typography, forms, buttons, tables, pagination, toggle-switches, tooltips, accordion, tabs and more.
Usage
GoodFeatures
GoodInstallation
Moderately
Groundwork – A fully responsive HTML5, CSS and Javascript toolkit
Groundwork is a fully responsive HTML5, CSS and Javascript toolkit. Using Groundwork, you can quickly build web apps that work on virtually any device. Groundwork has been built from the ground up with the incredibly powerful CSS preprocessor, Sass.
TOSDN Comment
ลักษณะคล้ายๆกับ Bootstrap Framework ซึ่งผมชอบนะครับ แต่ดูเรียบๆ สะอาดตากว่า แต่ต้องลองตรวจสอบดูว่าสิ่งที่มันให้มามีพอกับที่เราใช้หรือไม่ เนื่องจากลูกเล่นต่างๆที่เป็นส่วนของ Javascript มีไม่เยอะเท่าไรUsage
GreatFeatures
GoodInstallation
Moderately
Hint.css – A tooltip library written in SASS which uses only HTML/CSS
hint.css is written as a pure CSS resource using which you can create cool tooltips for your web app. It does not rely on JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers. Note: CSS3 Transitions on pseudo elements is currently available on Firefox only. On [...]
TOSDN Comment
CSS สำหรับทำ Tooltip balloon ใช้ CSS3 รองรับได้ทุก Browser ด้วยครับ (จะมีเรื่อง CSS3 Transitions ที่ทำงานได้เฉพาะ Firefox เท่านั้น)Usage
GreatFeatures
GoodInstallation
Newbie
Textillate – Flexible Text Animations With jQuery
Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. The plugin makes use of Animate.css + Lettering.js and it is capable of creating lots of animations like flash, bounce, shake, pulse, fade, rotate, flip and much more.
TOSDN Comment
สร้างตัวอักษรอนิเมชั่น ง่ายๆ ด้วย jQuery มีรูปแบบให้เลือกเล่นได้หลายอย่าง ค่อนข้างสะดวก ไม่ต้องพึ่ง Flash โหลดเร็ว และได้ SEO อีกด้วยUsage
GreatFeatures
GreatInstallation
Easy
InK – An Impressive Front-end Development Kit
Ink is an interface kit for quick development of web interfaces, simple to use and expand on. It uses a combination of HTML, CSS and JavaScript to offer modern solutions for building layouts, display common interface elements and implement interactive features that are content-centric and user friendly for both your audience and your designers & [...]
TOSDN Comment
สำหรับ Template Framework ตัวนี้ ทำออกมาค่อนข้างสวย คล้ายๆกับ Apple.com เลยทีเดียว รองรับ Responsive Design มีลูกเล่นเรื่อง Javascript มาให้ใช้เยอะพอสมควร แต่ต้องบอกไว้ก่อนว่า Javascript เป็นตัวที่ทีมพัฒนาทำขึ้นเอง ไม่ได้ใช้พวกตัวจี๊ดๆ เช่น jQuery แต่ก็ไม่ต้องเป็นห่วง เพราะมันมี Document ค่อนข้างอ่านง่าย มาให้ดูกันด้วยUsage
GoodFeatures
GreatInstallation
Easy
Maxmertkit – Front-end Framework With Lots Of Features
Front-end frameworks are easing the development process a lot and we are seeing new ones popping up regulary. While Bootstrap and Foundation are the most popular ones, there are also others like HTML KickStart. Maxmertkit is a fresh one that looks/feels a bit like Bootstrap but has different things to offer. It uses SASS for the CSS part and includes styles for all major stuff [...]
TOSDN Comment
สำหรับ Template Framework ตัวนี้ ค่อนข้างคล้าย Bootstrap พอสมควร แต่ผมชอบตรงที่มีลูกเล่นในเรื่องของปุ่ม เช่น ปุ่ม Facebook, Twitter และลูกเล่นของ Javascript ต่างๆ ที่ทำออกมาค่อนข้างสวย และเอฟเฟกดีพอสมควร, แต่มีข้อติติงนิดหนึ่งคือ ดูเหมือนมันจะยังมี Bug (โดยเฉพาะเปิดด้วย Google Chrome) ซึ่งจะเห็นว่า Font มีปัญหา และปุ่มบางปุ่มไม่ทำงาน (ปุ่ม Githubs) ซึ่งตรงนี้ถ้ารีบใช้งานก็คงจะต้องแก้ไขเองกันไปก่อนUsage
GreatFeatures
GreatInstallation
Easy
BootMetro – Metro style web framework
BootMetro provides simple and flexible HTML, CSS, and Javascript for web apps that wants to use the “Windows 8 MetroUI” style, without the need to run on Windows 8. It is built on top of Twitter Bootstrap and HTML5 Boilerplate. Features The framework permit to create web applications with the look&feel of the not-yet-released Windows [...]
TOSDN Comment
Metro UI แบบ Microsoft Windows 8 พัฒนาจาก Twitter Bootstrap framework ครับ สวยๆ ใช้งานง่าย ใครถนัด Twitter Bootstrap framework อยู่แล้ว สนุกเลยทีเดียวUsage
GreatFeatures
GreatInstallation
Easy
A List Of All Countries In Many Languages And Formats
The scenario is simple – I need a list of all countries. This is the task that need to be solved in majority of applications. So I sit down and tried to find a good solution for this problem. No matter which programming language or data format you use in your application or language you speak, [...]
TOSDN Comment
มันเป็นข้อมูลที่โปรแกรมเมอร์ทุกคนควรเก็บไว้เลยครับ เป็นรายชื่อประเทศทั่วโลก มีครบทุกภาษารวมถึงภาษาไทยด้วย และมีหลาย Format พร้อมใช้ ทั้ง HTML, JSON, PHP, SQL, TEXT, CSV, XML, YAML ไม่ต้องเสียเวลาหา หรือสร้างเองUsage
GreatFeatures
GreatInstallation
No Need
Focal Point – Intelligent Cropping of Responsive Images
Pure HTML/CSS Adaptive Images Framework A small set of CSS classnames to help keep images cropped on the focal point for responsive designs. Using only HTML/CSS, web authors can specify an image’s focal point, which stays as the image’s primary focus as the image scales on responsive webpages. This puts web authors in control of art [...]
TOSDN Comment
เวลาทำเว็บ Responsive เมื่อเปิดดูในมือถือ รูปภาพก็จะย่อตามขนาดให้พอดีกับจอ หรือตามความเหมาะสมเท่านั้น แต่สคริ้ปตัวนี้จะเสริมความเท่ให้เราคือคือ มันจะตัดภาพด้วยเทคนิคที่เรียกว่า Focal Point คือจะคำนวณพื้นที่ในภาพ และ crop ส่วนตามที่เราต้องการ โดยทั้งหมดทำด้วย HTML/CSS เท่านั้น ไม่ต้องพึ่ง Javscript ด้วยครับUsage
GreatFeatures
GoodInstallation
Moderately
xCharts – JavaScript Charts With HTML-CSS + SVG
xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.
TOSDN Comment
ผมชอบนะ ดูเรียบง่ายดี สวย เร็ว และมันสร้างเป็นกราฟเคลื่อนไหวได้ด้วย, มันกำหนดข้อมูลที่จะไปสร้างกราฟด้วย JSON โครตสะดวกเลยครับ แต่ที่ขัดใจนิดเดียวเลยคือ รูปแบบกราฟที่มันสร้างได้จะมีแค่ 4 แบบ คือ bar, cumulative, line และแบบ line-dottedUsage
GreatFeatures
GoodInstallation
Easy
TOSDN Comment
IVORY เป็น front-end framework แบบ 12 column ขนาดกะทัดรัด พกลูกเล่นทันสมัยแบบ responsive layouts ที่รองรับหน้าจอกว้างตั้งแต่ 320px ถึง 1200px ได้ สามารถรองรับ Browser รุ่นใหม่ๆได้ทุกตัว