Comments (7)
Notes from our in-person meeting:
We want the iframe to be inserted onto the page at different sizes depending on the available width on the page and based on the space necessary for the example. Unfortunately the iframe and the page it's on can't communicate about styling.
So we decided to use 3 different predefined widths, applied by passing a class into the macro when it is added to the page.
I would like us to add the class live
to all the iframes and the modifier class live-
for sizes.
<iframe class="live live-small" src="....
The classes and corresponding heights are:
aprox lines | single | side by side | class |
---|---|---|---|
js x 5 | 250px | 250px | live-small |
css x 5 | 400px | 200px | |
css x 10 | 600px | 400px | live-large |
I think the best way to decide how wide the space has to be before we flip to the side-by-side width is for @schalkneethling to look at the design and say what the minimum amount of necessary space is and then we can write the CSS declarations based on a combination of which columns the page has and how wide it is (this will get complicated).
from interactive-examples.
@stephaniehobson Did we want to default to small
and so, we only need to set live-large
when needed? or perhaps live-tall
?
from interactive-examples.
Ok, so this is side by side at 210px
And this is side by side at 400px
from interactive-examples.
Another question here is whether:
- We want to allow comment(I think they can be useful at times)
- Limit these comments to only ever take up one line
Thoughts @stephaniehobson @wbamberg ?
from interactive-examples.
So, here is an example where there is more than 5 but, less than 10
from interactive-examples.
We want to allow comment(I think they can be useful at times)
I think they can be useful if used carefully and quite sparingly. I don't want them to be the documentation :).
Limit these comments to only ever take up one line
I think this is a good goal.
from interactive-examples.
Agreed, I added some comments to the README to reiterate this.
from interactive-examples.
Related Issues (20)
- Blockquote example does not need figure/figcaption HOT 10
- can't change ime after using eyedropper HOT 2
- Incorrect syntax for JSON.stringify() demo HOT 2
- [meta] Should we archive the wiki? HOT 1
- [meta] Ci can skip more types of changes HOT 1
- whitespace-example without whitespace included in code HOT 1
- [meta] CI runs on forks
- `::marker` class showing XML error HOT 2
- Prettier config deviates from mdn/content HOT 2
- Article element in a wrong implementation HOT 5
- :nth-child - update example to be inclusive HOT 5
- `npm install` has `2 vulnerabilities (1 moderate, 1 high)` HOT 2
- `1 moderate severity vulnerability` when running `npm install` HOT 2
- `Array.prototype.reduce()` demo requires horizontal scrolling HOT 7
- Expected output is wrong HOT 2
- Live example on the groups and backreferences page has inconsistent name HOT 3
- try it confusion HOT 2
- css.properties.backdrop-filter - The Firefox WebDev tool says invalid property name although it is running latest edition HOT 1
- Create an interactive example for `HWB()` HOT 5
- Example HTML Dialog HOT 3
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 interactive-examples.