CSS Framework And Responsive Lists นี้น่าจะเป็นประโยชน์สำหรับการทำความรู้จักกับเครื่องมือสำหรับออกแบบหน้าเว็บไซต์ให้สวยงาม ง่ายดาย รวดเร็ว แถมยังมีความ responsive อีก บางอันอาจจะไม่ Full เท่ากับของ Bootstrap หรือ Foundation เค้า แต่ว่าแต่ละตัวที่นำมา list ไว้ก็มักจะมีความแตกต่างหรือเป็นเอกลักษณ์ของตัวเองไม่น้อยครับ
CSS Framework And Responsive Lists
บทความนี้อาจจะเห็นการ update กันอยู่บ่อยๆนะครับเป็นเพราะว่า หากผมเห็นตัวไหนน่าสนใจ มาใหม่แล้วยังไม่มีรายชื่ออยู่ในนี้ก็อาจจะหยิบมา update กันต่อเนื่องนะครับจะได้เป็น list ที่ใหม่อยู่เสมอ จะไม่ได้เรียงตามความนิยม หรือความสดใหม่แต่อย่างใดนะครับ แต่จะเป็นการเรียงตามตัวอักษรทั่วๆไปเลย
34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)
If you’re already familiar with grid systems and responsive web design just create&download a bundle and see what is inside. Else you may start with resizing your browser window.
HTML5 CSS3 Framework
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Agile CSS is a modern web framework specifically designed for building extensible and flexible Web UI for applications
The clean & simple responsive framework..!
A Rock Solid, Responsive HTML/CSS Framework
Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications.
Create a Seamless User Interface
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.
Bulma Modern CSS Framework based on Flexbox responsive, mobile first and have everything for create website
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
Although the overall look and feel are most definitely inspired by Twitter Bootstrap, Cascade framework is not just another Bootstrap clone. Where Twitter Bootstrap puts its focus on delivering shiny user elements that can be dropped into any project and takes control of your project’s overall look-and-feel, Cascade Framework is intended to do the opposite. By splitting your CSS into separate files based on features rather than selectors as well as by implementing atomic design, Cascade Framework puts you in control!
Cardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind.
The purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications. Cardinal omits many aesthetic design decisions that often bog down other CSS frameworks (which are often UI toolkits, not frameworks), leaving the design and creativity up to you.
Concise CSS is a framework written in SASS carefully crafted by Keenan Payne and James Kolce, it provides all the basics without the bloat
Compass is an open-source CSS Authoring Framework. Experience cleaner markup without presentational classes.
A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily
Essence is a CSS framework that implements the guidelines from Google Material Design Specification using Facebook’s react.js library. Use it to easily build super-fast and great looking web & mobile interfaces.
Furatto is a lightweight & friendly front-end framework got get the job done, created and maintained by Abraham Kuri from Icalia Labs.
Responsive design gets a whole lot faster
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!
Web boilerplate stack (HTML5, CSS3, jQuery, and PHP). G5Framework provides some rock-solid code and functionality for you to start with, however it leaves all the remaining development and styling up to the developer.
A minimalistic grid targeted at modern web apps with a lean and nimble UI. It uses Sass silent classes (placeholders) to structure content in HTML and keeps your Markup free of excess presentational classes like “unit_1of4”, “small-2”, “grid4”.
Simple, Responsive, Easy
Each .grid element is a horizontal row which can contain .unit elements of various widths. Width combinations are illustrated below.
Units get stacked on screens 568px or smaller. Grids in a .wrap have maximum widths of 978px, or 1140px with the addition of .wider.
All units have even inner and outer gutters. You can turn gutters off with .no-gutters. There are also a few other commonly needed classes.
Simple and light responsive grid system Sometimes you just need a grid system, everything else is excess, with the iceCream syntax this can be done easily and faster.
An HTML5/CSS3 framework used at SAPO for fast and efficient website design and prototyping.
Simple, Flexible, Powerful responsive front-end web framework makes your front end development faster and easier. takes you all the way from 1200px on down to 320px.
Kathamo is a Minimalist CSS Framework for Rapid & Mobile-Friendly Development. Kathamo has a few easy ways to quickly get started, each one appealing to a different skill level and use case.
Kube CSS Framework Innovative and extremely flexible grid offers clear and simple rules, visual balance and solid structure for any web page, desktop or mobile.
Layers CSS is a CSS framework aimed for practical use cases. It comes with a small footprint and zero bullshit
A CSS framework based on Google’s material design The idea is pretty simple. Just copy everything as good as possible from Google’s material design and make CSS/JS out of it. The goal is to move everything from there to the web, easy to use and maintain.
CSS grid system for designing adaptive websites
The first responsive front-end framework based on AngularJS & Google Material Design specifications.
A modern responsive front-end framework based on Material Design Speeds up development and User Experience Focused
A minimalist CSS framework
MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.
MUI is a lightweight CSS framework that follows Google’s Material Design guidelines MUI is heavily influenced by Bootstrap, Polymer, and Ink as well as some of the popular Material Design frameworks (Materialize, Material-Bootstrap, Material UI). To encourage developers to hack on MUI, the source code for MUI is open-source under an MIT license.
Lightweight css for native html elements Made for the hackers and 5kb
Flexible, Unlimited number of breakpoints, Compatible with Media Queries and mobile device detection, Very light: < 1 kb!, No need for jQuery or LESS/SASS
A responsive grid system for fixed and fluid layouts. Built in SCSS, it gives you flexibility and full control.
A set of small, responsive CSS modules that you can use in every web project.
The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.
Gridiculous was created after I tried out a bunch of different responsive grids and realized that none of them offered all of the features I required. First and foremost, I wanted to make sure that the grid would work from a large desktop monitor through to a tablet and all the way down to a mobile phone. That’s why Gridiculous starts off at 1200px and works itself down to 320px. I also wanted the ability to not be locked into always having to start with 1200px, so I created some stops along the way. You can set your site to max out at 960px, 640px, 320px or even stretch it out to full width. You can even space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size. Check out Gridiculous to see how easily you can create a fully responsive grid layout for your next website.
CSS Micro framework.
A modular, front end framework to easily and quickly help you jump start your process in building complex interfaces for the web right out the box.
Sculpt has been written to cater for devices with small screen sizes first, with more complexity being added through media queries as screen real-estate increases. You don’t have to be one of our customers, and don’t need to provide us with attribution for you to use it. This is the same framework we use on our own website, and we are giving it to you for free.
User Interface is the language of the web
Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.
Siimple is a minimal and responsive CSS framework for flat and clean designs, created initially for my projects. I don’t want to compete with Bootstrap, because it is insuperable.
You should use Skeleton if you’re embarking on a smaller project or just don’t feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).
SPACEBASE IS A SASS-BASED RESPONSIVE CSS FRAMEWORK.
Many CSS frameworks are meant to be included and left alone. But spaceBase is a boilerplate layer that can be built upon and tailored for your needs. It combines best practices for today’s responsive web with the core components we use on every project. Consider it the launch pad for your adventures into cyberspace.
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.
YOUR MARKUP, YOUR DESIGN, YOUR OPINIONS | OUR MATH.
In a world of agile development and super-tablet-multi-magic-laptop-phones, the best layouts can’t be contained in a single framework or technique. CSS Libraries are a bloated mess of opinions about how to do your job. Why let the table-saw tell you where to put the kitchen?
Frameworks make decisions for you about how to organize, structure and design a site. Pattern libraries don’t separate styling and markup, making them tough to use in a truly modular fashion. We weren’t satisfied, so we made a thing that doesn’t do that.
Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass or CSS library of your choosing primarily concerned with the appropriate technical implementation of design patterns—not how they look.
Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.
For instance, if you want a 50% wide column, simply use class=”grid-50″. There are grid classes for multiples of five: 5, 10, 15 … 95, 100. There are also grid classes for dividing a page into thirds: grid-33 and grid-66.
Blueprint for modern web development a lightweight front-end framework for logically building complex, responsive web projects.
A modular CSS framework for truly flexible, accessible and responsive websites
YAML provides a complete set of matched building blocks to create complex websites. Grids, navigation, forms, typography module and all provided add-ons work seamlessly together. focussed on device independent screen design and provides bullet-proof modules for flexible layouts. This is a perfect starting point and the key to truly responsive design.