{"id":64848,"date":"2017-10-27T00:00:00","date_gmt":"2017-10-27T04:00:00","guid":{"rendered":"https:\/\/www.gticanada.com\/how-to-create-a-web-application-without-css-framework\/"},"modified":"2024-08-18T02:45:52","modified_gmt":"2024-08-18T00:45:52","slug":"how-to-create-a-web-application-without-css-framework","status":"publish","type":"post","link":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/","title":{"rendered":"How to Create a Web Application Without CSS Framework?"},"content":{"rendered":"<p>The CSS framework is part of my everyday activities at work. Whether it is to <a href=\"https:\/\/www.multiplemedia.com\/en\/expertises\/web-development\">develop a website or an application<\/a>, it is an indispensable tool! But what to do when restricted to developing without it?<\/p>\n<p>I recently designed an interactive quiz as part of a new product launch campaign for a new client. One of the main challenges of the project: to develop a responsive application without the use of a CSS framework!<\/p>\n<h1>The Advantages of the CSS Framework<\/h1>\n<p>The use of a CSS framework brings several advantages in the creation of a responsive application. This is what makes it so popular.<\/p>\n<ul>\n<li>Easily positions items in a grid<\/li>\n<li>Solves compatibility problems between browsers<\/li>\n<li>Facilitates responsive development by managing all device sizes (mobile, tablet, and desktop)<\/li>\n<\/ul>\n<h1>A Customized Strategy<\/h1>\n<p>But sometimes we can\u2019t use it. This can be a client\u2019s specific requirement for a new development, or simply a technical reason (e.g. maintenance on a site already developed without a CSS framework).<\/p>\n<p>So, my questioning about the difficulty of positioning design elements responsively led me to seek advice from our team of developers.<\/p>\n<p>Here is the strategy developed to solve this problem:<\/p>\n<p>First, the definition of the following classes:<\/p>\n<ul>\n<li>container: to contain the elements of the page<\/li>\n<li>row: to place items in a row as on a grid<\/li>\n<li>tile: to define a content block<\/li>\n<\/ul>\n<p>Now let\u2019s go through the magic solution:<\/p>\n<h3>1. Use the CSS float positioning technique for the row and tile classes.<\/h3>\n<p>The float method is a way of positioning elements out of the normal flow of the HTML page\u2014they become floating elements.<\/p>\n<h3>2. Use media queries to manage the responsiveness on different types of devices.<\/h3>\n<p>A media query is a CSS rule used to apply styles per specific conditions. For example, if you don\u2019t want the browser to display an item on mobile, then specify the condition in the media query (for mobile). If the device size is smaller than 750px, don\u2019t show the element (if the size is greater than 750px, the element will be displayed).<\/p>\n<h3>3. Place each section of the quiz in a container.<\/h3>\n<p>The minimum size of the container must be defined in the media query specific to each type of device to contain the elements of the page. The dimensions of the tiles also need to be defined.<\/p>\n<h1>A Simple Method for Making a Mini Custom Framework<\/h1>\n<p>Through the realization of this project, I learned several interesting things. First, to use media queries, it is necessary to determine break points for mobiles, tablets, and desktops.<\/p>\n<p>In addition, it is necessary to make a careful QA of all scenarios and to manage exceptions for specific supported devices, for example: iPhone\u00a04, iPhone\u00a05, iPhone\u00a06. The incongruities can vary, but watch out for:<\/p>\n<ul>\n<li>Items placed with the relative or absolute positioning method; they may need tweaking for each type of device.<\/li>\n<li>The result on a tablet in landscape mode versus portrait<\/li>\n<\/ul>\n<h1>Mission accomplished!<\/h1>\n<p>In conclusion, the solution implemented was an effective strategy to get through the challenge of the project. With our team\u2019s expertise, we developed a customized product adapted to the needs of our client. There is always a solution to every problem. Challenge yourself!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CSS framework is part of my everyday activities at work. Whether it is to develop a website or an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":47417,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[223,222],"tags":[],"class_list":["post-64848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecosysteme-numerique-research","category-research"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Web Application Without CSS Framework? | GTI Canada<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Web Application Without CSS Framework? | GTI Canada\" \/>\n<meta property=\"og:description\" content=\"The CSS framework is part of my everyday activities at work. Whether it is to develop a website or an [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"GTI Canada\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-27T04:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-18T00:45:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1258\" \/>\n\t<meta property=\"og:image:height\" content=\"323\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"site_gti_canada\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"site_gti_canada\" \/>\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:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/\"},\"author\":{\"name\":\"site_gti_canada\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c\"},\"headline\":\"How to Create a Web Application Without CSS Framework?\",\"datePublished\":\"2017-10-27T04:00:00+00:00\",\"dateModified\":\"2024-08-18T00:45:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/\"},\"wordCount\":544,\"publisher\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg\",\"articleSection\":[\"Digital Transformation Research\",\"Research\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/\",\"url\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/\",\"name\":\"How to Create a Web Application Without CSS Framework? | GTI Canada\",\"isPartOf\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg\",\"datePublished\":\"2017-10-27T04:00:00+00:00\",\"dateModified\":\"2024-08-18T00:45:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage\",\"url\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg\",\"contentUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg\",\"width\":1258,\"height\":323},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gticanada.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Web Application Without CSS Framework?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#website\",\"url\":\"https:\/\/www.gticanada.com\/en\/\",\"name\":\"GTI Canada\",\"description\":\"Partenaire technologique fiable et flexible depuis 35 ans, nous privil\u00e9gions le sur-mesure pour nos solutions num\u00e9riques, logicielles, TI et pour nos services g\u00e9r\u00e9s.\",\"publisher\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gticanada.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#organization\",\"name\":\"GTI Canada\",\"url\":\"https:\/\/www.gticanada.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png\",\"contentUrl\":\"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png\",\"width\":771,\"height\":334,\"caption\":\"GTI Canada\"},\"image\":{\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c\",\"name\":\"site_gti_canada\",\"sameAs\":[\"https:\/\/www.gticanada.com\"],\"url\":\"https:\/\/www.gticanada.com\/en\/blogue\/author\/site_gti_canada\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Web Application Without CSS Framework? | GTI Canada","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:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Web Application Without CSS Framework? | GTI Canada","og_description":"The CSS framework is part of my everyday activities at work. Whether it is to develop a website or an [&hellip;]","og_url":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/","og_site_name":"GTI Canada","article_published_time":"2017-10-27T04:00:00+00:00","article_modified_time":"2024-08-18T00:45:52+00:00","og_image":[{"width":1258,"height":323,"url":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg","type":"image\/jpeg"}],"author":"site_gti_canada","twitter_card":"summary_large_image","twitter_misc":{"Written by":"site_gti_canada","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#article","isPartOf":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/"},"author":{"name":"site_gti_canada","@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c"},"headline":"How to Create a Web Application Without CSS Framework?","datePublished":"2017-10-27T04:00:00+00:00","dateModified":"2024-08-18T00:45:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/"},"wordCount":544,"publisher":{"@id":"https:\/\/www.gticanada.com\/en\/#organization"},"image":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg","articleSection":["Digital Transformation Research","Research"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/","url":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/","name":"How to Create a Web Application Without CSS Framework? | GTI Canada","isPartOf":{"@id":"https:\/\/www.gticanada.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg","datePublished":"2017-10-27T04:00:00+00:00","dateModified":"2024-08-18T00:45:52+00:00","breadcrumb":{"@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#primaryimage","url":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg","contentUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2021\/11\/21522_framework_1258x323.jpg","width":1258,"height":323},{"@type":"BreadcrumbList","@id":"https:\/\/www.gticanada.com\/en\/blog\/how-to-create-a-web-application-without-css-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gticanada.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to Create a Web Application Without CSS Framework?"}]},{"@type":"WebSite","@id":"https:\/\/www.gticanada.com\/en\/#website","url":"https:\/\/www.gticanada.com\/en\/","name":"GTI Canada","description":"Partenaire technologique fiable et flexible depuis 35 ans, nous privil\u00e9gions le sur-mesure pour nos solutions num\u00e9riques, logicielles, TI et pour nos services g\u00e9r\u00e9s.","publisher":{"@id":"https:\/\/www.gticanada.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gticanada.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.gticanada.com\/en\/#organization","name":"GTI Canada","url":"https:\/\/www.gticanada.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png","contentUrl":"https:\/\/www.gticanada.com\/wp-content\/uploads\/2024\/08\/english.png","width":771,"height":334,"caption":"GTI Canada"},"image":{"@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.gticanada.com\/en\/#\/schema\/person\/e92e9e2bebb1051773591f91b523d27c","name":"site_gti_canada","sameAs":["https:\/\/www.gticanada.com"],"url":"https:\/\/www.gticanada.com\/en\/blogue\/author\/site_gti_canada\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/posts\/64848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/comments?post=64848"}],"version-history":[{"count":1,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/posts\/64848\/revisions"}],"predecessor-version":[{"id":65172,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/posts\/64848\/revisions\/65172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/media\/47417"}],"wp:attachment":[{"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/media?parent=64848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/categories?post=64848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gticanada.com\/en\/wp-json\/wp\/v2\/tags?post=64848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}