This is one of the pitfalls of using BOOTSTRAP, Which is why I have now moved away from using it. I now just use Flexbox and Grid for the layouts.
I will look into why the space is been created, It could be the padding I put on the embed pseudo, I will let you know what I find.
I too have remove the WATCH ON YOUTUBE link, Like you say, it is redundant now.
I like Bootstrp due to its simplicity. Grid and Flexbox is not as easy to use/follow as using a front-end framework like Bootstrap. Though Bootstrap has its qwerks and sometimes requires odd workarounds, I find the simplicity in which to use it and easier layout to follow more of a pleasure to use the more I work with it, whereas grid, no matter what is a mess. Yes, grid & flex you have more freedom with them, it is however, more of a pain to work with vs using a frontend framework.
I too have been messing with Grid a bit. Been looking at redoing my steam profile. For the forums, here is a demo page I wrote up.
Please login to see this link Get registered or Log in |
Code: [ Select all ]
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:#000;
}
.item1 { grid-area: pic; }
.item2 { grid-area: body; }
.item3 { grid-area: status; }
.item4 { grid-area: mess; }
h1 {
color:#0F0;
}
.grid-container {
display: grid;
grid-template-areas:
'pic body status'
'mess mess mess';
grid-gap: 1px;
background-color: #777;
padding: 2px;
height: 185px;
width: 310px;
}
.grid-container > div {
background-color: #252525;
text-align: center;
padding: 10px 2px;
font-size: 30px;
color: #FFF;
}
.item1 {
width: 75px;
height: 115px;
}
.item2 {
width: 213px;
height: 115px;
}
.item3 {
width: 8px;
height: 115px;
background-color: #0F0 !important;
}
.item4 {
height: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<div class="grid-container">
<div class="item1">pic</div>
<div class="item2">Menu</div>
<div class="item3"> </div>
<div class="item4">Right</div>
</div>
</body>
</html>
Which this mimics the look of the original, just cleaner.
Last edited by coRpSE on Sun May 30, 2021 9:16 am; edited 1 time in total
Yeah Flex and grid are a little harder to get used too, But once you do, You have more freedom in which to make layouts, I found that 80% of the time I was using BOOTSTRAP, I had to actually force overwrites to correct stupid little issues.
I had just started out using BOOTSTRAP when I made the LM-BlackMagic theme, And yes it was quite easy to use BOOTSTRAP to do the layout, as they had plenty of documentation on how to do everything.
However the new BOOTSTRAP is a lot more complicated to work with, They have removed all jQuery support and went with Vanilla JS instead, So that will take some time to work around, I have started an update for BlackMagic theme, and added some new features, but I am not sure whether to stay with BOOTSTRAP for this theme, or move to Flex & Grid.
I guess if you are starting to learn Grid, I could more this theme away from BOOTSTRAP in the future, however I could also code it in a way that if the base is Flex & Grid, BOOTSRAP can still be added without any conflicts.
@coRpSE: You are the only one I have seen attempt to make changes to this theme as of yet, So I will wait to see your response before making the choice of whether to move from BOOTSTRAP.
I had just started out using BOOTSTRAP when I made the LM-BlackMagic theme, And yes it was quite easy to use BOOTSTRAP to do the layout, as they had plenty of documentation on how to do everything.
However the new BOOTSTRAP is a lot more complicated to work with, They have removed all jQuery support and went with Vanilla JS instead, So that will take some time to work around, I have started an update for BlackMagic theme, and added some new features, but I am not sure whether to stay with BOOTSTRAP for this theme, or move to Flex & Grid.
I guess if you are starting to learn Grid, I could more this theme away from BOOTSTRAP in the future, however I could also code it in a way that if the base is Flex & Grid, BOOTSRAP can still be added without any conflicts.
@coRpSE: You are the only one I have seen attempt to make changes to this theme as of yet, So I will wait to see your response before making the choice of whether to move from BOOTSTRAP.
When it comes to modifying the theme, I believe many are afraid to come out and give it a try because no matter what, it's a lot of work and being new to coding, or even having some knowledge, it's daunting. When I purchased this theme from you, I bought it late last year. Granted, a short time after I purchased it from you, my PC died, and took me a few months to come back, it still took me a few months to finally get moving and start work on the theme. I guess it's like any project I do, it's really hard to start, but once started, I can't stop.
I like to keep this theme the way it is using bootstrap. I did read about that with jQuery, but I also was reading on why.
Sorry, little rant coming, not directed at you @Lonestar, it's just stating for others why I feel the way I feel, especially why I keep saying I will not develop themes.
When it comes to what I prefer to use, I will say this, I actually would like to see a global framework put in that is default with the CMS, that way, blocks, modules, and themes can be universally worked on without a mix match of styles. Granted, others CSS styles can be used, but if made available right out of the gate, its making things easier. I do understand why it may not be wanted, trust me, I've heard the arguments, I just much rather code using a singular framework. Sort of why some like using jQuery over straight JS. (I know jQuery is a Library, however, depending on the interpretation, it also meets all criteria to be classed as a framework.). All honesty, I don't know how much I really want to code modules using grid and what not. I just personally hate wasting time on the design and rather focus on function, but, I will not release anything I deemed to look like garbage either.
The only reason I have been messing with grid is that I want my Steam system to work with any theme out there, but do I like it, not at all. Reading up on it just makes me hate it even more and how more difficult things are getting that is "supposed to make things easier". I have been an advocate on hating on CSS and the many directions it has gone and been going, that is just going to make maintaining a system more difficult. I've been saying that for over a decade now and pretty much everything I said has come true. Back in the day, (the good old days), designing a layout of a module or a block using a table structure was easy, and fast. I don't care what anyone says, when it comes to grid, flex, and other CSS structures, it's not as fast to make, and certainly harder to look at the code and understand what the intended look is going to be before you view it in browser. With old tables, I could look at a table structure and in my mind, see what it would look like, and with bootstrap and other similar frameworks, I personally find them easier to read, (not as easy as tables), because I can see what I want the to look like in my head before viewing in browser, as-well as I find it easier to work with and alter.
Let me break this down for others that don't really know much about coding, especially from back in the day, so at least they know what I have been going on about. Back in the day, you had 1 layout, that was tables. Later on, came div's, hard to use, and was not simple to get universally to look the same across all browsers, (pre maturness). Now, you can still do tables, (frowned upon), or use CSS and divs like the old style of doing the CSS, or, using grid/flex, or using one of MANY front end frameworks such as Foundation, Skelton, Bootstrap, Susy, ect... We went from 1 way to many. CSS has evolved since the good old days, and I am not saying it was for the worst, quite opposite, for the better in many ways, like responsiveness of websites, it's just terrible to work with compared to the simplicity of the way things were and could be. Granted, the foundations of the frameworks is still CSS and utilizing DIVS, what they accomplish is making it easier for you to make a layout with them already doing the hard stuff and making it easier for you to make it responsive. Sort of make it like how tables were back in the day.
Overall, if I could, from here on out, all my modules/blocks would be designed would be designed with a framework if it was implemented, but, with grid/flex, I don't see much coming out from me anytime soon, because I really hate that headache, hence why it has been taking me so long just to update the Steam module.
I like to keep this theme the way it is using bootstrap. I did read about that with jQuery, but I also was reading on why.
Sorry, little rant coming, not directed at you @Lonestar, it's just stating for others why I feel the way I feel, especially why I keep saying I will not develop themes.
When it comes to what I prefer to use, I will say this, I actually would like to see a global framework put in that is default with the CMS, that way, blocks, modules, and themes can be universally worked on without a mix match of styles. Granted, others CSS styles can be used, but if made available right out of the gate, its making things easier. I do understand why it may not be wanted, trust me, I've heard the arguments, I just much rather code using a singular framework. Sort of why some like using jQuery over straight JS. (I know jQuery is a Library, however, depending on the interpretation, it also meets all criteria to be classed as a framework.). All honesty, I don't know how much I really want to code modules using grid and what not. I just personally hate wasting time on the design and rather focus on function, but, I will not release anything I deemed to look like garbage either.
The only reason I have been messing with grid is that I want my Steam system to work with any theme out there, but do I like it, not at all. Reading up on it just makes me hate it even more and how more difficult things are getting that is "supposed to make things easier". I have been an advocate on hating on CSS and the many directions it has gone and been going, that is just going to make maintaining a system more difficult. I've been saying that for over a decade now and pretty much everything I said has come true. Back in the day, (the good old days), designing a layout of a module or a block using a table structure was easy, and fast. I don't care what anyone says, when it comes to grid, flex, and other CSS structures, it's not as fast to make, and certainly harder to look at the code and understand what the intended look is going to be before you view it in browser. With old tables, I could look at a table structure and in my mind, see what it would look like, and with bootstrap and other similar frameworks, I personally find them easier to read, (not as easy as tables), because I can see what I want the to look like in my head before viewing in browser, as-well as I find it easier to work with and alter.
Let me break this down for others that don't really know much about coding, especially from back in the day, so at least they know what I have been going on about. Back in the day, you had 1 layout, that was tables. Later on, came div's, hard to use, and was not simple to get universally to look the same across all browsers, (pre maturness). Now, you can still do tables, (frowned upon), or use CSS and divs like the old style of doing the CSS, or, using grid/flex, or using one of MANY front end frameworks such as Foundation, Skelton, Bootstrap, Susy, ect... We went from 1 way to many. CSS has evolved since the good old days, and I am not saying it was for the worst, quite opposite, for the better in many ways, like responsiveness of websites, it's just terrible to work with compared to the simplicity of the way things were and could be. Granted, the foundations of the frameworks is still CSS and utilizing DIVS, what they accomplish is making it easier for you to make a layout with them already doing the hard stuff and making it easier for you to make it responsive. Sort of make it like how tables were back in the day.
Overall, if I could, from here on out, all my modules/blocks would be designed would be designed with a framework if it was implemented, but, with grid/flex, I don't see much coming out from me anytime soon, because I really hate that headache, hence why it has been taking me so long just to update the Steam module.
[UPDATED FIRST POST]
Using Local storage, I put together a system that allows you to have this site as a blue site or a green site. (Default is green).
I am still in the process of working on it and adding too it, but at its current state, I think it is good enough to have available to everyone.
Note: There is a flicker of the default color when the page first loads in if you are using the blue, I am trying to find a way to stop that from happening.
As always, any thought or suggestions is appreciated.
The button is in the upper left of the screen, to the left of the navigation.
Using Local storage, I put together a system that allows you to have this site as a blue site or a green site. (Default is green).
I am still in the process of working on it and adding too it, but at its current state, I think it is good enough to have available to everyone.
Note: There is a flicker of the default color when the page first loads in if you are using the blue, I am trying to find a way to stop that from happening.
As always, any thought or suggestions is appreciated.
The button is in the upper left of the screen, to the left of the navigation.
[UPDATE]
Flicker is fixed and is no longer flickering. I was able to shorten the script as well. Less code the better.
Flicker is fixed and is no longer flickering. I was able to shorten the script as well. Less code the better.
Last update for the color:
I added in a 3rd option for the color choices, now have Red, Green, and Blue as an option.
I added in a 3rd option for the color choices, now have Red, Green, and Blue as an option.
In your Grid how do you tell which component to go to which grid area. For example, where do the forums know where to load ?
— nextgen wroteIn your Grid how do you tell which component to go to which grid area. For example, where do the forums know where to load ?
Which grid are you referring to? The only use of grid that I used was in my example in the post above,
Please login to see this link Get registered or Log in |
If you're talking about that example there, you can see that I define a class called item1, item2, item3, and item4. I set those to show grid areas that I define. Then, under the container, I have grid-template. I have that set so its 3 wide by two high, so with the template, that's why its:
Code: [ Select all ]
grid-template-areas:
'pic body status'
'mess mess mess';
First section correlates saying I want the pic on the left top, the body will be the top middle, and the status as the top right. Since I have 3 on top and I want the bottom section to span all 3, that's why I did mess mess mess, which makes the .item4 div span the full width of the top 3 blocks.
This is one technique of using grid and flex, but you can see just by this 1 example of how much more of a pain it is compared to if I just used a framework like bootstrap, and that is not even responsive yet.
This site, with this theme that I am using now, is using Bootstrap which I find easier to use since it shares a lot of similar feelings with tables, (which I am use too), and the one major rule of thumbs is, you need to remember it each row adds up to 12.