Comments (14)
That sounds like a good addition.
Perhaps we can add singular examples and an overall example like the fake news page I linked too but recreated with the up to date SUIT packages. Should serve as a good showcase for the tools and act as a place for users to reference their usage.
from suit.
That would be awesome. 🥇 If something like that existed it would be useful for me as a self-proclaimed SUIT evangelist. Its pretty common for me to find people who know about BEM but have never heard of SUIT, so it would be awesome to point people to some quality real-world demos to reference.
from suit.
Ok, I am happy to help. If I see anything, I will open issues. I am an issue-opening machine!
from suit.
PRs are welcome too!
from suit.
If there is not already a good demo that you know of, I can throw a demo together, if one of the many SUIT [Sages|Wizards|Magicians|Ninjas|Unicorns] could vet it for best practices, we could somehow include it here, or link to it externally? Happy to help if I can.
from suit.
Does the test page provide the examples you were after?
http://suitcss.github.io/components-grid/test/
If not then we could certainly add some examples to the repository
from suit.
@simonsmith : the examples on the test page are really great to show the options of the components-grid
itself, but they are not necessarily fully-responsive examples that show you how to adapt your grid to different screen sizes (like adapting your cell layout strategy to different screen sizes), the examples on the test page really just show off the naturally-fluid nature of the grid component itself (which is, no doubt, the first step towards a responsive layout), but the fluid nature of the grid component is not always enough to get you all the way to a fully responsive grid capable of adapting to different screen sizes. For that, one would have to bring in a plugin like utils-size
or utils-offset
. So it would be cool to see some examples of these plugins being used to create fully-responsive demos.
Something like you see on a lot of the other grid system pages (but perhaps something a little more interesting than just the break-every-cell-to-its-own-row-on-mobile-style demos which are common in the wild:
I think SUIT is awesome, but it is hard to find good write-ups and concrete examples of SUIT in action (outside of the documentation and examples in the repositories, of course), so having a nice write-up of how SUIT can be be used to solve "all your responsive needs" would be the first step towards SUIT's global domination.
from suit.
This is old and not valid, but do you perhaps mean a realistic example like this? - http://necolas.github.io/suit-grid-layouts/
Were there any particular things you found unclear that we can fix in the documentation?
from suit.
An updated example like that would be great!
But if that is too much work, then I think simply extracting this comment from the readme:
Cell widths and offsets can be controlled using the responsive sizing utilities and responsive offset utilities, respectively.
and turning it into something a bit more concrete (like examples of both of them in action under the context of the components-grid
).
Something like this:
To get more granular control over your grids, making them fully-responsive, you will need the help of either the utils-size or utils-offset plugins:
- suitcss/utils-size: Sizing utilities for your responsive grids. DEMO HERE
- suitcss/utils-offset: Take control of your media queries and breakpoints. DEMO HERE
Where the DEMO HERE links would be replaced with links to actual demos of components-grid
being used with the respective plugins.
If you visit the readmes of both of the plugins linked to above then you still can't find any examples (or mentions for that matter) of them being used with components-grid
, even though they need each other to make responsive grids. So I think just a way of tying them all together is good enough.
from suit.
Your feedback is appreciated. If you think there are any gaps in the documentation elsewhere please do open an issue. It's certainly an area I've had on my list to improve.
from suit.
I think grid is one of the more powerful and useful components.
We had trouble with people not understanding the concepts behind it as well.
Having better documentation and demos that help its adoption rate would be great.
I could recreate the responsive demo using the current syntax, then we'd link that in a prominent location.
What do you think?
from suit.
Here's a responsive grid demo - Obviously feel free to copy it back to suit. Rendered test link (It's test 2):
https://superflycss.github.io/component-grid/target/test/html/
{% set when1 %}
<code class="u-text-color-md-pink-400">Grid </code> is applied.
{% endset %}
{% call Test.component( 'Grid', when1, 'Cells are rendered with the sizing utility applied when the viewport is large otherwise they are full width.' ) %}
<div class="Grid Grid--withGutter">
<div class="u-lg-size1of4">
<div class="TestBox">1</div>
</div>
<div class="u-lg-size1of4">
<div class="TestBox">2</div>
</div>
<div class="u-lg-size1of4">
<div class="TestBox">3</div>
</div>
<div class="u-lg-size1of4">
<div class="TestBox">4</div>
</div>
</div>
{% endcall %}
from suit.
I could recreate the responsive demo using the current syntax, then we'd link that in a prominent location.
@mlnmln Yeah, I think a real world example as opposed to a test page is the way forward here
from suit.
Could be this simple:
https://medium.com/@ole.ersoy/building-a-responsive-grid-with-superflycss-be6c1f28bebf
from suit.
Related Issues (20)
- Animations HOT 2
- Styles for export - best way to override compoents and/or their modifiers HOT 7
- * Span in Radicar
- Best method for handling same nested block with different modifier? HOT 3
- What lock files we should keep? HOT 11
- Update naming of variables to comply with new conventions HOT 3
- What's next for suitcss? HOT 19
- Monorepo HOT 25
- How about A Chinese documentation? HOT 1
- Remove Component(1) Installation Reference HOT 2
- Upgrade to Node 6 HOT 2
- When using glob @imports, `postcss-reporter` incorrectly reports stylelint errors HOT 4
- Webpack HOT 4
- How to add --xl-viewport HOT 3
- Kill preprocessor HOT 2
- Consider dropping IE10/11 support? HOT 1
- Theming
- Any alternative to html-inspector?
- Nice - I'll send a pull request. Thanks. HOT 3
- What's the difference between a modifier and a state? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from suit.