Shell CSS lib - Script Codes

Developer

Size

43,289 Kb

Views

30,360

Shell CSS lib Previews
Shell CSS lib HTML Codes
Shell CSS lib CSS Codes

How do I make an shell css lib?

This contains the Campaign Monitor Shell CSS library as a Pen so that its functions and variables can be pulled into other Pens and used :). What is a shell css lib? How do you make a shell css lib? This script and codes were developed by Dave on 17 September 2022, Saturday.

Shell CSS lib - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shell CSS lib</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

Shell CSS lib - Script Codes CSS Codes

@charset "UTF-8";
/** * Shell CSS library by Campaign Monitor. * http://shellcss.io * Licensed under MIT (). */
/** * Settings. */
/* ============================================================================ SETTINGS ========================================================================= */
/** * All of Shell's settings (Sass variables). * * The settings are broken into two categories: * * - "Global".....settings for the entire library. * - "Local"......settings for a particular partial. * * N.B. usually "Local" settings exist in their relevant partial but we combine * them for Shell to make them easier to override. It's easier as you can * override all of the settings in the one place—typically in a * "_settings.scss" partial—compared to overriding "Local" settings above * their relevant partial within the master stylesheet, like so: * $shell-apply-osx-font-smoothing: true; $shell-apply-link-transition: false; @import "[library/path]/base"; $shell-grid-gutter: 24; @import "[library/path]/grid"; * * The above set up is more cumbersome to maintain due to "Local" settings * being dispersed throughout the master stylesheet plus the master stylesheet * should only contain Sass partial imports. * * Having all settings together in the same Sass partial makes life easier for * consumers of Shell. * * ---------------------------------------------------------------------------- * * All settings start with a global namespace: `$shell` followed by one * hyphen, like this: * $shell- * * "Global" settings include a letter "g" to easily identify them, like so: * $shell-g- * * "Local" settings include the name of its section to easily identify them, so * settings for the "Base" and "Grid" sections would be formatted like this: * $shell-base- $shell-grid- * * The `$shell` namespace prevents your project settings and Shell's settings * from clashing with each other, and allows you to easily see what is * coming from Shell and what isn't. * * ---------------------------------------------------------------------------- * * CONTENTS: * * 1. Base number (Global) * 2. Colours (Global) * 3. Typography (Global) * 4. Spacing (Global) * 5. Cosmetics (Global) * 6. Breakpoints (Global) * 7. Z-Index system (Global) * 8. HiDPI units (Global) * 9. HTML textual `input`s (Global) * 10. Base (Local) * 11. Container (Local) * 12. Grid (Local) * 13. Helpers (Local) */
/* 1. Base number (Global) ========================================================================= */
/** * The baseline number from which everything else is derived. */
/* 2. Colours (Global) ========================================================================= */
/** * Black and white. */
/** * Base text. */
/** * Links. */
/* 3. Typography (Global) ========================================================================= */
/** * The scale based on `$shell-g-base-number` being 16: * * Decrease: 14, 13, 12 * Increase: 18, 24, 28, 32, 40, 48, 56, 72 */
/** * Line height. */
/** * Families. */
/** * Weights. */
/* 4. Spacing (Global) ========================================================================= */
/** * The scale based on `$shell-g-base-number` being 16: * * Decrease: 12, 8, 4 * Increase: 24, 32, 40, 48, 56, 72, 96 */
/* 5. Cosmetics (Global) ========================================================================= */
/* 6. Breakpoints (Global) ========================================================================= */
/** * The breakdown of the breakpoints is based off this chart: * http://static.lukew.com/unified_device_design.png * * Here's the thinking: * * - Palm..........smart-phones and feature phones—anything that can fit into * the palm of a hand. * - Lap...........typically tablets, notebooks and laptops—anything that is * portable that doesn't include phones. * - Lap small.....smaller tablets/notebooks and e-readers e.g. Kindle. * - Lap large.....larger tablets and laptops. * - Desk..........desktop computers, TVs, etc.—anything that isn't portable. * - Desk large....larger desktop computer monitors, TVs, and who knows what * else? * * The breakpoints: * * - Palm: 0–640px * - Lap: 641px + * - Lap small: 768px + * - Lap large: 901px + * - Desk: 1200px + * - Desk large: 1366px + * * @credit * http://www.lukew.com/ff/entry.asp?1679 */
/** * All the breakpoints divided by the default user-agent font-size setting * that is non-overridable by Shell's base font size setting: * `$shell-g-font-size`. We do this division as all viewport width and height * media queries are to be applied with the `em` unit. See: * http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/. * * N.B. if you wish to override any of the breakpoints then don't forget to * apply this calculation: * ([breakpoint-value] / 16) * 1em * * N.B. as we're using a Sass map we need to use a Sass function to make it * easier to apply the map keys, the function lives in * "Mixins/Functions -> Retrieve from maps". */
/** * The setting used for the default breakpoint applied to the * "Mixins/Functions -> Apply at breakpoints" mixin. */
/* 7. Z-Index system (Global) ========================================================================= */
/** * A nice system that uses Sass maps to keep your project `z-index`s * maintainable, sane, and free of those crazy `z-index: 99999;` occurrences! * * Be sure to read this to fully understand how the system works: * http://www.sitepoint.com/better-solution-managing-z-index-sass/ * * Shell kicks it off by providing a standard stacking order that most projects * would require, you can then update the Sass map in your project "Settings" * partial, be sure to use nested maps to make this system aware of stacking * contexts as having a flat map will soon become a headache to maintain. * * Applying `z-index`s with this system is done like this: * .c-header { z-index: z(header); } * * And for nested stacking contexts (defined via a nested map): * .c-dialog__close-button { z-index: z(dialog-elements, close-button); } * * N.B. as we're using a Sass map (and nested maps) we need to use a Sass * function to make it easier to apply the map keys and to be able to * retrieve nested map keys. The function lives in * "Mixins/Functions -> Retrieve from maps". * * @credit * http://www.sitepoint.com/better-solution-managing-z-index-sass/ */
/** * Starting from highest to lowest: *         */
/* 8. HiDPI units (Global) ========================================================================= */
/** * HiDPI units, currently being used in: * "Mixins/Functions -> HiDPI background images". * * N.B. non-over-ridable. */
/* 9. HTML textual `input`s (Global) ========================================================================= */
/* 10. Base (Local) ========================================================================= */
/** * Booleans. */
/** * Root element. */
/** * Links. */
/** * Horizontal rule. */
/** * Forms. */
/* 11. Container (Local) ========================================================================= */
/** * Booleans. */
/** * Widths. */
/** * Gutter size. */
/* 12. Grid (Local) ========================================================================= */
/** * Grid column widths. */
/** * For all grid item widths turn on the ability to apply breakpoints via * boolean settings then define the breakpoints, see: "Mixins/Functions -> * Apply at breakpoints" to understand how this works. */
/* 13. Helpers (Local) ========================================================================= */
/** * For certain "Helpers" turn on the ability to apply breakpoints via boolean * settings then define the breakpoints, see: "Mixins/Functions -> * Apply at breakpoints" to understand how this works. */
/** * Text sizes. */
/** * Base. */
/** * Decrease from base. */
/** * Increase from base. */
/** * Alignments. */
/** * Text truncate. */
/** * Hide. */
/** * Spacing. */
/** * Base. */
/** * Decrease from base. */
/** * Increase from base. */
/** * Mixins/Functions. */
/* ============================================================================ MIXINS AND FUNCTIONS ========================================================================= */
/** * All of Shell's mixins and functions. * * N.B. all mixins and functions to be written in SassDoc documentation system, * see: http://sassdoc.com/. * * ---------------------------------------------------------------------------- * * CONTENTS: * * 1. Private mixins and functions * 2. HiDPI background images (Mixin) * 3. Convert pixels to `rem`s or `em`s (Function) * 4. Apply at breakpoints (Mixin) * 5. Retrieve from maps (Function) * 6. Helpers (Mixin) */
/* 1. Private mixins and functions ========================================================================= */
/** * Shell-only mixins and functions, not for Shell consumers although some can * be used if the need arises. */
/* 2. HiDPI background images (Mixin) ========================================================================= */
/* 3. Convert pixels to `rem`s or `em`s (Function) ========================================================================= */
/* 4. Apply at breakpoints ========================================================================= */
/** * This mixin makes it really easy for a Shell consumer to apply certain parts * of Shell at any width based breakpoint(s). * * N.B. the mixin does not support height based breakpoints or breakpoint * ranges. * * The mixin can also be used outside of Shell in project styles but its main * purpose is to allow Shell consumers to easily apply certain parts of Shell * at any breakpoint(s), mainly the "Grid". * * The mixin will accept any of the named breakpoints set in "Settings -> * Breakpoints" (which can be renamed and breakpoints redefined in your * project) or any number (the pixel amount of the viewport). The breakpoints * get converted to the `em` unit which is best practice in Responsive Web * Design. You can also specify if you want a minimum or maximum width media * query by passing in the "min" or "max" labels after you define your * breakpoint, the default is minimum width media queries to favour the * "Mobile-first" approach. * * Using this mixin requires you to "opt in" as Shell doesn't want to assume * all of its consumers are building responsive UI's requiring the CSS this * mixin generates. Opting in requires changing the relevant Boolean settings * found in: "Settings". For example if you wanted the "Hide Visually" Helper * to use this mixin you change its Boolean setting: * `$shell-helper-hide-visually-apply-at-breakpoints` to `true` then define * the breakpoints you need via its other setting: * `$shell-helper-hide-visually-define-breakpoints`. So in the "Shell * Overrides" section of your project "Settings" you will have something like * this, depending on what breakpoints you choose: * $shell-helper-hide-visually-apply-at-breakpoints: true; $shell-helper-hide-visually-define-breakpoints: (400 max, lap, desk); * * You define your breakpoints in a comma separated list enclosed in curly * brackets with the "min" or "max" labels always coming *after* the * breakpoint. If you want ALL of the named breakpoints defined here: * "Settings -> Breakpoints" then you can simply pass in the word "all", like * so: * $shell-helper-hide-visually-define-breakpoints: (all); * * Right now the mixin only allows "all" by itself i.e. you cannot add numbers * (non-named breakpoints), so doing this will not work: * $shell-helper-hide-visually-define-breakpoints: (all, 900); * * Shell has a global breakpoint setting set in "Settings -> Breakpoints" so * that you can easily share breakpoints across everything that uses the * mixin. By default Shell doesn't apply any breakpoints to this setting, this * is for the Shell consumer to apply if they need the ability for shared * global breakpoints. So in the "Shell Overrides" section of your project * "Settings" you could do this: * $shell-g-global-breakpoints: (lap, desk); */
/* 5. Retrieve from maps ========================================================================= */
/** * An easier way to apply keys from the Shell maps defined in "Settings" * instead of using the native `map-get` function which can get tedious to * type again and again. * * For example, if you wanted to apply a key from the "Z-Index system" map * using the native `map-get` function you would have to do it like this: * z-index: map-get($shell-g-z-layers, header); * * And when applying nested map keys, this: * z-index: map-get(map-get($shell-g-z-layers, modal-elements), close-button); * * Instead we can apply it in a much nicer way: * z-index: z(header); * * And for a nested map key: * z-index: z(modal-elements, close-button); */
/* 6. Helpers ========================================================================= */
/** * Here are all the Helper mixins, see the Helpers intro comment block for * more information. */
/** * Normalise/Reset. */
/* ============================================================================ NORMALISE AND RESET ========================================================================= */
/** * Let's get all browsers rendering all elements more consistently and in line * with modern standards, and let's nuke certain user-agent styles so that * everything is on an even playing field. * * We can also be a bit opinionated about CM specific style treatments. * * N.B. we should be keeping an eye on the normalize.css repo especially the * Issues: https://github.com/necolas/normalize.css/issues/. * * @credit * https://necolas.github.io/normalize.css/ * * ---------------------------------------------------------------------------- * * CONTENTS: * * 1. Root element and global resets * 2. Block-level elements * 3. Inline elements * 4. Embedded, image, and multimedia, elements * 5. Form elements * 6. Interactions */
/* 1. Root element and global resets ========================================================================= */
/** * 1. Reset the `box-sizing` property to the more friendly `border-box` value. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */
html { box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
*,
*::before,
*::after { box-sizing: inherit;
}
/** * Remove all margins, paddings, and borders. * * N.B. do not include the following elements: * - `` * - `