theming.md

Edit on Github

Landing Page Book

@front10/landing-page-book is a kit of landing-page components to be share across the web.

Theming

Customize @front10/landing-page-book with our built-in Css variables for global style preferences for easy theming and component changes.

File structure

@fornt10/landing-page-book
└─ dist
    └─ components
       └─ Component-x
          └─ style.css
          └─ stylelegacy_browsers.css
          └─ style.scss
    └─ themes
       └─ default
          └─ index.css
          └─ index.legacy_browsers.css
          └─ index.scss
          └─ variables.scss

How use style

You have two ways of use our styles

1-Import all components in a theme:

import 'bootstrap/dist/css/bootstrap.min.css';
import '@front10/landing-page-book/dist/themes/default/index.css';

2-Import each component by separated:

import 'bootstrap/dist/css/bootstrap.min.css';
import '@front10/landing-page-book/dist/components/Button/style.css';

Default variables

Default variables are in each component's documents , in Theming variables section.

Override default variables

You can use components variables with default values. Ex:

import '@front10/landing-page-book/dist/components/Button/style.css';
import Button from '@front10/landing-page-book/dist/components/Button';

class MyComponent extends Component {
  render() {
    return <Button>Home</Button>;
  }
}

if you want create a theme for button, create a custom-theme.css with the following content and import it into your app:

--Button-borderRadius: 20px;
--Button-fontSize: 2rem;

import '@front10/landing-page-book/dist/components/Button/style.css';
import Button from '@front10/landing-page-book/dist/components/Button';
import './custom-theme.css';

class MyComponent extends Component {
  render() {
    return <Button>Home</Button>;
  }
}