{"id":2054,"date":"2017-05-02T08:41:36","date_gmt":"2017-05-02T03:11:36","guid":{"rendered":"https:\/\/www.adroitte.com\/blog\/?p=2054"},"modified":"2020-07-23T13:06:11","modified_gmt":"2020-07-23T07:36:11","slug":"a-beginners-guide-to-inuitcss-a-css-framework","status":"publish","type":"post","link":"https:\/\/www.adroitte.com\/blog\/web-development\/a-beginners-guide-to-inuitcss-a-css-framework\/","title":{"rendered":"A Beginner\u2019s Guide to inuitcss: A CSS Framework"},"content":{"rendered":"

The freedom that one gets while dealing with front-end development<\/strong> through a CSS framework is unbeatable. But one should know that not every framework would give the same grade of flexibility in building websites or web applications<\/strong>.<\/p>\n

CSS frameworks<\/strong> provide conceptual structures for a website development<\/strong> and one such framework is inuitcss.<\/p>\n

<\/span>Introduction to inuitcss<\/span><\/h2>\n

An object-oriented, SASS-based framework, Inuitcss<\/strong> is built on a BEM-style naming convention<\/strong>. So what is a BEM? BEM<\/strong> short for Block<\/strong>, element<\/strong>, modifier<\/strong> methodology is a naming convention for classes in HTML<\/strong> and CSS<\/strong>. But what is the need of this convention approach?<\/p>\n

As a front-end developer, one needs to efficiently understand the difference between HTML and CSS, and BEM enables to do that.<\/p>\n

<\/span>Deconstructing & Understanding the BEM Entities<\/span><\/h2>\n
    \n
  • Block-<\/em>\n
      \n
    • A logically independent component, Block can be easily reused due to its principle nature. In general, a block is a distinct page element that can be either simple or complex. A block is nothing but an object of the website that encapsulates the style & behavior. It is given as below,\n
        \n
      • .menu {\/*Styles*\/}<\/em><\/strong><\/li>\n
      • .search{\/*Styles*\/}<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
      • Element-<\/em>\n
          \n
        • An Element<\/strong> is a part of the block that performs some function. Elements are semantically tied to their respective blocks and are written after the block is followed by two underscores.\n
            \n
          • .block__element<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n
          • To give a better understanding of this complex expression, let me give you a simple example. The term menu item and search input field is represented as,\n
              \n
            • .menu__item {\/*Styles*\/}<\/em><\/strong><\/li>\n
            • .search__ input{\/*Styles*\/}<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
            • Modifier-<\/em>\n
                \n
              • The action related to the variation in appearance or behavior of an element is the modifier. The size of a button on a block is the best example; an identical button can have varying appearance due to the modifier. A modifier is used by adding a double hyphen after an element or block, and is given by\n
                  \n
                • .block–modifier {}<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n
                • The above expression is best understood through these examples,\n
                    \n
                  • .menu__item–link {\/* Styles *\/}<\/em><\/strong><\/li>\n
                  • .search__input–icon {\/* Styles *\/}<\/em><\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                    <\/span>Inuitcss: Get Access to Solid CSS Architecture<\/span><\/h2>\n

                    What is the main purpose of inuit.css<\/strong>? And it is specified that this CSS framework<\/strong> is object-oriented. So what are the major benefits that one can attain by going with this framework?<\/p>\n

                    If you are an experienced developer then you will definitely understand the importance of DRY<\/strong> (don\u2019t repeat yourself) concept. Wait! The DRY concept is nothing but a principle used during software development.<\/p>\n

                    Logical contradictions in programs occur due to duplication; hence DRY principle is followed, which also avoids code bloating<\/strong>.<\/p>\n

                    <\/span>Key Benefits of using inuit.css Framework<\/span><\/h2>\n
                      \n
                    • Extensibility-<\/em>\n
                        \n
                      • Not every framework has plugins, but inuit.css has and they are known as igloos<\/strong>. IE6 support, breadcrumb navigation, and much more, igloo<\/strong> offers these features to enhance the functionality of a framework.<\/li>\n<\/ul>\n<\/li>\n
                      • Updates-<\/em>\n
                          \n
                        • From version 1.0 to 2.5, till now a total of 25 updates have been made to the inuit.css framework to improve its purpose and role.<\/li>\n<\/ul>\n<\/li>\n
                        • Browser Compatibility-<\/em>\n
                            \n
                          • Designed for modern browsers, inuit.css is definitely a perfect choice to experience smooth web development<\/strong> process. This CSS framework works better in IE7 and Firefox 4 browsers.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

                            Make your own design choices says inuit.css framework. Designers find this an ideal framework for building websites as its concept revolves solely around modularity and abstractions.<\/p>\n","protected":false},"excerpt":{"rendered":"

                            The freedom that one gets while dealing with front-end development through a CSS framework is unbeatable. But one should know that not every framework would give the same grade of flexibility in building websites or web applications.<\/p>\n","protected":false},"author":2,"featured_media":2055,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[153],"tags":[223],"class_list":["post-2054","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-css-framework"],"_links":{"self":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts\/2054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/comments?post=2054"}],"version-history":[{"count":4,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts\/2054\/revisions"}],"predecessor-version":[{"id":4515,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts\/2054\/revisions\/4515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/media\/2055"}],"wp:attachment":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/media?parent=2054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/categories?post=2054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/tags?post=2054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}