Skip to content

Releases: madebymode/mode-front-end

Add configurable duration to `invisible-until-active` mixin

31 Oct 17:59
@tannerhodges tannerhodges
v2.11.0
5950d66
Compare
Choose a tag to compare
Add configurable duration to `invisible-until-active` mixin Latest
Latest

New syntax for quick "invisible until active" elements + configurable transition duration (defaults to 500ms):

div {
  @include invisible-until-active(200ms);
}
<button id="myButton">Show Element</button>
<div id="myElement">Look, I faded in!</div>
myButton.addEventListener('click', (event) => myElement.classList.add('is-active'));

More Details

Assets 2
Loading

Page title and meta helpers

26 Oct 18:32
@tannerhodges tannerhodges
v2.10.0
eb9e6d0
Compare
Choose a tag to compare
Page title and meta helpers

In your layout:

<?php title()->setDelimiter(' | '); ?>
<html>
<head>
  <title><?php echo title()->render(); ?></title>
  <?php echo meta()->render(); ?>
</head>
<body>
  <!-- ... -->
</body>
</html>

In your view:

<?php
title()->prepend('My title');
meta()->add('description', 'My description');
?>
<h1>My title</h1>
<!-- ... -->

More Details

Assets 2
Loading

Touch helper + Lots of fixes

21 Sep 17:04
@tannerhodges tannerhodges
v2.9.0
021e310
Compare
Choose a tag to compare
Touch helper + Lots of fixes

Touch Helper

const hasTouched = require('mode-front-end/resources/assets/js/browserDetect/hasTouched');

// Before user touches the screen
console.log(hasTouched()); // false

// After user touches the screen
console.log(hasTouched()); // true
.has-touched {
  /* Touch-only styles, applied *after* user touches the screen */
}

Other Updates Since Previous Release (v2.6.3):

More Details

Assets 2
Loading

Plain JS event delegation + Days since timestamp

10 Aug 20:07
@tannerhodges tannerhodges
v2.6.3
d2929cd
Compare
Choose a tag to compare
Plain JS event delegation + Days since timestamp

Plain JS event delegation: on

const daysSince = require('mode-front-end/resources/assets/js/time/daysSince');

let yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

console.log(daysSince(yesterday)); // 1

Days since timestamp: daysSince

const on = require('mode-front-end/resources/assets/js/event/on');

on('body', 'click', '.item', function(e) {
  console.log(e.target); // HTMLElement
});

Other Updates Since Previous Release (v2.3.1):

  • Add latest .gitignore files from Laravel 5.4.32
  • Move included JS packages to Starter Kit install script
  • Added u-line-height() utility
  • Added company-themed styles to docs
  • Updated stylelint rules

More Details

Assets 2
Loading

Stylelint

05 Jun 20:19
@tannerhodges tannerhodges
v2.3.1
61d8286
Compare
Choose a tag to compare
Stylelint

Switched from scss-lint to stylelint.

More Details

Assets 2
Loading

Flexible `u-object-fit()` mixin

01 Jun 16:18
@tannerhodges tannerhodges
v2.2.1
a4c72ed
Compare
Choose a tag to compare
Flexible `u-object-fit()` mixin

Since the extra width: 100%; height: 100%; styles were removed from .u-object-fit-cover in #9, we've refactored u-object-fit() to work like u-position() and allow custom styles via @content.

For example:

@include u-object-fit('cover-100%', cover) {
  width: 100%;
  height: 100%;
}

More Details

Assets 2
Loading

New `btwn-*-and-*` alias for mq()

31 May 13:47
@tannerhodges tannerhodges
v2.1.0
8680b88
Compare
Choose a tag to compare
New `btwn-*-and-*` alias for mq()

Added new btwn-*-and-* alias for mq() mixin.

Examples

Now you can add "between queries" with mq():

@include mq('btwn-sm-and-md') {
  …
}

You can use it with any object, component, and utility mixins:

@include u-margin('horizontal-auto', auto, 'btwn-sm-and-md');
@include u-padding('horizontal-md', $gutter-md, 'btwn-sm-and-md');
@include u-color('red-1', $color-red-1, 'btwn-sm-and-md');

That will generate styles like this:

@media all and (min-width: 30em) and (max-width: 48em) {
  .u-margin-horizontal-auto\@btwn-sm-and-md { … }
  .u-padding-horizontal-md\@btwn-sm-and-md { … }
  .u-color-red-1\@btwn-sm-and-md { … }
}

Which can be used to add responsive styles in markup like this:

<div class="u-margin-horizontal-auto@btwn-sm-and-md  /  u-padding-horizontal-md@btwn-sm-and-md">
  <span class="u-color-red-1@btwn-sm-and-md">…</span>
</div>

More Details

See CHANGELOG for more details.

Assets 2
Loading

Docs, Improvements, and More

23 May 21:32
@tannerhodges tannerhodges
v2.0.0
74e716c
Compare
Choose a tag to compare
Docs, Improvements, and More

Added

Removed

  • Remove viewport-units-buggyfill as its not needed for last 2 versions of modern browsers anymore
  • Temporarily remove u-small-caps() mixins (plan to repurpose as an object)

Changed

  • Autoprefixer Browserlist to defaults plus IE 10+ and iOS 8+
  • Reorganize Sass functions and mixins
  • Use separate mixins for all object elements by default
  • Rename and simplify o-list--* modifiers
  • Refactor utilities so they allow flexible alias/value combinations (e.g., u-position() and u-width())

Fixed

  • Fix hover() mixin incorrectly generating selectors for multiple active classes
  • Update u-hover() mixin so it allows multiple active classes as a map value
  • Fix u-property-directional() incorrectly handling aliases with dashes (e.g., top-gray-3)
  • Fix u-property generators so they allow classes with special characters (use escape-characters() in breakpoints())
  • Add required media type so mq() generates valid CSS media queries

More Details

See CHANGELOG for more details.

Assets 2
Loading

PHP Helpers + inline SVGs for @icon

12 Apr 19:00
@tannerhodges tannerhodges
v1.2.0
83a944d
Compare
Choose a tag to compare
PHP Helpers + inline SVGs for @icon

Adds new PHP helpers:

  • render_attributes
  • asset_url
  • fix_widows

And new features for @icon:

  • Use full path for inline SVGs
  • Allow override for sprite_path

More Details

See CHANGELOG for more details.

Assets 2
Loading

@icon Blade Helper

22 Mar 21:14
@tannerhodges tannerhodges
v1.1.0
7b99bc5
Compare
Choose a tag to compare
@icon Blade Helper

Adds new @icon Blade helper for use in Laravel apps.

See install notes in resources/views/elements/icon.blade.php.

Bug Fixes

  • Improved starter kit files (sample markup, display utilities, SVGs, etc.)
  • Fix broken list imports

More Details

See CHANGELOG for more details.

Assets 2
Loading