raisely / base Goto Github PK

Code eg: [class*="button"]

Shouldn't the font-size: 100% be set on the root html element rather than body for REMs to be scalable between responsive steps? If I change the font-size on the body my REMs don't update, but if I change it on html they do.

Something like

//
// Tooltips
// --------------------------------------------------

[data-tooltip] {
    position: relative;
    cursor: pointer;
    .inline-block();

    &:before,
    &:after {
        .transition(all 0.2s ease-out);
        position: absolute;
        visibility: hidden;
        opacity: 0;
    }

    &:before {
        .arrow-up(7px, @textColor);
        content: '';
        left: 50%;
        margin-left: -3.25px;
        z-index: 10001;
        bottom: -10px;
    }
    &:after {
        .box-sizing(border-box);
        content: attr(data-tooltip);
        padding: 0.5em 0.75em;
        border-radius: 3px;
        font-size: 0.875em;
        z-index: 10000;
        left: 50%;
        margin-left: -5em;
        margin-top: 10px;
        width: 10em;
        line-height: 120%;
        background: @textColor;
        color: @baseColor;
    }
    &:hover:before,
    &:hover:after {
        visibility: visible;
        opacity: 1;
    }

    &.tax-tooltip {
        &:after {
            width: 20em;
        }
    }
}

It's not used, and means cleaner code and less overrides of _layout.less

Would be good, the fallback is usable but a bit lame. Currently the animations are only:

• fade
• slide

Will do a check on the Modernizer body class to select which method (jQuery/CSS3) to use.

Add margin width to column width instead.

Add class-based next/previous buttons and a paged dot thing to the carousel.

Experiment with setting page width / # of columns for each responsive snap size and the system automatically calculations column and maybe gutter width.

Need to apply .reset-filter(); when the gradient is being cleared with buttons for IE 8 compadibility.

Open for discussion, should typography be calculated on variables set at the responsive level? In the same way that _layout.less is processed. Will this be helpful or a hinderance?

Browsersync doesn't seem to be working - looks like an issue with how they're ordered in the task

I'm not sure if this is expected behaviour, but in '_forms.less' - this rule (truncated here for brevity) seems to remove the drop-down arrow from select inputs in FF, Chrome and Safari:

// Form Elements
// -------------------

select {
-webkit-appearance: none;
}

Overriding it restores the drop-down arrow:

// Misc Additions

select {
-webkit-appearance: menulist;
}

On npm-install we get the deprecated warning:

npm WARN deprecated [email protected]: This project is now 'https://npmjs.org/package/grunt-browser-sync'

Just need to move to grunt-browser-sync.

Add border-box by default

There is no indication of the version of BASE i currently have on my box!

This starts precedent for some JS in Base with some bare-bones compadibility fixes, Modernizr style.

For placeholder https://gist.github.com/hagenburger/379601 is a good place to start

When you put an offset that equals the column amount the offset doesn't apply. IE

@include columns(4,4) would have no offset.

Wishlist:

1. responsive menu kicks in at tablet.css media query (100% width mobile, max-width on tablet
2. menu shrinks to drop-down with ☰ aligned to right, leaving header on left (with option of a different ascii character or 'Menu').
3. Menu designed with two levels possible levels of sub-menu (may be excessive).
4. Menu z-index overlays over content rather than pushing content down:

• User will scroll page to navigate menu
• Mobile menu needs a close button at bottom which also scrolls page immediately to top
  5) If necessary extra footer navigation list can reveal itself on mobile for very complex pages.
  6) Top-level menu items with sub-menus should function only as headings, not as distinct pages. Can link to first sub-menu item page - in mobile layouts this will be disabled to allow hover function to work.

1. Using .menu-primary, the submenu can appear off-screen on small devices.

2. Using .menu-secondary, the submenu appears by default instead of being hidden by default and appearing on hover.

3. Every submenu under a 'selected' menu appears with a 'selected' background. This looks like every menu item is concurrently selected.

Fix for (3) - assuming only one level of submenu:
&.selected ul li a {
background: #FFF/inherit/transparent/variable;
}

Horizontal and vertical based of <li> with dropdown support.