nickberens360 / atomic-docs

Front end code documentation generator. http://atomicdocs.io/
GNU General Public License v3.0
780 stars 92 forks source link

CSS specificity and PHP include issues #35

Closed dazgreer closed 7 years ago

dazgreer commented 8 years ago

Hi, I'm using this for the first time, it seems great so far but I've run into a couple of issues.

1) I created a '.btn' component where the class is applied to the tag. I specified a color for the text however this is being overridden (in the docs) by the '.atomsWrap a' style in the 'atomic-core/css/site.css' file since it has a higher specificity than just '.btn'.

screen shot 2016-08-26 at 16 35 11

2) Thinking about Atomic design, I would expect that I could create 'molecules' within the docs by using includes from separate 'atom' components to build them up (to save from repeating code). However the includes are being parsed as text. I sit possible to do this?

screen shot 2016-08-26 at 16 34 43

Thanks, Daz

nickberens360 commented 8 years ago

@dazgreer thanks for the input. I updated atomic docs to remove the tag styling, thanks for the heads up! You can replace the /atomic-core directory on your install with the latest download from the repo. Alternatively you could open /atomic-core/scss/_cleanup.scss and remove the a{} style definition and rerun gulp.

And yeah I'm working on adding a third tab that will show the actual html output instead of any dynamic code.

dazgreer commented 8 years ago

Thanks Nick, that's great, looking forward to the 3rd tab!

nickberens360 commented 8 years ago

@dazgreer the latest version of master has a third tab labeled "output" which will display the outputted html if you're using php or another dynamic language.

dazgreer commented 8 years ago

@nickberens360 I've done a fresh install of this to test it out and I can see the third 'output' box which is great but for the example I first posted which has 3 php includes, I don't get any output. Pretty sure the relative URLs are correct, any ideas what might be wrong? All the info is in the image in the OP. Cheers

nickberens360 commented 8 years ago

@dazgreer Ahh yes, use the following syntax for your includes

<?php include DIR . '/components/atoms/box.php'; ?>

dazgreer commented 8 years ago

@nickberens360 thanks I've set this up as per below but they're still not showing:

<?php include DIR . '/components/atoms/box.php'; ?> <?php include DIR . '/components/atoms/paragraph.php'; ?> <?php include DIR . '/components/atoms/button.php'; ?>

The actual files are at e.g. 'http://localhost:8888/atomic-docs-master/components/atoms/box.php'. Where is DIR defined or do I need to set it?

Cheers

nickberens360 commented 8 years ago

@dazgreer Hmm, there should be double underscores before and after DIR

For some reason github removes them when I save the comment. See the image for the right syntax.

capture

dazgreer commented 8 years ago

@nickberens360 tried the double underscores and still not getting any output

screen shot 2016-09-26 at 11 45 21 screen shot 2016-09-26 at 11 45 38
nickberens360 commented 8 years ago

Huh, I'm at a loss. Could you possibly zip up your project and send it to me so I can take a closer look? That really should be working, hmmm. My email is nickberens360@gmail.com

dazgreer commented 8 years ago

thanks @nickberens360 have sent you an email

nickberens360 commented 8 years ago

@dazgreer Ok, I'm an idiot. The path I gave you in the include would work if you were in the root of your project. Try the path that is shown in this screenshot. image

dazgreer commented 8 years ago

@nickberens360, that works, thanks for all your help on this!

nickberens360 commented 8 years ago

@dazgreer no problem, and thanks for checking the project!