Styling an entire website is always a big task, creating the frame for each screens could create large set of css files. and is clients request a change that affect all screens, then the things will get worse.
How we solve this problem that we face on each project
Is there is a way to style all the screen frame on just one screen and apply to all. and also we can customise each screen content by individual styles.
How?
Here, i am using SCSS and React for an example, But we can have this in any languages.
First, We need to create some constant files. that holds the colour, font, and constants of our project
So for colour here i am creating a color.scss file, and i added a :root selector, Other than any SCSS constants, this root will directly get appleid on browser and there is no need to import this constant files on each SCSS files
:root {
--themeColor: rgb(26, 9, 89);
--boxShadow: rgba(0, 0, 0, 0.25);
--black: #000000;
--whiteInsideTheme: #ffffff;
--invalid: rgb(246, 95, 95);
}
So, here i added some basic colour variables that i normally use in my application, You can add or remove the variables as per the needs.
For the font files, we can use font TTF or WOFF files, How?. In a font.scss file we are adding _@font-face_. Also keep the TTF files in a fonts folder with the SCSS
@font-face {
font-family: "regular";
src: url("./fonts/noto-sans-jp-japanese-400.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "bold";
src: url("./fonts/noto-sans-jp-japanese-900.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "black";
src: url("./fonts/noto-sans-jp-japanese-700.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "light";
src: url("./fonts/noto-sans-jp-japanese-300.woff") format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "medium";
src: url("./fonts/noto-sans-jp-japanese-500.woff") format("woff");
font-weight: normal;
font-style: normal;
}
Using the above set of code we can define font face, and we can use this font-family like given below
body {
font-family: "regular";
}
Ok, then if we have some constant values, We can set in a constant.scss, like given
:root {
--headerHeight: 65px;
--sidebarWidth: 250px;
}
We can use as many :root in any files.
So here we set all constant files, So if a request from client to change entire colour theme of a font family, We can just do this by changing 2 files. Easy right?
So, How we can create styles for all screen?
For styling all screen from a common file, We need to understand how a web application look’s like. I am adding some examples here
- UI with a Header and a Sidebar
- UI with only Header
- UI with only Sidebar
In this three style that we see above we can just use one set of css file and just remove the un wanted item. How?
We can create a main-container.scss file and style all the main frameset there, Here given is a example to create a UI for option 1
.main_container {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
.custom_header {
flex: 0 0 var(--headerHeight);
height: var(--headerHeight);
background-color: var(--white);
box-shadow: 0px 0px 4px 0px var(--boxShadow);
position: relative;
z-index: 99;
}
.content_container {
flex: 1 1 10px;
height: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: var(--mainBg);
.custom_sidebar_container {
-webkit-box-flex: 0;
-ms-flex: 0 0 var(--sidebarWidth);
flex: 0 0 var(--sidebarWidth);
height: 100%;
.custom_sidebar {
height: 100%;
background-color: var(--white);
box-shadow: 0px 1px 4px 0px var(--boxShadow);
border-radius: 0px 4px 4px 0px;
overflow: auto;
padding: 15px 14px;
}
}
.overview_container {
-webkit-box-flex: 1;
-ms-flex: 1 1 10px;
flex: 1 1 10px;
width: 10px;
width: 100%;
height: 100%;
overflow: auto;
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
So how we can use the same file set for option 2 and 3, We can just remove .custom_sidebar_container for option 2 and .custom_header styles for option 3. All the other frames are aligned by flex so when ever we remove the set that we don’t need, It will just auto adujust the other screens.
So how out HTML will look like?.
<div className="main_container">
<div className="custom_header">Header</div>
<div className="content_container">
<div className="custom_sidebar_container">
Sidebar
</div>
<div className="overview_container">
Overview Area
</div>
</div>
</div>
Is this responsive?
Yes, and it will work with any width or height for header and sidebar as well, we don’t need to modify any code for adjusting the resolutions.
There is more we can do with the same some more set of css, here in overview container, we styled this to show some data. We can use the same flex box to create variable and responsive filter and tabular listing screens, here is an example
With the UI given here, We can add some more layout to the Above SCSS
.main_container {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
.custom_header {
flex: 0 0 var(--headerHeight);
height: var(--headerHeight);
background-color: var(--white);
box-shadow: 0px 0px 4px 0px var(--boxShadow);
position: relative;
z-index: 99;
}
.content_container {
flex: 1 1 10px;
height: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: var(--mainBg);
.custom_sidebar_container {
-webkit-box-flex: 0;
-ms-flex: 0 0 var(--sidebarWidth);
flex: 0 0 var(--sidebarWidth);
height: 100%;
.custom_sidebar {
height: 100%;
background-color: var(--white);
box-shadow: 0px 1px 4px 0px var(--boxShadow);
border-radius: 0px 4px 4px 0px;
overflow: auto;
padding: 15px 14px;
}
}
.overview_container {
-webkit-box-flex: 1;
-ms-flex: 1 1 10px;
flex: 1 1 10px;
width: 10px;
width: 100%;
height: 100%;
overflow: auto;
padding: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
.main_title_container {
font-size: 16px;
font-family: "medium";
margin-bottom: 10px;
}
.main_overview_content_container {
-webkit-box-flex: 1;
-ms-flex: 1 1 10px;
flex: 1 1 10px;
height: 10px;
overflow: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
.main_list_container {
-webkit-box-flex: 1;
-ms-flex: 1 1 10px;
flex: 1 1 10px;
height: 10px;
}
}
}
}
}
And the HTML
<div className="main_container">
<div className="custom_header">Header</div>
<div className="content_container">
<div className="custom_sidebar_container">Sidebar</div>
<div className="overview_container">
<div className="main_title_container ">Tittle here</div>
<div className="main_overview_content_container">
<div className="">Some Filter Components Will Appear Here</div>
<div className="main_list_container">Main list here</div>
</div>
</div>
</div>
</div>
Using this, even is the height of filter or title exceed one line, still the UI will be perfectly adapt to the available height becuse of the flex layout we created here. So we can have anything inside this containers without thinking about the frame break. Only thing we need to consider is the order of HTML till this point need to be same.
Any Doubts?
You can contact me through my LinkedIn,
https://www.linkedin.com/in/bibin-antony-773375193/