Skip to content

Commit

Permalink
feat: switch to Sass for styles
Browse files Browse the repository at this point in the history
BREAKING CHANGE: Less files have been replaced with Sass versions
  • Loading branch information
cutterbl authored and jquense committed May 9, 2019
1 parent 5d9a16f commit 884bece
Show file tree
Hide file tree
Showing 27 changed files with 12,960 additions and 11,827 deletions.
22 changes: 11 additions & 11 deletions .size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
{
"./dist/react-big-calendar.js": {
"bundled": 561388,
"minified": 171351,
"gzipped": 50367
"bundled": 561648,
"minified": 171367,
"gzipped": 50382
},
"./dist/react-big-calendar.min.js": {
"bundled": 497725,
"minified": 152002,
"gzipped": 45855
"bundled": 497985,
"minified": 152018,
"gzipped": 45872
},
"dist/react-big-calendar.esm.js": {
"bundled": 169329,
"minified": 81452,
"gzipped": 20069,
"bundled": 169583,
"minified": 81478,
"gzipped": 20083,
"treeshaked": {
"rollup": {
"code": 62945,
"code": 62961,
"import_statements": 1466
},
"webpack": {
"code": 66463
"code": 66479
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions .storybook/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { rules } = require('webpack-atoms')
const { rules, loaders, plugins, stats } = require('webpack-atoms')

const browsers = ['last 2 versions', 'ie >= 10']

Expand All @@ -8,7 +8,7 @@ module.exports = function({ config }) {
rules.fonts(),
rules.images(),
rules.css(),
rules.less({ browsers }),
rules.sass({ browsers }),
]

return config
Expand Down
16 changes: 15 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Inspired by [Full Calendar](http://fullcalendar.io/).
`yarn add react-big-calendar` or `npm install --save react-big-calendar`

Include `react-big-calendar/lib/css/react-big-calendar.css` for styles, and make sure your calendar's container
element has a height, or the calendar won't be visible.
element has a height, or the calendar won't be visible. To provide your own custom styling, see the [Custom Styling](#custom-styling) topic.

## Starters

Expand Down Expand Up @@ -76,6 +76,20 @@ const MyCalendar = props => (
)
```

## Custom Styling

Out of the box you can include the compiled css files and be up and running. But, sometimes, you may want to style
Big Calendar to match your application styling. For this reason SASS files are included with Big Calendar.

```
@import 'react-big-calendar/lib/sass/styles';
@import 'react-big-calendar/addons/dragAndDrop/styles'; // if using DnD
```

SASS implementation provides a `variables` file containing color and sizing variables that you can
update to fit your application. _Note:_ Changing and/or overriding styles can cause rendering issues with your
Big Calendar. Carefully test each change accordingly.

## Join us on Reactiflux Discord

Join us on [Reactiflux Discord](https://discord.gg/uJsgpkC) community under the channel #react-big-calendar if you have any questions.
6 changes: 3 additions & 3 deletions examples/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import globalize from 'globalize'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.min.css'

import 'react-big-calendar/lib/less/styles.less'
import './styles.less'
import './prism.less'
import 'react-big-calendar/lib/sass/styles.scss'
import './styles.scss'
import './prism.scss'
import Card from './Card'
import ExampleControlSlot from './ExampleControlSlot'
import Basic from './demos/basic'
Expand Down
4 changes: 3 additions & 1 deletion examples/Intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ _yarn:_ `yarn add react-big-calendar`
_npm:_ `npm install --save react-big-calendar`

Styles can be found at: `react-big-calendar/lib/css/react-big-calendar.css`, and should be included on the page
with the calendar component. Also make sure that your calendar's container
with the calendar component. Alternatively, you can include the styles directly in your SASS build. See the [Custom Styling](https://github.com/intljusticemission/react-big-calendar/blob/master/README.md#custom-styling) section of the README file for more details.

Also make sure that your calendar's container
element has a height, or the calendar won't be visible (see why below).

Date internationalization and localization is **hard** and `react-big-calendar` doesn't even attempt to
Expand Down
Loading

0 comments on commit 884bece

Please sign in to comment.