| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Scaling preso</title> | |
| <style> | |
| html { | |
| font-size: 7.68px | |
| } |
| # A matcher to assert an array is sorted | |
| # according to the value of the method or key corresponding to a symbol. | |
| # | |
| # Looks like this: | |
| # expect([{ :id => 1 }, {:id => 0}]).to be_ordered_by(:id) | |
| # expect([<User>, <User>]).to be_ordered_by(:id) | |
| RSpec::Matchers.define :be_ordered_by do |sort_method| | |
| match do |actual| | |
| actual = ensure_sendable(actual) |
| /* | |
| This is not a CSS Framework | |
| =========================== | |
| This is a handful of Sass mixins that get you everything you need | |
| from a CSS grid framework while minimizing dependencies, overrides, and complexity. | |
| Use it if you want, but my point is that many projects | |
| don't need anything as complex as Bootstrap or Neat. | |
| Don't assume you need a framework at all. |
| modules/ | |
| <module-name>.scss // One file per module | |
| mixins/ | |
| <mixin-name>.scss // One file per mixin (varations in one file are ok. e.g. `container` and `container-wide`) | |
| base.scss // This is the *only* place you can style tagnames. More of a reset thing than a style thing. | |
| variables.scss // A place for shared variables. e.g. colors, font sets($body-font, $header-font), and layout values ($header-height) | |
| layers.scss // Variables used for z-index properties. e.g. $header-layer, $modal-layer, $alert-layer |
| ### ids | |
| Noooooooooooooooo | |
| ### tag / element | |
| Only in `base.scss` for resets. Sometimes one must break this rule in order to win specificty fights on form fields. | |
| ### class | |
| Use this 98% of the time. | |
| ### child (>) |
This is a handful of Sass mixins that get you everything you need from a CSS grid framework while minimizing dependencies, overrides, and complexity.
Use it if you want, but my point is that many projects don't need anything as complex as Bootstrap or Neat. Don't assume you need a framework at all.
| var modules = Array.from(document.querySelectorAll('.module')); | |
| console.log( | |
| modules | |
| .map(el => ({ downloads: el.querySelector('.downloads').innerText, name: el.querySelector('.name').innerText })) | |
| .sort((moduleA, moduleB) => { | |
| const nameA = moduleA.name.toUpperCase(); | |
| const nameB = moduleB.name.toUpperCase(); | |
| if (nameA < nameB) { | |
| return -1; | |
| } |