Comments (7)
Awesome! Would you mind including a screenshot in the PR?
from mvp.
Added to v1.3
from mvp.
Oh, also, I've used mvp here, works great, nice and clean, and clean markup.
https://diemendesign.github.io/AussieOwned/
from mvp.
Had a little bit of a play around:
Styling:
/* Nav */
nav {
align-items: center;
display: flex;
font-weight: bold;
justify-content: space-between;
margin-bottom: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
position: relative; <---- added
display: inline-block;
margin: 0 0.5rem;
}
/* Dropdown */
nav ul li:hover ul li {
display: block;
}
nav ul li ul li {
position: absolute;
top: 1.2em;
left: -.75em;
display: none;
height: auto;
background: #fff;
border: 1px solid var(--color-bg-secondary);
padding: .5em 2em;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow) var(--color-shadow);
}
Markup:
<nav>
<ul>
<li><a class="active" href="link.html">Link</a></li>
<li><a href="link.html">Link</a>
<ul>
<li><a href="link.html">Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
from mvp.
Good question. The primary goal of MVP.css is a a no-class stylesheet for simple sites. If they can be done simply and without classes I'd be open to including them.
from mvp.
The code above, doesn't use classes to achieve a simple nav dropdown, the "active" class above in the HTML is just a remnant of me playing and isn't used, it doesn't exist in the styles above it.
If your happy with it I'll gladly do a PR.
from mvp.
PR with Screenshot added, thanks for such a cool project. I am considering adding a theme to my project AuroraCMS as a minimilst theme, and adding some extra classes but concentrating on keep as much without classes as you have done.
from mvp.
Related Issues (20)
- details and summary HOT 2
- Incorrect right margin on home page in Firefox Android HOT 5
- How about fieldset for inline / flex groups? HOT 1
- Non-semantic labels require IDs & yield minimum target size HOT 1
- Why is the dark mode commented-out? HOT 1
- light/dark mode not working on website HOT 4
- Full width header/footer HOT 2
- Misbehaviour with a standard example page HOT 1
- Why is dark/light mode not part of the package? HOT 6
- How to make input width same as the card container HOT 4
- Unused empty space ? HOT 1
- Style <input type="submit"> as a button HOT 4
- bug in the website when opening the website in safari like the close button is floating on the screen. HOT 2
- Solarized MVP HOT 1
- Underline links HOT 2
- mvp.css v1.13 Release HOT 4
- mark HOT 1
- thought on sup HOT 4
- chevron for summary HOT 3
- mvp.html = index.html HOT 1
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 mvp.