Major overhaul of the CSS and structure #12
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This update includes: - Major overhaul and reformatting of the grid system using sass. - Added a package.json and gulp file - Added a new pdate.html file in the layouts folder explaining the changes. Disclaimer: I am really new to Github and Markdown so the doc is just in html for now.
If the container was wrapped with a div that had no display set, it would show no content. The fix involves setting the container’s display and width while also hiding the overflow from the inner margins. I’ve also fixed an error with the gulpfile’s plumber.
This reverts commit 5c9ca8c.
If the container was wrapped with a div that had no display set, it would show no content. The fix involves setting the container’s display and width while also hiding the overflow from the inner margins. I’ve also fixed an error with the gulpfile’s plumber. I’ve tested the grid on all the latest versions of Firefox, Safari, Chrome, Edge, and iOS and no issues so far.
- Removed overflow:hidden on .container. Using overflow hidden and negative margins to account for the use of border:spacing seemed like a bad idea and very hacky. I think the solution I have come up with is better - I have replaced border-spacing with actual borders and background clip. This allowed me to remove overflow:hidden on the container, which results in improved usability by allowing elements to be positioned relative to a col outside the container. Yay. - Renamed instances of .grid to .row. Using .row just makes more sense to me as it is essentially housing a row of data, not a grid per se. - Added a .row-auto class and styles. This is to take into account the fact that table-cells are designed to fill the entire width of a container. However, sometimes you might want that and instead want just .col-5 in a 12 column row. To tackle this I’ve used inline-block on the .row-auto .cols. Since it is doubtful you would use .row-auto fully loaded with cols, I think this is fine and won’t need much inline-block hackery, however I’ll have to do further testing to see how it actually runs. - Replaced minifycss with cleancss - See sass for usage examples - Yes I will get round to updating the readme with jekyll sometime once i figure out how to use it properly
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This update includes:
Disclaimer: I am really new to Github and Markdown (this is my first project) so my examples are just in plain html for now. I am also open to suggestions on how I can do things better! I've spent quite a bit of time reformatting this 'experiment' as I believe it could potentially be my new go-to grid system for future web projects. I also think it has huge potential for being a game-changer as far as grid systems go.
I was really happy to find this actually as I have been meaning to test run a display:table based grid system for a while now. I use bootstrap daily and whilst it's awesome I have found display:table generally easier and quicker to work with rather than using other solutions.
Basically if I could write a love letter to display:table I would. <3