Skip to content

Commit

Permalink
Prettified Code!
Browse files Browse the repository at this point in the history
  • Loading branch information
rawilk authored and actions-user committed Mar 30, 2021
1 parent 248da7a commit 4c6c0f9
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 7 deletions.
14 changes: 8 additions & 6 deletions docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,12 @@ php artisan fc:publish --views
You have a couple options for how you can use the UI components' CSS, depending on you and your project's needs:

### Using Laravel Mix or Webpack with CSS-Loader

You can import the built CSS in your own CSS files using `@import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.css';`.
This is assuming your stylesheet is located in the `./resources/css/` directory of your project.

### Directly in Blade/HTML

You could copy the built CSS from `vendor/rawilk/laravel-components/resources/js/laravel-form-components-styles/dist/styles.css` into your public folder, and then use a `link` tag in your blade/html to get it: `<link rel="stylesheet" href="{{ asset('css/laravel-form-components.css') }}">`.

If you would like to customize the CSS we provide, head over to [the section on Customizing CSS](/docs/laravel-form-components/v4/advanced-usage/customizing-css).
Expand Down Expand Up @@ -120,10 +122,10 @@ npm install -D alpinejs @popperjs/core filepond flatpickr
In your JavaScript, add the following lines to pull each of the external dependencies you previously installed in:

```js
import 'alpinejs';
import flatpickr from 'flatpickr';
import * as FilePond from 'filepond';
import { createPopper } from '@popperjs/core';
import "alpinejs";
import flatpickr from "flatpickr";
import * as FilePond from "filepond";
import { createPopper } from "@popperjs/core";

window.flatpickr = flatpickr;
window.FilePond = FilePond;
Expand All @@ -136,8 +138,8 @@ Some of the dependencies this package has also have their own styling they provi

```css
/* app.css */
@import 'filepond/dist/filepond.min.css';
@import 'flatpickr/dist/flatpickr.min.css';
@import "filepond/dist/filepond.min.css";
@import "flatpickr/dist/flatpickr.min.css";
```

> {note} Be sure to include these styles **above** the styles for this package so any overrides this package uses for the dependencies gets applied correctly.
Expand Down
3 changes: 2 additions & 1 deletion docs/upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Version 4 introduced some breaking changes, which are outlined below:

### Styling

In v4, laravel-form-components is now inlining a lot of the class names for form components instead of using `@apply` in a stylesheet with a custom class name. For backwards compatibility, the custom class names are still included with each component to prevent breaking any style overrides you may have written.
In v4, laravel-form-components is now inlining a lot of the class names for form components instead of using `@apply` in a stylesheet with a custom class name. For backwards compatibility, the custom class names are still included with each component to prevent breaking any style overrides you may have written.

Another major change with the styling is laravel-form-components now uses a single `.css` stylesheet for any complex styles required instead of using `.sass` stylesheets. This will allow the usage of postcss and/or tailwind's JIT compiler in your projects with these styles. If you're still using SASS, you should still be able to pull the styles in as you were before; you'll just need to update the path to the stylesheet.

Expand All @@ -18,6 +18,7 @@ In addition, we have stopped using the `primary` and `danger` variant names in f
For more info on styling, please see [the Customizing CSS section](/docs/laravel-form-components/advanced-usage/customizing-css).

### Added Dependencies

Some components, such as the `custom-select` component, have a dependency on `Popper.js` now for positioning the menu. This will require you to ensure that dependency is installed in your project. If you customized the package's configuration file, you should make sure you pull in any updates to the configuration as well.

See [the custom select docs](/docs/laravel-form-components/v4/selects/custom-select#installation) for more information.
Expand Down

0 comments on commit 4c6c0f9

Please sign in to comment.