alexadark / frontity-starter-theme Goto Github PK

When focusing on the mobileMenu component, the border is a different color then the one that you have for the other focuses. You can see the green color on the image below.

It appears to me the issue is due to the fact that the Button component in mobileMenu.js is not from Theme-UI but from Grommet, which has it's own styling.

To fix it, I added this code to it's own file and then imported the component to the mobileMenu.js file.

const myTheme = {
  global: {
    focus: {
        border: {
            color: 'lightGrey',
        },
    },
  },
};

export default myTheme;

I then added

<Grommet theme={myTheme}>

to add the styling into the mobileMenu.js

I also had to change the import from grommet to this:

import { Layer, Button, Grommet } from "grommet";

There may be a more efficient manner of doing this, or you may have meant to use the green color, but I assume not as all other focus on the website is white/grey or dark grey/black. Also, I have hard coded the color, when you may want to have that synced with the rest of your styling from Theme-UI.

Hope this helps, this is my first time doing this...

Hi Alex,

When i try to run npx frontity dev i get this error
`
Error: ./packages/frontity-starter-theme/src/components/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/dejangeorgiev/Code/frontity-theme-ui-tailwindcss/packages/frontity-starter-theme/src/components/index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

1 | /** @jsx jsx */
| ^
2 | import { jsx, Flex, ThemeProvider } from "theme-ui";
3 | import theme from "../theme-ui";
4 | import { Global, connect, Head } from "frontity";`

Could you please assist?

Thanks a lot.

As you know, a font is embedded in Frontity's HTML if the font is smaller than 25Kbs.

Embedding fonts is great because you avoid an additional round trip to the server and the flash of unstyled content problem.

But when embedding fonts, I don' think that including both woff and woff2 formats is the best approach, because you're doubling the Kbs of your fonts just to support a 2% more of browsers (IE11 and Android<4).

• https://caniuse.com/#search=woff
• https://caniuse.com/#search=woff2

In my opinion, it's best to choose woff2 because it is smaller and you're only leaving IE11 and old Android devices behind. It doesn't mean of course that those devices won't see the page, just that they will see it with a default font, so it's not critical.

In the case that you want to support those devices, I would choose woff, but never both.

If you switch to text logo, it doesn't show up:

The package react-icons is adding 624Kb to the whole bundle:

As you can see, it is almost as big as the rest of the app, react included.

You can see it yourself by inspecting the build/analyze/module-production.html file after running npx frontity dev --production. Don't forget the --production flag.

Normally, you can avoid this problem:

• Using modules with tree-shaking support. They have sideEffects: false in their package jsons: https://webpack.js.org/guides/tree-shaking/
• Picking directly the file from the bundle, like what we do for react-spinners in mars-theme:

import Loader from "react-spinners/ScaleLoader";
// instead of
import { Loader } from "react-spinners";

https://github.com/frontity/frontity/blob/dev/packages/mars-theme/src/components/loading.js#L3

But in the case of react-icons, even though it uses "sideEffects": false, it is breaking it for the way it imports the ionicons internally. And also, for the weird way it imports those icons, there's no direct pick either, so this library should be avoided at all costs, at least the ionicons part.