I need to create a webpage using atomic design. I am not getting proper tutorials in internet to get started.
Please share some demo project, so that i can understand how to implement using atomic design.
Intro
Compare to traditional web development, instead of design your website page by page, you break down your webpage/mockup into different components.
When you need them for different pages, you can add these modules piece by piece to structure useful components.
Quick start
Define your color and fonts in atom folder
Define your collection of links into molecules folder
Define your header/footer into Organism folder
Import your CSS by atom -> molecules -> organism order
/* Atom / links */
a {
color: #1EAEDB;
text-decoration: none;
}
a:hover {
color: #0FA0CE;
text-decoration: underline;
}
/* Molecules / header-links */
.header-links {
list-style-type: none;
padding: 0;
margin: 0;
}
.header-link { display: inline-block; }
/* Organism / header */
header {
width: 100%;
background-color: #222;
padding: 12px 20px;
}
<header class="header">
<ul class="header-links">
<li class="header-link">
Home
</li>
<li class="header-link">
About
</li>
</ul>
</header>
Now you have a header on your website that is using atomic design pattern!
You can try to break down other components as well using this method.
Source:
http://bradfrost.com/blog/post/atomic-web-design/
https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e
First of all I recommend "Atomic Design" ebook by Brad Frost, you can read it here: http://atomicdesign.bradfrost.com/table-of-contents/
In general - atomic design is more an idea than step-by-step tutorial. It's just a way to design components, going from the atoms (like a label or throbber) to more complex molecules (like search box) and whole organisms (like contact form).
Please read the above book. It should answer most of your questions. If not, please ask more specific question.
Related
I apologize if this question is super simple. I have been trying to use a third party website builder for a client for ease of access/editing later on but he really wants a responsive site that resizes and centers itself no matter what browser/resolution it's displayed on. I am pretty sure I will need to just start from scratch and build him something completely customized. I'm struggling to even know where to start with this as coding responsive sites is still new to me. Any help or guides that someone could point me to would be greatly appreciated.
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
#stage {
margin: 1em auto;
width: 360px;
height: 540px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 0px;
border: 0px solid #ccc;
background: #fff;
}
Do you want the body to be always centered so it doesn't have layout problems on different devices or do you want every element to be center aligned?
I think it's the first one.
You could use width:95vw; on the body element and margin:auto;.
You could work with media queries.
It's also important to add the viewport meta tag in the head.
Let me know if I understood the question
Does anyone know why my project is like this when small tabed,
enter image description here
But when full screened like this:
enter image description here
My grid has the css of:
.table{
position: absolute;
margin-top: 37em;
margin-left: -42em;
min-width: 1015px;
}
Your style will depend on how it was created in your workflow, but you can try this class
const useStyles = makeStyles({
table: {
minWidth: 650,
},
});
or
.table {
min-width: 650px !important;
}
But this limitation on the size of the table may be related to the element or container that is related to the table.
You also do not need to declare the table's position since it is inherent to your parent and is not placing it in a specific place.
Could you show us how you are applying these classes in your code. You only showed us a small piece of code and did not present the application for that class.
You can also see class applications and table usage on the Material-UI page
https://material-ui.com/styles/basics/
It would be interesting to publish with your question the code where it is generating this situation, just seeing images is difficult to understand your problem
change your css like
.table{
width: 100%;
margin-top: 37em;
margin-left: 0;
}
I have a problem with one page on my gatsby site.
If I go to that page from any other then it renders fine. But if I follow a link directly to it, or refresh the page once loaded then it does not render correctly. All of the other pages render fine. The one thing different about this is the use of flex display layout.
Looking at the page structure, it's rendered differently. HTML looks pretty much the same, but the classes and class attributes set by gatsy are different.
This is the page in question: https://www.hazardousfrog.com/contact-us/
If someone could take a quick look and let me know if this is a gatsby issue or something I have done wrong, I'd very much appreciate it.
After looking at it I believe it may be an error on your end. I look at both pages in separate tabs, one rendered correctly and one not. With the developer tools I inspected the form components and saw that they were loading completely different styles. I wouldn't be able to tell you exactly what is causing this, but if I had to guess it could be that you have styles or classes that are overriding one another.
//the form style when it is NOT rendered correctly
.jss9 {
margin: 0;
border: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;
}
//form styles when it IS rendered correctly
.jss357 {
display: flex;
flex-wrap: wrap;
}
I have successfully put a large first letter on the first paragraph on blog posts. But if there are other first paragraphs in the post (examples: the first paragraph of a blockquote, the first paragraph in an embedded podcast player) they are also displaying the large first letter.
I have tried some examples from this post but I'm not sure if this article is covering my situation or not. I'm new to the idea of adjacent sibling selectors. I'll share the code I tried to implement by (assumedly) telling any other p:first-of-type::first-letter incidents after my first incident to not have the styling...
.single .post .entry-content p:first-of-type::first-letter {
float: left;
width: 0.75em;
font-size: 600%;
font-family: alice, serif;
line-height: 78%;
}
.single .post .entry-content p:first-of-type::first-letter ~ p {
float: none;
width: 0;
font-size: 100%;
font-family: lora, serif;
line-height: 0%;
}
The large letters remain in block quotes and the embedded podcast player. How would I explain that first letters of first paragraphs inside of divs which are nested inside the .entry-content area should not have the first letter styling?
If your targeted paragraph is a direct child of .entry-content then you can use the direct children selector > :
.single .post .entry-content > p:first-of-type::first-letter {}
By using the direct children selector you don't select descendant elements that are nested deeper than direct children. And by adding :first-of-type or nth-of-type(n), you select only your paragraph within those childrens.
I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.
::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).
Here's the jsFiddle
It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.
I originally thought that it was sufficient to write each statement on a separate line.
I was mistaken.
So if I replace this code:
::-moz-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
..With this code:
::-moz-selection
{
text-shadow: none;
background: #333;
color: #fff;
}
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
.... bingo, it works.
FIDDLE
Support is also very good (for desktop): Caniuse
Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.
The following is documented on Mozilla Developer Network:
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).
The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.