Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Start applying basic bulma styling #22

Closed
marcus-grant opened this issue May 28, 2018 · 4 comments
Closed

Start applying basic bulma styling #22

marcus-grant opened this issue May 28, 2018 · 4 comments
Assignees
@marcus-grant
Labels
enhancement New feature or request

Comments

@marcus-grant
Copy link
Owner

Now that bulma has been applied, start applying some initial styling using its SASS classes.
@marcus-grant marcus-grant added the enhancement New feature or request label May 28, 2018
@marcus-grant marcus-grant self-assigned this May 28, 2018
marcus-grant added a commit that referenced this issue May 29, 2018
@marcus-grant
[#22] inital work on applying bulma ui kit
1454f29
marcus-grant added a commit that referenced this issue May 29, 2018
@marcus-grant
[#22] inital work on applying bulma ui kit
7f5195c 
* Refactor stylesheet files and directories
    * `src/styles/main.scss`
        * main stylesheet that composes index
    * `src/layouts/index.scss`
        * simply imports `main.scss`
    * `src/layouts/template-wrapper.scss`
        * seperated from index to contain...
        ...only relevant templatewrapper stuff
    * `src/styles/bulma.scss`
        * The composer for all bulma ui styles
* index layout now only imports main and templatewrapper
@marcus-grant
Copy link
Owner Author

From

Posting my solution to this for others:

Install gatsby-plugin-sass (see here)
Create layouts/index.scss (see here)
$variable-columns: false;
@import "~bulma/bulma";
Import index.scss in layouts/index.js

@marcus-grant
Copy link
Owner Author

There's a potential solution here gatsbyjs/gatsby#2354

@marcus-grant
Copy link
Owner Author

After commit e7103c1, bulma has been applied to the index.scss file and thus the root react node and it shows with better typography by default. When it comes to customizing and properly importing the stylesheet from the node_modules in outside components things get a bit more complicated. Try following some of these suggestions to solve this problem.

marcus-grant added a commit that referenced this issue May 30, 2018
@marcus-grant
[#22] initial bulma integration
3c670a4 
* Bulma has been included
* src/styles/bulma-composed:
  * for now, the place where composition of bulma styles occurs
  * imports all bulma modules
  * customizes specific styles to my preferences
* Sidebar is now testing bulma columns
* TemplateWrapper is now including it so it should be globally...
...applied to bulma's element defaults.
@marcus-grant
Copy link
Owner Author

Bulma has been integrated in 3c670a4 . There are some basic redefinitions of variables, particularly color within the composed-bulma.scss file. This is largely intended to have all of the most common classes and selector definitions to style the site has a whole. Those are all combined with the index.scss which creates the root style. Further integrations with bulma will be under more specific issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@marcus-grant marcus-grant

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@marcus-grant