A front-end framework with Ingresse styles, using AngularJS 1.5.
(If you want, can use just the CSS)
_
There's two simple ways to use it.
_
Just download, extract the package and move files from dist to your app folder.
After, include files in your page.
...
<head>
...
<link rel="stylesheet" type="text/css"
href="/assets/aphrodite.css" />
<!-- OPTIONALS -->
<link rel="stylesheet" type="text/css"
href="/assets/aphrodite-font-family.css" />
<link rel="stylesheet" type="text/css"
href="/assets/aphrodite-icons.css" />
</head>
<body>
...
<!-- OPTIONAL: AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js">
</script>
...
<!-- OPTIONALS: Components and Services AngularJS based -->
<script type="text/javascript" src="/scripts/aphrodite-vendors.js">
</script>
<script type="text/javascript" src="/scripts/aphrodite.js">
</script>
</body>
..._
You can install with Bower in your App Project, but using GitHub repository as source:
bower install --save-dev https://github.com/ingresse/aphrodite.git
Include files in your App index file.
...
<head>
...
<link rel="stylesheet" type="text/css"
href="/bower_components/aphrodite/dist/assets/aphrodite.css" />
<!-- OPTIONALS -->
<link rel="stylesheet" type="text/css"
href="/bower_components/aphrodite/dist/assets/aphrodite-font-family.css" />
<link rel="stylesheet" type="text/css"
href="/bower_components/aphrodite/dist/assets/aphrodite-icons.css" />
</head>
<body>
...
<!-- OPTIONAL: AngularJS -->
<script type="text/javascript" src="/bower_components/angular/angular.js">
</script>
<!-- OPTIONALS: Components and Services AngularJS based -->
<script type="text/javascript" src="/bower_components/aphrodite/dist/scripts/aphrodite-vendors.js">
</script>
<script type="text/javascript" src="/bower_components/aphrodite/dist/scripts/aphrodite.js">
</script>
</body>
..._
You can debug Aphrodite locally in your project, for example, if you are running a project like embedstore, you can make adjustments to Aphrodite locally and see how it will behave in your embedstore project. To do this, you'll need to follow these steps:
- Have the project you are developing cloned, for example, the previously mentioned
embedstoreandAphrodite. - Run the
npm iandbower installcommands in theAphroditeproject directory. - Make the desired changes to
Aphrodite. - Run npm
run buildinAphrodite. - In the project where you need to check the changes to
Aphrodite, which in our example isembedstore, there is a directory with the installed components frombowercalledbower_components, andAphroditeis one of them. Access the directory ofAphrodite. - Replace the
distdirectory inside theAphroditedirectory withinbower_componentsin your project (which in our example isembedstore) with thedistgenerated in thebuildofAphrodite.
Following these steps, the changes made to
Aphroditelocally will be reflected in the project that is usingAphrodite. Remember that these changes will not persist because thebower_componentsfolder is ignored by git; this is only for local development environment.
- 3.x animate.css
- 1.6.4 angular-animate
- 2.10.1 angular-click-outside
- 1.0 angular-scroll
- 0.x angular-ui-utils
- 1.4.0 ngDialog
_
We try, but isn't the most complete and readeable documentation (yet).
CSS, Components and Services usage examples in our GitHub Page:
http://ingresse.github.io/aphrodite
_
The code is available under the MIT license.