Comments (7)
Maybe I should add this to docs but you need to give the block some height...
from atoms.
Added some doc help text...if you want to re-open this issue feel free 👍
from atoms.
Okay, just tried your suggestion
html:
<div class="u-center-block">
<div class="u-center-block__content">Hello Blaze</div>
</div>
main.css:
.u-center-block {
height: 100%
}
well, what if i try like this:
main.css:
.u-center-block__content {
height: 100%
}
looks little bit better ;)
Maybe i do something wrong?
from atoms.
.u-center-block {
height: 100%
}
doesn't really work, if the div doesn't have measurable height (which it doesn't have in this context).
Here's a quick example how you could use it.
Give the outer div a fixed height (in px, em, rem...) or put some content in it.
from atoms.
Unfortunately, this one works perfect for some blocks, but not for entire page.
For example, if i want responsive vertical alignment it's not working.
from atoms.
Try this:
<body>
<div class="u-center-block__content">Hello Blaze</div>
</body>
Would you like this to be a separate feature?
u-absolute-center
for instance
from atoms.
Thanks, this one works like a charm.
Would you like this to be a separate feature?
Yes, this makes sense. Also i think this example needs to be added in docs.
from atoms.
Related Issues (20)
- What happened with my favourite css framework site? HOT 5
- <h1> disappears when u-center-block__content is applied to it. HOT 1
- blaze website is down? HOT 8
- Npm? HOT 3
- Better JS Framework Integration with EventEmitter / More JS Atoms / Vue HOT 12
- Make managing packages easier
- Add Storybook
- Add website to monorepo
- [email protected] (latest) not available on npmjs HOT 1
- Calendar days height changes when selecting HOT 2
- FEATURE: HTML input type file custom UI HOT 3
- Many elements are not interactive when browsing the demo on ios safari HOT 1
- What version should I use when following your install guide? HOT 3
- How to import one css module only? HOT 2
- Demo website is broken? HOT 4
- Autocomplete styling
- Calendar selected day styling
- Refactor site down to simpler solution
- Update all the dependencies
- Issues installing Blaze 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 atoms.