frontity-starter-theme's People
Forkers
luisherranz ryanharrigan dimaminka recorsa zelal-dev hitesh97 fellyph supersaiyancurry farichello obedomm mehmetyildizdev martvonk84 billylighterfrontity-starter-theme's Issues
Mobilemenu Focus Border Different Color
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...
Error: pragma and pragmaFrag cannot be set when runtime is automatic.
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.
Choose between woff and woff2
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).
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.
Text logo not showing
Get rid of react-icons
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.