Hi Mark,
Thank you for your reply.
Indeed, each stackideas extension have is own style.css
I red we could replace bootstrap.min.css/bootstrap.js with ccs-grid.css for getting better and more lightweight.
Bootstrap is:
- Bootstrap is too verbose: you need plenty of div even if you only have a couple of blocks in your layout
- Things get even worse when you add responsiveness…
- … or when you want to move your blocks around
- Bootstrap’s grids are limited to 12 columns
- By default, Bootstrap has 10-pixel paddings that are complex to override
- Bootstrap has to be downloaded by the users, which slows down your website
I made a test (please find my attachment)
with css code
body {
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: 420px 1fr 420px;
grid-template-rows: 56px 1fr 56px;
grid-template-areas: "header header header" "left-sidebar component right-sidebar" "footer footer footer";
}
.header {
display: grid;
grid-template-columns: 420px 1fr 420px;
grid-template-rows: 1fr;
grid-template-areas: "logo search notifications";
grid-area: header;
}
.logo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". . .";
grid-area: logo;
border: solid 1px;
}
.search {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". . .";
grid-area: search;
border: solid 1px;
}
.notifications {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". . .";
grid-area: notifications;
border: solid 1px;
}
.footer {
display: grid;
grid-template-columns: 420px 1fr 420px;
grid-template-rows: 1fr;
grid-template-areas: "footer-1 footer-2 footer-3";
grid-area: footer;
}
.footer-1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". . .";
grid-area: footer-1;
border: solid 1px;
}
.footer-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". . .";
grid-area: footer-2;
border: solid 1px;
}
.footer-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: ". . .";
grid-area: footer-3;
border: solid 1px;
}
.left-sidebar {
grid-area: left-sidebar;
border: solid 1px;
}
.right-sidebar {
grid-area: right-sidebar;
border: solid 1px;
}
.component {
grid-area: component;
border: solid 1px;
}
and html code
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<div class="grid-container">
<div class="header">
<div class="logo">Logo</div>
<div class="search">Search</div>
<div class="notifications">Notifications</div>
</div>
<div class="left-sidebar">Left</div>
<div class="component">Component</div>
<div class="right-sidebar">Right</div>
<div class="footer">
<div class="footer-1">Footer1</div>
<div class="footer-2">Footer2</div>
<div class="footer-3">Footer3</div>
</div>
</div>
</body>
</html>
In addition, css grid is compatible with the major browser as you can see in my second attachment
What about the next future stackideas template? For instance in Echo template or Elegant or Wanderer, there are bootstrap 3.3.7 integrated.
Do you think it could be a good alternative for getting a better lightweight website with a css grid template for joomla in the future?
Thanks for your advice.