kylelogue / mustard-ui Goto Github PK

What's the easiest way of doing dark mode with Mustard? I think this is a really cool framework and having dark mode would make it just perfect.

Hi Folks!

i got a request to build some AMP stuff, after evaluation I found that mustard-ui is a great (and not abandoned) base solution.

For me a few features are missing, like:

• spacing classes like basscss has
• configurable space / spacings
• available modifier .dense for some stuff like panels (or also not, because can be done with gutter-classes, personally i like &.dense, but for CSS size no gutters at all would be better)
• font-sizes use em/rem instead of px
• further display and alignment classes (display: flex, align-items: center etc.)
• disable attachment to native elements (e.g. button styles applied only to class .btn instead of .button, button)
  • this leads to configurable css selectors
• loading (not only progress)
• reusable typography selectors (body style also as body1, slightly smaller version as body2)
• more typography like $font-family-mono

Also i needed to change some default gutters, removed some top/bottom from e.g. blockquote as this would be variants and not the base for me.

This of cause would increase the over-all size (especially if adding responsive gutters (~8628bytes). Also some changes i made would maybe destroy existing designs.

For the AMP testing and evaluation i begun the changes in my forks branch scribbles. Not everything is done, like said, it is just for some evaluation: https://github.com/elbakerino/mustard-ui/tree/scribbles

(Most) changes are documented in the README_FORK.md

I'm happy to create forks for features wanted or also to discuss some concept stuff - if you are open for it! If not, and i need to further work on it, i would revive an old (way too big and ugly) css framework i started and releasing the combined changes (after finalizing). Otherwise if Mustard get's most features I can simply build an add-on lib, compatible with mustards configs.

Cheers, michael

Hello! I'm the guy from reddit who commented about how awesome this is. I've been picking it apart and playing with it myself.

I converted the files into SASS as I prefer the indented syntax over the SCSS, and on render, I'm getting this warning below. Looking at the code, it looks like the "li" selector in sidebar.scss is empty. Is this intended, or are the "a" elements supposed to be nested under it?

Thanks!

Very nice framework. Would be great if it had class="row gutters"

On the documentation page relating to Tabs the text says that

"Javascript was added in the example to show how they might function."

[edit] - I'd misunderstood the markup

In the example, even looking at the source, it's far from clear what the added javascript is - and where the tab content would go in markup. Could this be clarified, please?

The dropdown arrow using SVG with a data URL works on current Safari, but is invisible on older versions of Firefox and Chrome. This causes usability issues because it looks exactly like the text box in this case. It is more important to have the dropdown arrow than to have the simplistic style.

Hi Kyle,

Sorry to be a pain with these tickets and PRs - presumably while you're sleeping! Anyway, I was just wondering where the code is for the mustard-ui.com site, and if it is or will be made available?

I looked for another branch in the repo which might be it but couldn't see anything. And I couldn't see anything in the main repo ... but perhaps my eyes are deceiving me since it's almost midnight. Thanks for your help.

Andy

Hi Kyle,

I am having an issue when resizing my browser, the hamburger appears but when i click it nothing appears within it. I made a test case and copied and pasted your exact nav bar but still didnt work. Am i missing something.

Thanks

In case it isn't a temporary failure, I thought I would note that the mustard-ui.com domain is not responding.

Did you decide to use https://kylelogue.github.io/mustard-ui on GitHub instead?

If so, you will want to update the CSS and CDN to have the new URL embedded in the css file.

https://mustard-ui.com/ cannot be reached. Has it been moved to a different place.

Hello,
How can I modify mustard-ui through from src/*.css files?
I have encountered 2 problems while trying the whole project into a new mustard-ui.css:

1. The imports are are not complete. So for example base.scss does not import @import '../vars/colors'; so get error in vscode's Live sass watch.
2. even afeter importing relevant code, it is not clear how to make a final mustard-ui.css out of updated .scss
   Appreciate your hints about this.

Add image upload component style

I would like to use the HTML5 validation API to validate my input fields but I noticed there's no design for :invalid fields whereas there is an .invalid class that seems to play the same role. Can you please add some design for :invalid fields also?

I just forked the project and sent a PR (#2) and while I was playing I noticed something.

Running an npm install was fine, then I ran the following:

$ node_modules/.bin/gulp 
[23:15:12] Using gulpfile ~/src/chilts/mustard-ui/gulpfile.js
[23:15:12] Starting 'serve'...
[23:15:12] Finished 'serve' after 24 ms
[23:15:12] Starting 'sass'...
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.20.16:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.20.16:3001
 --------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] 2 files changed (mustard-ui.min.css.map, mustard-ui.min.css)
[23:15:12] Finished 'sass' after 303 ms
[23:15:12] Starting 'default'...
[23:15:12] Finished 'default' after 17 μs

(Side note: I don't have gulp installed globally, so just found that one in my node_modules. I'm also happy to write a few notes down for contributors, esp. since I'm not sure this is how you're currently doing it ... let me know and I'll open another issue and send a fix.)

Anyway, back onto my main thought. I saw that the default action in the gulpfile.js called serve, so I opened localhost:3000 to see what was there. Nothing at the moment. So I tried to load up http://localhost:3000/mustard-ui.min.css but still nothing. In the end I realised I needed http://localhost:3000/dist/css/mustard-ui.min.css to show the css.

However, this told me that the gulp server was actually serving up the repo dir (I checked http://localhost:3000/package.json` and it loaded fine) so, whilst there is nothing bad about this, it seemed like a small opportunity to serve up something else - maybe a small page which loads up the CSS files.

Or if we don't want to, perhaps just remove the serve target? I'd love to know if you actually use it because if you do, I've missed the point entirely (for which I apologise)! 🦃

Using any of the HTML5 input types (e.g. <input type="email">) breaks the wonderful styling of the form input elements. Here's a list of them, according to w3schools.com:

• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

I can see that it's probably not that easy to support all of them right away, but the ones basically staying a text input should work, I guess.

Hi! @kylelogue

a question for you...
When In use M-UI into Scss Webpack environment I want to do this

$nav-bg-color: $color-brown-50;
@import 'node_modules/mustard-ui/src/scss/mustard-ui.scss';

But I can't because it say me:

ERROR in ./assets/sass/style.scss
Module build failed: ModuleBuildError: Module build failed: 
$nav-bg-color: $color-brown-50;
              ^
      Undefined variable: "$color-brown-50".

We need to split the library into two different pieces

1. Constants pre-loading
2. Elements and Components

In this way we can do:

@import 'node_modules/mustard-ui/src/scss/mustard-ui-constants.scss';

$nav-bg-color: $color-brown-50;
@import 'node_modules/mustard-ui/src/scss/mustard-ui-elements.scss';
@import 'node_modules/mustard-ui/src/scss/mustard-ui-components.scss';

Please create a way to do this in a Mustard manner...
In my opinion, this would be the way to keep Mustard-UI as dependency on other projects without necessarily modifying the kernel

https://mustard-ui.com/docs/flexbox-grid/

Use an offset section

.col-sm-4          .col-sm-offset-2

should be

.col-sm-5          .col-sm-offset-2

i cant make css file from scratch because other files cant get imported correctly because partial file name wasn't start with underscore "_"

The form styling for an <input type="range"> is appearing like this.

Actual:

Expected:

First of all, it's great, but
could you provide the documentation offline, so that I can download it, or a way to build it, is important as I spend a lot of time offline

Is it my imagination or is .mobile-menu missing from the distribution? Trying to use it as the docs say but the menu is not hidden on the desktop. Did a grep on the distribution and didn't find it. I see on the Mustard site that .mobile-menu is defined but not in my npm distro.

grep -r .mobile-menu *
components/navigation.scss:.mobile-menu-toggle {

When using dart-sass (1.37.5) to compile scss there's a lot of deprecation warnings:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($i, $col-count)

More info and automated migrator: https://sass-lang.com/d/slash-div

Hi! @kylelogue @patrickhlauke @chilts

This is a good work sweet look&feel,
I want to install through NPM but there is no way to hack variables outside of the package

How do this??
Bye

On firefox 66.05 when i use the .display-lg-up class on tr/td it defines display:initial for large screens.

That break the display, for some reasons the cells behaves like if they had display:inline, and their baseline is like top.

How do you hide columns for some viewport dimensions otherwise ?

Beyond the basic styling fix #9 (which only provides minimal styling, and may need to be revisited in future to strengthen some of those styles further to make them more apparent), there are a few more things to consider for keyboard users (looking over the documentation):

• Modals: these will require additional JavaScript to handle correct focus management; when modal is opened, focus should move into the modal; focus should remain in the modal; when the modal is closed, focus should return to the point where it was before the modal was opened.
• Navigation: the hamburger as implemented is not keyboard-focusable (it's an anchor, which does not receive focus by default). simplest way to fix this: use a <button> instead; otherwise, will require the addition of tabindex="0" (to force focusability), role="button" (to convey at least that it's a button to assistive technologies), and JavaScript that reacts not just to click but also to onkeyup and checks for use of SPACE key.
• Sidebars: similar to the Navigation issue, using <h3> or similar non-interactive elements is problematic. again, simplest to use a <button> (and, at a stretch, this could be nested inside the heading, so <h3><button> ... </button></h3>). or use similar additions (tabindex etc) as above.
• Tooltips: <span>s aren't focusable. at a bare minimum, force focusability with tabindex="0".

There are further things that should be done (with extra aria-* attributes) to convey things better to assistive technologies, but getting keyboard access right would be a good first step.

Firstly thanks for releasing this it's good to see a new lightweight bottom - up css framework.

Like many others I've become used to Bootstrap and therefore having a single config file to tweak the css options.

I've created an example fork (https://github.com/dijitaltrix/mustard-ui) which pulls out all the variables into a single config file called 'vars/defaults.scss', this file is loaded by the main 'mustard-ui.scss' file, then another file is called with my specific site overrides which contains specific overrides of defaults.scss.

Personally I prefer this approach over mingling config in with the rest of the css, e.g. it helps when updating older sites as I can pull future changes knowing that my config will not be affected.

As long as the defaults file is always kept up to date the build should never fail due to missing variables, and I can refer to changes in that file to see whats new.

If it looks okay I'm happy to create a pull request.

Sorry! I am a newbie at and , but is there any way to add functions (Let's say, add a link) to the buttons?