Set different css styles for different components in vue-js project - css

I have a vue- project with the following src directory tree
├── assets
| └── moderator
| └── css /* css styling for pages and components for moderators, e.g. everything is coloured blue*/
| └── user
| └── css /* css styling for pages and components for users, e.g. everything is coloured orage*/
├── components
| └── moderator /* here are the .vue components for moderators' views */
| └── user /* here are the .vue components for users' views*/
├── main.js
├── router.js
└── vue.config.js
The app will have two types of users :
Moderators
Users
Each type must have its own styling, components for users must use css-styles from assets/user/css, while moderators' from assets/user/css.
If I use scoped import, styling doesn't propagate on external components like those of Bootstrap.
So my questions:
How to set different styling for respective components so that moderator will have everything in blue, and user - in orange?
Is it possible to set style programmatically depending on routes, defined in router?

When you use Style in VueJS the css will render through all components. To use style only in the current component you need to uae scoped. This far you have done right, BUT! Bootstrap and other libraries mostly use components to represent their features so scoped will not work... But there is still a way! You can use >>> before the css you want to work in child-components. >>>b-corousel {color=red;}

Related

Custom _app.js file for a single directory in Next js

I have a folder in my next js application called "articles", in which I'd like to have *.mdx files. MDX is a markdown parser that generates JSX.
I'd like the pages in the articles directory to be styled a certain way, so I want to create an _app.js file with those styles. However, I don't want to put this in my main _app.js, since these styles are only relevant to the articles directory.
Is there a way to override the app only within a certain directory?
You have the o create a Root component that every other component inside the articles directory will use, i.e.
pages
|- RootComponent.jsx
|- page1.jsx
|- page2.jsx
And then you wrap page1.jsx and page2.jsx with RootComponent

Styled-components organization [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I want to use styled-components in my app and I am wondering how to organize it.
Basically styled-components are assigned to specific component for reusability.
But what about styled-components which I would like to use many times in other components (for example animations components)?
Should I create a file where I will keep these 'global' styled-components and import it to many components?
Is it good practice?
This is what most of my big production applications built with styled-components look like:
src
├── App
│ ├── Header
│ │ ├── Logo.js
│ │ ├── Title.js
│ │ ├── Subtitle.js
│ │ └── index.js
│ └── Footer
│ ├── List.js
│ ├── ListItem.js
│ ├── Wrapper.js
│ └── index.js
├── shared
│ ├── Button.js
│ ├── Card.js
│ ├── InfiniteList.js
│ ├── EmojiPicker
│ └── Icons
└── index.js
The App folder contains all the specific components that make up your bigger application. (you might structure that by route in your real app) Each of those bigger components is a folder with an index.js file and a bunch of styled components in individual files.
While I'm building my application and I notice I need a styled component from one bigger component in another bigger component, I drag its file to the shared/ folder, update all the imports and that's it! Over time shared/ becomes an improptu pattern library with all of the components I want/need to reuse throughout my entire app.
Another way that's fairly common is to have style.js files in the component folders which contains all of the styled components of that component. The upside being that you have less files that get in your way, but with the downside that it's harder to notice duplication and moving components into the shared folder is more work.
I personally use the first version more often than not, but that's probably just a matter of taste—try them both and see which one you like more!
You can also try Atomic Design to structure your app. This way you will be able to reuse your styled components. Based on Atomic Design methodology, you organize your components into atoms, molecules, organisms, pages and templates.
Atom
An atom is native html tag. For example, an Input element can be an Atom
const Input = props => <input {...props} />
Molecules
Group of atoms is a molecule. For example:
const Field = ({ label, ...inputProps }) => (
<Label>
{label}
<Input {...inputProps} />
</Label>
)
Organisms
Organism is a group of atoms, molecules and/or other organisms. For example:
const Form = (props) => (
<form {...props}>
<Field label="Name" type="text" />
<Field label="Email" type="email" />
</form>
)
Pages
A page is where you will put mostly organisms. For example:
const HomePage = () => (
<PageTemplate header={<Header />}>
<Form />
</PageTemplate>
)
Templates
A template is a layout to be used on pages. For example:
const PageTemplate = ({ header, children }) => (
<main>
{header && <div>{header}</div>}
{children}
</main>
)
Github example
There is a React starter project on Github that uses Atomic Design methodology with styled-components integration. Here is the Link.
The way i am organizing my Project with styled-component is the following:
src
├── Layout
│ ├── Header
│ │ ├── Logo.jsx
│ │ ├── styled.js
│ │ ├── container.js
│ │ └── index.js
│ └── LeftPanel
│ ├── LeftPanel.jsx
│ ├── styled.js
│ └── index.js
└── index.js
Reasoning:
Each folder is a feature.
Each file within a folder have a responsability.
.jsx represent a presentational component.
styled.js are styled components. Manage only how components look. Also any theme related file should be imported here, such as colors,borderStyles, etc.
container.js If we are using any state management we should have an artifact connecting our components with that library. In this case Redux.
index.js exports whatever is relevant.
The advantage that i see with this approach is that is pretty clear where changes have to be made if you decide to use another CSSinJS library.
Hope it make sense for someone else.
Cheers!

Share QSS style with QWidget and QtQuick controls

Short version of question
How to apply defined in resource file QSS style to QWidget and QtQuick controls simultaneously?
Full version of question
There is some big project which is written using Qt. For customizing of appearance of controls is used Style Sheet defined in resource file. Now to the project added widget which use QtQuick control. By default control inherited from QWidget looks different with QtQuick controls. So question is: how to extend already existed StyleSheet on QtQuick controls with minimal changes of QtQuick code?
Example
Here is complete example for better describing of my question.
The project has following structure:
.
├── CMakeLists.txt
├── main.cpp
├── MainWidget.cpp
├── MainWidget.h
├── QtWidget.cpp
├── QtWidget.h
├── QuickWidget.cpp
├── QuickWidget.h
└── resources
├── resources.qrc
├── style.qss
└── widget.qml
MainWidget class defines (as expected) the main widget. At the begining MainWidget contains only one widget QtWidget which is inherited from QWidget. For customizing of appearance is used style sheet defined in resources/style.qss. Later QuickWidget class is added to the project. QuickWidget class v QtQuick control which is defined in file: resources/widget.qml. After building and launching application:
mkdir build
cd build
cmake ..
make
./qqcs
the following window will be displayed:
I'm using:
Qt 5.6;
KUbuntu 15.10;
Plasma Desctop.

The stylesheet broken when loading different layout in different controllers

Hi I got a strange problem.
When I clicked three pages shown in the following three images
Step 1
controller welcome
Step 2
other controllers
Step 3, go back to the step1 view
controller welcome
The last image,
when I back to controller welcome from the other controllers
,that is step 2 to step 3.
The stylesheets were cached by the browser,
The step 3's layout is differ to step1 layout.
But they are the same page,How could it be, it seems the browser caches the css files ?
I add two assets folder used by the two layouts, in application.rb
config.assets.paths << "#{Rails.root}/vendor/themes"
themes
├── ace-admin-theme
│   ├── avatars
│   ├── css
│   ├── font
│   ├── images
│   ├── img
│   └── js
└── lenord-single-page-theme
├── css
├── fonts
├── img
├── index.html
├── js
└── rs-assets
Added the welcome.html.haml under layouts folder, so that welcome_controller can load this layout
layouts
├── _header.html.haml
├── application.html.haml
└── welcome.html.haml
All the source code I put here https://gist.github.com/poc7667/0198b973fce0fbf4dd26
Page A : OK
Page B : OK
Page A : Failed, the Page B's stylesheets are cached, it should be identical to original page A
It didn't work when I comment the data-turbolinks-track for the css
The strange phenomenon still occurs.
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
## -2,7 +2,7 ##
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
/ Description, Keywords and Author
/ basic styles
diff --git a/app/views/layouts/welcome.html.haml b/app/views/layouts/welcome.html.haml
index 28d9c99..c3e6ec8 100644
--- a/app/views/layouts/welcome.html.haml
+++ b/app/views/layouts/welcome.html.haml
## -2,7 +2,7 ##
%html
%head
%title VIVOTEK DQA DEVELOPER
- = stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true
+ = stylesheet_link_tag "application", media: "all"
= javascript_include_tag "application", "data-turbolinks-track" => true
I open the firebug to see the included css files,
I found I need to reload the page to load the expected css files.
How to fix it ?
Update
When I reload page, the console showed those css files were loaded
Started GET "/assets/ace-admin-theme/css/bootstrap.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
Started GET "/assets/ace-admin-theme/css/font-awesome.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
When I click a hyperlink(by url helper) to other pages the css won't be load again.
But actually it should load the css files again, because some controllers use the different layout and assets.
But what's the worse is that if I click the link (generated by URLhelper) the problems happens
But if I go to the page by typing the URL on the browser manually, it works fine!!
To brief, the css files only load in the first time, and other necessary css files(for other layout) won't be load anymore.(If I view the page by clicking the URLHelperLink), but it works by manually type the URL on the browser (for example: localhost:3000/welcome, localhost:3000/urlcommands)
How could it be, it seems the browser caches the css files ?
Turbolinks
That might appear to be the case if you're using Turbolinks - which loads a new version of the <body> tag (leaving <head>). This would make your browser use the same CSS each request (where turbolinks is firing) problem would only be present if you're using the same layout
This may not be the problem (if you're changing layouts, the entire page will refresh)
A way to test this is to turn off turbolinks:
#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all" %>
If you do this, Rails should refresh your whole page every time. This will allow you to see whether the styling will change each time
CSS
The other issue you may have is how you're calling your CSS. If you've got a different layout for step 3 - are you calling different CSS?
Personally, I would just use different styling for the different steps & incorporate them into the same spreadsheet.
Here's how I'd do it with SASS:
#app/assets/stylesheets/application.css.sass
.service
.step1
//styling
.step2
//styling
.step3
//styling
Update
I would say the issue here is likely to be your structure of your code with Turbolinks. I'm 90% sure the issue will be with Turbolinks (especially as you wrote you "need to refresh" the doc to make the CSS work)
Can you share your layouts & how you're calling them in your controllers?

How to properly incorporate Zurb Foundation & Compass to configure SASS variables for a Wordpress theme?

I have been using foundation to develop a Wordpress theme by creating a custom build on the website and including the required files in my theme.
The theme structure (simplified) is so:
Theme Root
|-- 404.php
|-- _
| |-- inc
| | |-- css
| | | |
| | | `-- foundation.min.css
| | |-- images
| `-- js
| |-- foundation.min.js
| `-- modernizr.js
|-- theme.css
|-- theme.scss
My issue is that I would like to customise the SCSS variables, e.g.:
/* Background color for the top bar */
$topbar-bg: #111;
And have tried to include the necessary components:
#import "foundation/components/topbar";
$include-html-top-bar-classes: $include-html-classes;
Clearly it isn't finding the classes as there is no compass project or appropriate SCSS files to import/include, so this is where my question comes in.
I've installed the foundation gem, and am able to create a new Compass project, but I'm just wondering how to structure things and setup/update my Wordpress theme as a Compass project so I can set the variables in _settings.scss?
I'm just a bit confused as to how the 'foundation' way would be to go about incorporating it into a Wordpress theme so that I can customise the necessary SCSS variables while maintaining a standard Wordpress theme structure?
Depending on what level of integration you're looking for you need to create the foundation project in your theme's template directory. I use Foundation 4, SCSS & SMACSS mostly and here's a quick CL snippet I have for this:
compass create templatename -r zurb-foundation --using foundation; cd templatename/sass; mkdir {functions,layouts,mixins,modules,vendor}; open ../;
Now, that said if the theme is already in existence you will want to create templatename with . as it means use the folder you're in already. I don't have a good CL way to do Foundation 5 yet because most of my projects rely on IE compatibility still. Hopefully this gets you going in the right direction, but with the compass create you'll be able to use watch & compile and import different things.
Also, if you're interested in SMACSS (which is awesome) check out http://smacss.com

Resources