Bootstrap Italia

Read this in other languages: Italiano.

Bootstrap Italia is a Bootstrap 4 theme to create responsive web apps to make Italian public digital services consistent, accessible and simple to use.

Bootstrap Italia inherits components, mixins, grid system, and anything else from Bootstrap 4, customising them accordingly to the Italian guidelines for designing public digital services.

Check out the documentation » (in italian)

or

Download the latest version of the library »

Indice

• Getting started
• Issues and requests
• How to contribute
• Third-party licenses

Getting started

To start playing with Bootstrap Italia, you can unzip the library and add the files to your project, as described here (automatic translation by Google Translate).

Issues and requests

Found a bug or asking for help?

First of all, please ensure you're trying to tackle a problem with the Bootstrap Italia theme and not with the Bootstrap library itself (in that case you can refer directly to Bootstrap repository), then
you can create an issue.

How to contribute

Would you like to help with Bootstrap Italia? You are in the right place!

If you have not already done so, start by spending a few minutes to deepen your knowledge on design guidelines for Italian public digital services (in italian), and refer to the instructions on how to contribute to Bootstrap Italia (in italian).

At this point, you'll need to configure the local environment to compile the source files and generate them
of the documentation. You can find all the information necessary for this purpose at the page related to the compilation tools (automatic translation by Google Translate).

Third-party licenses

Components distributed by Bootstrap Italia

Software components distributed with Bootstrap Italia that have their own different license from CC0 are listed below.

• jQuery © jQuery Foundation, MIT
• Popper.js © Federico Zivolo and contributors, MIT
• Bootstrap 4 © Twitter, Inc., MIT
• Bootstrap Select © SnapAppointments, LLC, MIT
• Owl Carousel 2 © Owl (David Deutsch), MIT
• jQuery Easing © George McGinley Smith, BSD

Main dependencies for the compilation and development phase

• Jekyll, © Tom Preston-Werner and Jekyll contributors, licenza MIT
• HTML-proofer, © Garen Torikian, licenza MIT
• Browser Sync Apache License Version 2.0
• conventional-changelog © conventional-changelog team, ISC License
• GulpJS, © Blaine Bublitz, Eric Schoffstall and other contributors, licenza MIT
• Babel, © Sebastian McKenzie, licenza MIT
• Prettier, © James Long and contributors, licenza MIT
• node-sass, © Andrew Nesbitt, licenza MIT
• Octokit rest.js © 2012 Cloud9 IDE, Inc. (Mike de Boer), 2017-2018 Octokit contributors, licenza MIT

Bootstrap Italia is BSD 3-Clause licensed:

We are using BrowserStack for interactive cross browser testing. They are sponsoring our open source project!

Simple yet flexible JavaScript charting for designers & developers

Documentation

• Introduction
• Getting Started
• General
• Configuration
• Charts
• Axes
• Developers
• Popular Extensions
• Samples

Contributing

Instructions on building and testing Chart.js can be found in the documentation. Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support, please post questions on Stack Overflow with the chartjs tag.

License

Chart.js is available under the MIT license.

React Router Config

Static route configuration helpers for React Router.

This is alpha software, it needs:

1. Realistic server rendering example with data preloading
2. Pending navigation example

Installation

Using npm:

$ npm install --save react-router-config

Then with a module bundler like webpack, use as you would anything else:

// using an ES6 transpiler, like babel
import { matchRoutes, renderRoutes } from "react-router-config";

// not using an ES6 transpiler
var matchRoutes = require("react-router-config").matchRoutes;

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-router-config/umd/react-router-config.min.js"></script>

You can find the library on window.ReactRouterConfig

Motivation

With the introduction of React Router v4, there is no longer a centralized route configuration. There are some use-cases where it is valuable to know about all the app's potential routes such as:

• Loading data on the server or in the lifecycle before rendering the next screen
• Linking to routes by name
• Static analysis

This project seeks to define a shared format for others to build patterns on top of.

Route Configuration Shape

Routes are objects with the same properties as a <Route> with a couple differences:

• the only render prop it accepts is component (no render or children)
• introduces the routes key for sub routes
• Consumers are free to add any additional props they'd like to a route, you can access props.route inside the component, this object is a reference to the object used to render and match.
• accepts key prop to prevent remounting component when transition was made from route with the same component and same key prop

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];

Note: Just like <Route>, relative paths are not (yet) supported. When it is supported there, it will be supported here.

API

matchRoutes(routes, pathname)

Returns an array of matched routes.

Parameters

• routes - the route configuration
• pathname - the pathname component of the url. This must be a decoded string representing the path.

import { matchRoutes } from "react-router-config";
const branch = matchRoutes(routes, "/child/23");
// using the routes shown earlier, this returns
// [
//   routes[0],
//   routes[0].routes[1]
// ]

Each item in the array contains two properties: routes and match.

• routes: A reference to the routes array used to match
• match: The match object that also gets passed to <Route> render methods.

branch[0].match.url;
branch[0].match.isExact;
// etc.

You can use this branch of routes to figure out what is going to be rendered before it actually is rendered. You could do something like this on the server before rendering, or in a lifecycle hook of a component that wraps your entire app

const loadBranchData = (location) => {
  const branch = matchRoutes(routes, location.pathname)

  const promises = branch.map(({ route, match }) => {
    return route.loadData
      ? route.loadData(match)
      : Promise.resolve(null)
  })

  return Promise.all(promises)
}

// useful on the server for preloading data
loadBranchData(req.url).then(data => {
  putTheDataSomewhereTheClientCanFindIt(data)
})

// also useful on the client for "pending navigation" where you
// load up all the data before rendering the next page when
// the url changes

// THIS IS JUST SOME THEORETICAL PSEUDO CODE :)
class PendingNavDataLoader extends Component {
  state = {
    previousLocation: null
  }

  componentWillReceiveProps(nextProps) {
    const navigated = nextProps.location !== this.props.location
    const { routes } = this.props

    if (navigated) {
      // save the location so we can render the old screen
      this.setState({
        previousLocation: this.props.location
      })

      // load data while the old screen remains
      loadNextData(routes, nextProps.location).then((data) => {
        putTheDataSomewhereRoutesCanFindIt(data)
        // clear previousLocation so the next screen renders
        this.setState({
          previousLocation: null
        })
      })
    }
  }

  render() {
    const { children, location } = this.props
    const { previousLocation } = this.state

    // use a controlled <Route> to trick all descendants into
    // rendering the old location
    return (
      <Route
        location={previousLocation || location}
        render={() => children}
      />
    )
  }
}

// wrap in withRouter
export default withRouter(PendingNavDataLoader)

/////////////
// somewhere at the top of your app
import routes from './routes'

<BrowserRouter>
  <PendingNavDataLoader routes={routes}>
    {renderRoutes(routes)}
  </PendingNavDataLoader>
</BrowserRouter>

Again, that's all pseudo-code. There are a lot of ways to do server rendering with data and pending navigation and we haven't settled on one. The point here is that matchRoutes gives you a chance to match statically outside of the render lifecycle. We'd like to make a demo app of this approach eventually.

renderRoutes(routes, extraProps = {}, switchProps = {})

In order to ensure that matching outside of render with matchRoutes and inside of render result in the same branch, you must use renderRoutes instead of <Route> inside your components. You can render a <Route> still, but know that it will not be accounted for in matchRoutes outside of render.

import { renderRoutes } from "react-router-config";

const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];

const Root = ({ route }) => (
  <div>
    <h1>Root</h1>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes)}
  </div>
);

const Home = ({ route }) => (
  <div>
    <h2>Home</h2>
  </div>
);

const Child = ({ route }) => (
  <div>
    <h2>Child</h2>
    {/* child routes won't render without this */}
    {renderRoutes(route.routes, { someProp: "these extra props are optional" })}
  </div>
);

const GrandChild = ({ someProp }) => (
  <div>
    <h3>Grand Child</h3>
    <div>{someProp}</div>
  </div>
);

ReactDOM.render(
  <BrowserRouter>
    {/* kick it all off with the root route */}
    {renderRoutes(routes)}
  </BrowserRouter>,
  document.getElementById("root")
);

react-router-dom

DOM bindings for React Router.

Installation

Using npm:

$ npm install --save react-router-dom

Then with a module bundler like webpack, use as you would anything else:

// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";

// using CommonJS modules
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

You can find the library on window.ReactRouterDOM.

Issues

If you find a bug, please file an issue on our issue tracker on GitHub.

Credits

React Router is built and maintained by React Training.

react-scripts

This package includes scripts and configuration used by Create React App.

Please refer to its documentation:

• Getting Started – How to create a new app.
• User Guide – How to develop apps bootstrapped with Create React App.

Installation

npm install --save @types/react

Summary

This package contains type definitions for React (http://facebook.github.io/react/).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react

Additional Details

• Last updated: Wed, 03 Jul 2019 16:58:51 GMT
• Dependencies: @types/csstype, @types/prop-types
• Global values: React

Credits

These definitions were written by Asana https://asana.com, AssureSign http://www.assuresign.com, Microsoft https://microsoft.com, John Reilly https://github.com/johnnyreilly, Benoit Benezech https://github.com/bbenezech, Patricio Zavolinsky https://github.com/pzavolinsky, Digiguru https://github.com/digiguru, Eric Anderson https://github.com/ericanderson, Dovydas Navickas https://github.com/DovydasNavickas, Stéphane Goetz https://github.com/onigoetz, Josh Rutherford https://github.com/theruther4d, Guilherme Hübner https://github.com/guilhermehubner, Ferdy Budhidharma https://github.com/ferdaber, Johann Rakotoharisoa https://github.com/jrakotoharisoa, Olivier Pascal https://github.com/pascaloliv, Martin Hochel https://github.com/hotell, Frank Li https://github.com/franklixuefei, Jessica Franco https://github.com/Jessidhia, Saransh Kataria https://github.com/saranshkataria, Kanitkorn Sujautra https://github.com/lukyth, and Sebastian Silbermann https://github.com/eps1lon.

@coreui/react v2 for CoreUI for React

• bootstrapped with nwb toolkit

npm run scripts

package.json is configured with "scripts" we can use with npm run while developing the project.

see also:

• Developing React Components and Libraries with nwb

Installation

npm install --save @types/react-dom

Summary

This package contains type definitions for React (react-dom) ( http://facebook.github.io/react/ ).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom

Additional Details

• Last updated: Thu, 11 Apr 2019 17:57:21 GMT
• Dependencies: @types/react
• Global values: ReactDOM, ReactDOMNodeStream, ReactDOMServer

Credits

These definitions were written by Asana https://asana.com, AssureSign http://www.assuresign.com, Microsoft https://microsoft.com, MartynasZilinskas https://github.com/MartynasZilinskas, Josh Rutherford https://github.com/theruther4d, Jessica Franco https://github.com/Jessidhia.

CoreUI Icons - Simply beautiful open source icons

An open source icon set with marks in SVG, webfont and raster formats. Ready-to-use fonts and stylesheets that work with your favorite frameworks..

Preview & Docs

https://coreui.io/icons/

Installation

CDN

<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/coreui-icons.min.css">

NPM

npm install @coreui/icons --save

Or, you can also clone or download this repository as zip.

Basic Use

You can place CoreUI Icons just about anywhere using a CSS style prefix and the icon’s name. CoreUI Icons are designed to be used with inline elements ex. <i> or <span>.

<i class="cui-energy"></i>

License

CoreUI Icons Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.

• Icons — CC BY 4.0 License
  • In the CoreUI Icons Free download, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types.
• Fonts — SIL OFL 1.1 License
  • In the CoreUI Icons Free download, the SIL OLF license applies to all icons packaged as web and desktop font files.
• Code — MIT License
  • In the CoreUI Icons Free download, the MIT license applies to all non-font and non-icon files.

Installation

npm install --save @types/reactstrap

Summary

This package contains type definitions for reactstrap ( https://github.com/reactstrap/reactstrap#readme ).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/reactstrap

Additional Details

• Last updated: Wed, 17 Apr 2019 23:10:51 GMT
• Dependencies: @types/react, @types/popper.js
• Global values: none

Credits

These definitions were written by Ali Hammad Baig https://github.com/alihammad, Marco Falkenberg https://github.com/mfal, Danilo Barros https://github.com/danilobjr, FaithForHumans https://github.com/FaithForHumans, Tim Chen https://github.com/timc13, Pat Gaffney https://github.com/patrickrgaffney, Prabodh Tiwari https://github.com/prabodht, Georg Steinmetz https://github.com/georg94, Kyle Tsang https://github.com/kyletsang.

ERROR: No README data found!

CoreUI - Free WebApp UI Kit built on top of Bootstrap 4

Please help us on Product Hunt and Designer News. Thanks in advance!

Curious why I decided to create CoreUI? Please read this article: Jack of all trades, master of none. Why Bootstrap Admin Templates suck.

CoreUI is an Open Source UI Kit built on top of Bootstrap 4. CoreUI is the fastest way to build modern dashboard for any platforms, browser or device. A complete Dashboard and WebApp UI Kit that allows you to quickly build eye-catching, high-quality, high-performance responsive applications using your framework of choice.

Table of Contents

• Templates
• Admin Templates built on top of CoreUI Pro
• Installation
• Usage
• What's included
• Documentation
• Contributing
• Versioning
• Creators
• Community
• License
• Support CoreUI Development

Templates

• CoreUI Free Bootstrap Admin Template
• 💪 CoreUI Pro Bootstrap Admin Template

Admin Templates built on top of CoreUI Pro

CoreUI Pro	Prime	Root	Alba	Leaf

Installation

Several options are available:

Clone repo

$ git clone https://github.com/coreui/coreui.git

NPM

$ npm install @coreui/coreui --save

Yarn

$ yarn add @coreui/coreui@2.1.12

Composer

$ composer require coreui/coreui:2.1.12

Usage

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="node_modules/@coreui/coreui/dist/css/coreui.min.css">

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, Bootstrap and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, then Bootstrap, and then our JavaScript plugins.

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/@coreui/coreui/dist/js/coreui.min.js"></script>

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

coreui/
├── build/
├── dist/
├── js/
└── scss/

Documentation

The documentation for the CoreUI Free Bootstrap Admin Template is hosted at our website CoreUI

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility,CoreUI Free Admin Template is maintained under the Semantic Versioning guidelines.

See the Releases section of our project for changelogs for each release version.

Creators

Łukasz Holeczek

• https://twitter.com/lukaszholeczek
• https://github.com/mrholek

Andrzej Kopański

• https://github.com/xidedix

Community

Get updates on CoreUI's development and chat with the project maintainers and community members.

• Follow @core_ui on Twitter.
• Read and subscribe to CoreUI Blog.

Copyright and license

copyright 2018 creativeLabs Łukasz Holeczek. Code released under the MIT license.
There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.

Support CoreUI Development

CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on PayPal, buying CoreUI Pro Version or buying one of our premium admin templates.

As of now I am exploring the possibility of working on CoreUI fulltime - if you are a business that is building core products using CoreUI, I am also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on Twitter.

A pure JavaScript implementation of Sass. Sass makes CSS fun again.

This package is a distribution of Dart Sass, compiled to pure JavaScript
with no native code or external dependencies. It provides a command-line sass
executable and a Node.js API.

• Usage
• API
• See Also
• Behavioral Differences from Ruby Sass

Usage

You can install Sass globally using npm install -g sass which will provide
access to the sass executable. You can also add it to your project using
npm install --save-dev sass. This provides the executable as well as a
library:

var sass = require('sass');

sass.render({file: scss_filename}, function(err, result) { /* ... */ });

// OR

var result = sass.renderSync({file: scss_filename});

See below for details on Dart Sass's JavaScript API.

API

When installed via npm, Dart Sass supports a JavaScript API that's fully
compatible with Node Sass (with a few exceptions listed below), with support
for both the render() and renderSync() functions. See the Sass
website for full API documentation!

Note however that by default, renderSync() is more than twice as fast as
render() due to the overhead of asynchronous callbacks. To avoid this
performance hit, render() can use the fibers package to call
asynchronous importers from the synchronous code path. To enable this, pass the
Fiber class to the fiber option:

var sass = require("sass");
var Fiber = require("fibers");

sass.render({
  file: "input.scss",
  importer: function(url, prev, done) {
    // ...
  },
  fiber: Fiber
}, function(err, result) {
  // ...
});

Both render() and renderSync() support the following options:

• data
• file
• functions
• importer
• includePaths
• indentType
• indentWidth
• indentedSyntax
• linefeed
• omitSourceMapUrl
• outFile
• sourceMapContents
• sourceMapEmbed
• sourceMapRoot
• sourceMap
• Only the "expanded" and "compressed" values of
  outputStyle are supported.

No support is intended for the following options:

• precision. Dart Sass defaults
  to a sufficiently high precision for all existing browsers, and making this
  customizable would make the code substantially less efficient.

• sourceComments. Source
  maps are the recommended way of locating the origin of generated selectors.

See Also

• Dart Sass, from which this package is compiled, can be used either as a
  stand-alone executable or as a Dart library. Running Dart Sass on the Dart VM
  is substantially faster than running the pure JavaScript version, so this may
  be appropriate for performance-sensitive applications. The Dart API is also
  (currently) more user-friendly than the JavaScript API. See
  the Dart Sass README for details on how to use it.

• Node Sass, which is a wrapper around LibSass, the C++ implementation
  of Sass. Node Sass supports the same API as this package and is also faster
  (although it's usually a little slower than Dart Sass). However, it requires a
  native library which may be difficult to install, and it's generally slower to
  add features and fix bugs.

Behavioral Differences from Ruby Sass

There are a few intentional behavioral differences between Dart Sass and Ruby
Sass. These are generally places where Ruby Sass has an undesired behavior, and
it's substantially easier to implement the correct behavior than it would be to
implement compatible behavior. These should all have tracking bugs against Ruby
Sass to update the reference behavior.

1. @extend only accepts simple selectors, as does the second argument of
   selector-extend(). See issue 1599.

2. Subject selectors are not supported. See issue 1126.

3. Pseudo selector arguments are parsed as <declaration-value>s rather than
   having a more limited custom parsing. See issue 2120.

4. The numeric precision is set to 10. See issue 1122.

5. The indented syntax parser is more flexible: it doesn't require consistent
   indentation across the whole document. See issue 2176.

6. Colors do not support channel-by-channel arithmetic. See issue 2144.

7. Unitless numbers aren't == to unit numbers with the same value. In
   addition, map keys follow the same logic as ==-equality. See
   issue 1496.

8. rgba() and hsla() alpha values with percentage units are interpreted as
   percentages. Other units are forbidden. See issue 1525.

9. Too many variable arguments passed to a function is an error. See
   issue 1408.

10. Allow @extend to reach outside a media query if there's an identical
    @extend defined outside that query. This isn't tracked explicitly, because
    it'll be irrelevant when issue 1050 is fixed.

11. Some selector pseudos containing placeholder selectors will be compiled
    where they wouldn't be in Ruby Sass. This better matches the semantics of
    the selectors in question, and is more efficient. See issue 2228.

12. The old-style :property value syntax is not supported in the indented
    syntax. See issue 2245.

13. The reference combinator is not supported. See issue 303.

14. Universal selector unification is symmetrical. See issue 2247.

15. @extend doesn't produce an error if it matches but fails to unify. See
    issue 2250.

16. Dart Sass currently only supports UTF-8 documents. We'd like to support
    more, but Dart currently doesn't support them. See dart-lang/sdk#11744,
    for example.

Disclaimer: this is not an official Google product.