@springernature/springer-context

Springer Context

Set the context for Springer branded products.

• Global Context
• Favicons

Global Context

This package inherits from the global-context package, which details everything that is included with springer-context. This README will detail anything that is added for this specific brand.

Responsive Font Sizes

This package has a third party dependency on Responsive Font Size (RFS). This is a peer dependency and must be imported, alongside the default RFS settings before the global context. For example:

@import '../../../node_modules/@springernature/springer-context/scss/10-settings/rfs';
@import '../../../node_modules/rfs/scss';
@import '../../../node_modules/@springernature/springer-context/scss/enhanced';

// 10 Settings
// 20 Functions
// etc

Favicons

Favicon image files are provided in the img/favicons folder, and should be copied to your assets folder as part of your build process. Then add HTML depending on your asset location. A template is provided below:

<link rel="apple-touch-icon" sizes="180x180" href="/path-to-your-app-assets/images/favicons/springer-or-bmc/apple-touch-icon.png"}}>
<link rel="icon" type="image/png" sizes="32x32" href="/path-to-your-app-assets/images/favicons/springer-or-bmc/favicon-32x32.png"}}>
<link rel="icon" type="image/png" sizes="16x16" href="/path-to-your-app-assets/images/favicons/springer-or-bmc/favicon-16x16.png"}}>
<link rel="manifest" href="/path-to-your-app-assets/manifest.json"}}>
<link rel="mask-icon" href="/path-to-your-app-assets/images/favicons/springer-or-bmc/safari-pinned-tab.svg"}} color="#000000">
<link rel="shortcut icon" href="/path-to-your-app-assets/images/favicons/springer-or-bmc/favicon.ico"}}>
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="/path-to-your-app-assets/browserconfig.xml"}}>
<meta name="theme-color" content="#000000">

Example manifest.json

{
    "name": "Your Site",
    "short_name": "",
    "icons": [
        {
            "src": "/path-to-your-app-assets/images/favicons/springer-or-bmc/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/path-to-your-app-assets/static/images/favicons/springer-or-bmc/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#000000",
    "background_color": "#000000",
    "display": "standalone"
}

Example browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/path-to-your-app-assets/images/favicons/springer-or-bmc/mstile-150x150.png"/>
            <TileColor>#000000</TileColor>
        </tile>
    </msapplication>
</browserconfig>

License

MIT License 2020, Springer Nature