{"id":1513,"date":"2019-11-16T09:06:22","date_gmt":"2019-11-16T09:06:22","guid":{"rendered":"https:\/\/saadashraf.net\/blog\/?p=1513"},"modified":"2019-11-16T09:06:22","modified_gmt":"2019-11-16T09:06:22","slug":"12-small-css-framework-to-use-in-your-website","status":"publish","type":"post","link":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/","title":{"rendered":"12 Small CSS Framework to Use in Your Website"},"content":{"rendered":"

You can use smaller, easier CSS frameworks out there instead to incorporate it into your website.<\/span><\/p>\n

This article aims to present what frameworks are and what they are used for, together with a selection of the best that can be obtained free of charge on the internet. In this way, we want to help web designers and developers starting to discover new resources and possibilities, as well as setting out concepts that can sometimes be too abstract for those who have already traveled far in the web design world. Also, read\u00a0<\/span>Fix traffic drops after a website redesign<\/a>.<\/span><\/strong><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0<\/span><\/p>\n

Using a small CSS framework usually translates into a more gentle developer learning curve, non-dependence of features on JavaScript, and quicker user load times.\u00a0<\/span>Dubai Web Developer<\/a>\u00a0gives the best framework.<\/span><\/p>\n

 <\/p>\n

1) <\/span>Min:<\/span><\/u><\/strong><\/h3>\n

Min, the smallest CSS framework on the list, has a responsive 12-column grid system, button styles, table styles, and more. Min also supports old Internet Explorer 5.5 browsers.<\/span><\/p>\n

 <\/p>\n

2) <\/span>Milligram:<\/span><\/u><\/strong><\/h3>\n

Milligram is for modern UIs \u2014 its grid system uses FlexBox, the rem unit uses sizes and lengths, and it is Mobile First. The cutting edge comes at a cost: Milligram only supports the newest versions of Chrome, Firefox, IE, Safari, and Opera officially.<\/span><\/p>\n

 <\/p>\n

3) <\/span>Blaze CSS:<\/span><\/u><\/strong><\/h3>\n

Blaze CSS is already lightweight out of the box, but thanks to its modular architecture, you can reduce its file size, even more, allowing you to include only the parts that you want to use in your design.<\/span><\/p>\n

 <\/p>\n

4) <\/span>Kube:<\/span><\/u><\/strong><\/h3>\n

For a CSS framework weighing less than 6 KB, Kube packs a punch. It has a responsive grid system, a robust set of web form styling classes, multiple table classes, notification classes to display important messages to your users, and more.<\/span><\/p>\n

 <\/p>\n

5) <\/span>Pure:<\/span><\/u><\/strong><\/h3>\n

Pure, a Yahoo! developers-led open source project, is a suite of CSS modules that will help you build responsive web designs quickly. Pure has basic styles for all HTML elements (developed at the top of Normalize.css) and grid layout modules, web shapes, buttons, tables, and menus for navigation.<\/span><\/p>\n

 <\/p>\n

6) <\/span>Furtive:<\/span><\/u><\/strong><\/h3>\n

Furtive, calling itself a “CSS micro-framework,” is focused on modern web designs. Furtive is Mobile First, like Milligram, has a FlexBox-based responsive grid and uses the rem unit for lengths and sizes. This covers the basics: keys, shapes, and even the default classes of colors.<\/span><\/p>\n

 <\/p>\n

7) <\/span>Skeleton:<\/span><\/u><\/strong><\/h3>\n

Skeleton is still a top-notch starting point \/ boilerplate for rapidly building modern, responsive web designs, although it hasn’t been updated in more than a year. For your HTML elements, it comes with an intuitive grid system and basic styles.<\/span><\/p>\n

 <\/p>\n

8) <\/span>Fox CSS:<\/span><\/u><\/strong><\/h3>\n

FOX CSS is a lightweight modular CSS system. This uses the Mobile First design approach, supports IE 9-old browsers and has a non-aggressive CSS reset.<\/span><\/p>\n

 <\/p>\n

9) <\/span>Bass CSS:<\/span><\/u><\/strong><\/h3>\n

Bass CSS consists of 22 CSS modules consisting of a CSS reset, a grid system, color classes, classes of utilities to help you build your responsive designs, and more. For something that weighs less than 4 KB, Basscss is remarkably rich in features.<\/span><\/p>\n

 <\/p>\n

10)\u00a0<\/span>Siimple:<\/span><\/u><\/strong><\/h3>\n

Siimple is a minimalist CSS framework for web designs that are responsive and clean. It’s similar to Skeleton: for typography, tables, buttons, forms, and more, it has an intuitive 12-column grid system and basic styles.<\/span><\/p>\n

 <\/p>\n

11)\u00a0<\/span>Lotus:<\/span><\/u><\/strong><\/h3>\n

Lotus is one of the smallest out there CSS frames. This includes the essentials: a dynamic grid structure, typography, buttons, and aspects of the internet.<\/span><\/p>\n

 <\/p>\n

12)\u00a0<\/span>Picnic CSS:<\/span><\/u><\/strong><\/h3>\n

Picnic CSS is a lightweight UI framework written in Sass that makes editing and customizing variables like colors and lengths easier for you. It also has some amazing components such as a modal window and a content slider that are just CSS UI.<\/span><\/p>\n

 <\/p>\n

Conclusion:<\/span><\/u><\/strong><\/h3>\n

The W<\/a><\/span>eb Developer Dubai<\/a>\u00a0must decide whether to use a framework or not. This will depend on some of the issues that we’ve been looking at. Frameworks are a tool that can be extremely useful to many people, but this does not necessarily mean that they are useful to you. Now you know what they are, what they are, and the benefits and disadvantages of using them.<\/span><\/p>\n

 <\/p>\n

Let\u2019s Get in Touch:<\/span><\/u><\/strong><\/h3>\n

Contact me and get the best CSS framework for your website.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

You can use smaller, easier CSS frameworks out there instead to incorporate it into your website. This article aims to present what frameworks are and what they are used for, together with a selection of the best that can be obtained free of charge on the internet. In this way, we want to help web […]<\/p>\n","protected":false},"author":1,"featured_media":1514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[34],"tags":[],"yoast_head":"\n12 Small CSS Framework to Use in Your Website -<\/title>\n<meta name=\"description\" content=\"You can use smaller, easier CSS frameworks out there instead to incorporate it into your website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 Small CSS Framework to Use in Your Website -\" \/>\n<meta property=\"og:description\" content=\"You can use smaller, easier CSS frameworks out there instead to incorporate it into your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-16T09:06:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/saadashraf.net\/blog\/wp-content\/uploads\/2019\/11\/A5-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"654\" \/>\n\t<meta property=\"og:image:height\" content=\"348\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/saadashraf.net\/blog\/#\/schema\/person\/07c8e06409a4c41e57cc283478049b72\"},\"headline\":\"12 Small CSS Framework to Use in Your Website\",\"datePublished\":\"2019-11-16T09:06:22+00:00\",\"dateModified\":\"2019-11-16T09:06:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/\"},\"wordCount\":702,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/saadashraf.net\/blog\/#organization\"},\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/\",\"url\":\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/\",\"name\":\"12 Small CSS Framework to Use in Your Website -\",\"isPartOf\":{\"@id\":\"https:\/\/saadashraf.net\/blog\/#website\"},\"datePublished\":\"2019-11-16T09:06:22+00:00\",\"dateModified\":\"2019-11-16T09:06:22+00:00\",\"description\":\"You can use smaller, easier CSS frameworks out there instead to incorporate it into your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/saadashraf.net\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"12 Small CSS Framework to Use in Your Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/saadashraf.net\/blog\/#website\",\"url\":\"https:\/\/saadashraf.net\/blog\/\",\"name\":\"Blogs\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/saadashraf.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/saadashraf.net\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/saadashraf.net\/blog\/#organization\",\"name\":\"Saad Ashraf\",\"url\":\"https:\/\/saadashraf.net\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/saadashraf.net\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/saadashraf.net\/blog\/wp-content\/uploads\/2023\/03\/Saad-Ashraf-Logo.jpeg\",\"contentUrl\":\"https:\/\/saadashraf.net\/blog\/wp-content\/uploads\/2023\/03\/Saad-Ashraf-Logo.jpeg\",\"width\":350,\"height\":162,\"caption\":\"Saad Ashraf\"},\"image\":{\"@id\":\"https:\/\/saadashraf.net\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/saadashraf.net\/blog\/#\/schema\/person\/07c8e06409a4c41e57cc283478049b72\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/saadashraf.net\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1dd2838ca55a7e429f4853f74d0eb550?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1dd2838ca55a7e429f4853f74d0eb550?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"12 Small CSS Framework to Use in Your Website -","description":"You can use smaller, easier CSS frameworks out there instead to incorporate it into your website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/","og_locale":"en_US","og_type":"article","og_title":"12 Small CSS Framework to Use in Your Website -","og_description":"You can use smaller, easier CSS frameworks out there instead to incorporate it into your website.","og_url":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/","og_site_name":"Blogs","article_published_time":"2019-11-16T09:06:22+00:00","og_image":[{"width":654,"height":348,"url":"https:\/\/saadashraf.net\/blog\/wp-content\/uploads\/2019\/11\/A5-1.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#article","isPartOf":{"@id":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/"},"author":{"name":"admin","@id":"https:\/\/saadashraf.net\/blog\/#\/schema\/person\/07c8e06409a4c41e57cc283478049b72"},"headline":"12 Small CSS Framework to Use in Your Website","datePublished":"2019-11-16T09:06:22+00:00","dateModified":"2019-11-16T09:06:22+00:00","mainEntityOfPage":{"@id":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/"},"wordCount":702,"commentCount":0,"publisher":{"@id":"https:\/\/saadashraf.net\/blog\/#organization"},"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/","url":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/","name":"12 Small CSS Framework to Use in Your Website -","isPartOf":{"@id":"https:\/\/saadashraf.net\/blog\/#website"},"datePublished":"2019-11-16T09:06:22+00:00","dateModified":"2019-11-16T09:06:22+00:00","description":"You can use smaller, easier CSS frameworks out there instead to incorporate it into your website.","breadcrumb":{"@id":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/saadashraf.net\/blog\/12-small-css-framework-to-use-in-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/saadashraf.net\/blog\/"},{"@type":"ListItem","position":2,"name":"12 Small CSS Framework to Use in Your Website"}]},{"@type":"WebSite","@id":"https:\/\/saadashraf.net\/blog\/#website","url":"https:\/\/saadashraf.net\/blog\/","name":"Blogs","description":"","publisher":{"@id":"https:\/\/saadashraf.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/saadashraf.net\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/saadashraf.net\/blog\/#organization","name":"Saad Ashraf","url":"https:\/\/saadashraf.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saadashraf.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/saadashraf.net\/blog\/wp-content\/uploads\/2023\/03\/Saad-Ashraf-Logo.jpeg","contentUrl":"https:\/\/saadashraf.net\/blog\/wp-content\/uploads\/2023\/03\/Saad-Ashraf-Logo.jpeg","width":350,"height":162,"caption":"Saad Ashraf"},"image":{"@id":"https:\/\/saadashraf.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/saadashraf.net\/blog\/#\/schema\/person\/07c8e06409a4c41e57cc283478049b72","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/saadashraf.net\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1dd2838ca55a7e429f4853f74d0eb550?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1dd2838ca55a7e429f4853f74d0eb550?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/posts\/1513"}],"collection":[{"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/comments?post=1513"}],"version-history":[{"count":1,"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"predecessor-version":[{"id":1515,"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/posts\/1513\/revisions\/1515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/media\/1514"}],"wp:attachment":[{"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/saadashraf.net\/blog\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}