Creative Technocrayts

Last time we had a very detailed discussion on Font Awesome 5 and how it stands different from Font Awesome 4.There were three methods to add Font Awesome 5 into our project. Font Awesome 5 can also be downloaded as Web Fonts and used in our local.      style="display:block"      data-ad-format="fluid"      data-ad-layout-key="-bw+m-2t-1d4+2yh"      data-ad-client="ca-pub-9980434921650127"      data-ad-slot="6489306790"> Now Font awesome, has got its new release FontAwesome 5.1.0 with three more categories, 1. Travel 2. Design 3. Emoji We felt awesome after seeing release of Font awesome 5.1 Emoji icons and can’t wait to use in our next project. Font awesome continues to stand apart with large icon base with much better compatibility. All Javascript component packages are now stable. Font awesome 5.1 can be used for React, Angular, Vue and Ember projects. Know the implementation of Font Aweso...

CSS Flexbox Order CSS Flexbox is a powerful tool for creating responsive web layouts. We have discussed CSS Flexbox layout and its related properties with examples in our previous post. In this article, we’ll focus on the order property in Flexbox, which allows you to rearrange the order of elements without changing the source code. This makes Flexbox even more versatile for modern web design. Right from the initial stages, ordering the elements has been quite tricky. CSS Flexbox ordering emphasizes how useful it is for responsive design. For example, when designing a mobile version of a website, you might want the sidebar to appear below the content instead of beside it. Using the order property allows you to achieve this reordering without modifying the HTML structure. When attempting to visually order the elements differently from the source code order, the flexbox order of the elements is very useful. Cross Browser compatibili...

CSS Flexbox Layout – Complete Guide with Examples Before diving in, make sure to read our guide on CSS Display Property . Traditionally, web layouts like the above were created using CSS floats . However, with CSS Flexbox , you can achieve the same results more efficiently and responsively. Why Use CSS Flexbox? ✅ Flexbox is a modern alternative to CSS floats and table layouts. ✅ It gives control over alignment, direction, order, and size of elements within a container. Let’s explore each concept of Flexbox step by step. Basic Components of CSS Flexbox a) Flex Container b) Flex Items Browser Compatibility CSS Flexbox is supported by all modern browsers including Chrome, Firefox, Safari, iOS Safari, and Opera. Internet Explorer 11 supports an older version of the specification with some limitations. ...

You may read the previous article What is Responsive web design? Like Mobile usability , mobile performance also matters when it comes to appear first in Google search results. Page speed is important Google has announced that from July 2018, Page speed as mobile ranking factor. The announcement has been come in advance so that website owners can revamp their sites accordingly and make sure that their website is performing well. Google business logic behind AMP There are many ad-blockers in usage and many potential players switch from website to web apps. So web advertising revenue of Google might be at threat. So AMP is devised so ads are integral part of the HTML itself. Nowadays, people use apps to search content and apps are comparatively performing faster to web . Google’s main business is based on crawling and indexing of websites and searching content from web and producing it in a readable format. It is also noted that web pages have a drawback of loading speed. Since ap...

Mobile usability of websites Web is pervasive and the way we access to web is constantly changing and change is happening for the better. People are increasingly using smartphones to access sites than desktops and laptops as once they did. So keeping our websites mobile friendly is essential. Mobile usability of websites If you are new to web development how to make websites responsive will give a better idea. Early 2018, Google has announced that websites which are mobile friendly will be ranked for better results in search engine. So it is always better to make sure you have optimized mobile performance to be there in the show! Mobile usability and Responsiveness Websites and content management systems should also be mobile oriented and make users feel ease while accessing. Mobile usability on the whole is a broad concept which includes responsiveness of the site and both are not the same. Responsive site means how well our sites adapt to the width and orientation of the mobi...

Font awesome 5 is an icon set and toolkit making it easy for web designers to add vector icons and social icons to website. We had been using font awesome since 3 version and we have explored version 5 soon after its release. For any websites, Fonts in Websites play an impact in UI / UX. Font awesome is just awesome!! The main reason of Font awesome5 doing great is it is been a popular repository and yet to find a competitor of its par. They provide wide range of icons set. None of the other icon packs provide such versatility and compatibility. Styles of FontAwesome 5 1) Solid 2) Regular 3) Light 4) Brands Font awesome 5 icons Font Awesome 5 comes in two versions : 1) Free 2) Pro Font Awesome5 official documentation states that we may get a Pro license of $60 with 1,718 more icons to the free version of 989 icons. Icons of light styles comes with Pro version Font awesome 5 comes in two formats 1) Web fonts for embedding in our project file. 2) Desktop fonts as ...

DataTables jQuery Plugin Options – Complete Guide In Part I of this series, we introduced the basics of the DataTables.net jQuery plugin . The DataTables jQuery plugin provides a rich set of configuration options for sorting, paging, search, and responsive layouts. Let’s see how you can utilize these options efficiently. CDN Links for DataTables Add the following CSS and JS files to your project using CDN links: Stylesheet References https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Script References https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Disable All Options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” dropdown at the bottom of the data table $('.promo-prici...